Skip to content

[READY TO MERGE] Russian translation #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 55 commits into from
May 6, 2017
Merged
Changes from all commits
Commits
Show all changes
55 commits
Select commit Hold shift + click to select a range
1f3bc44
Merge pull request #1 from vuejs/master
Alex-Sokolov Apr 30, 2017
df74007
[RU] init commit
Alex-Sokolov Apr 30, 2017
576b55f
langs.md add russian
Alex-Sokolov Apr 30, 2017
390a68f
Merge pull request #2 from Alex-Sokolov/master
Alex-Sokolov Apr 30, 2017
3e1fe7f
basic.md переведён
Alex-Sokolov Apr 30, 2017
351fe05
basic.md тире и переведены примеры
Alex-Sokolov Apr 30, 2017
fd4d4b2
universal.md переведён
Alex-Sokolov Apr 30, 2017
cdfa2d3
structure.md переведён
Alex-Sokolov Apr 30, 2017
949bb2e
routing.md переведён
Alex-Sokolov Apr 30, 2017
ea2f121
data.md переведён
Alex-Sokolov Apr 30, 2017
89c7236
hydration.md переведён
Alex-Sokolov Apr 30, 2017
20d8815
bundle-renderer.md переведён
Alex-Sokolov Apr 30, 2017
444c685
build-config.md в процессе
Alex-Sokolov Apr 30, 2017
b009eab
Merge pull request #4 from vuejs/master
Alex-Sokolov Apr 30, 2017
58eac4b
Merge remote-tracking branch 'upstream/master'
Alex-Sokolov Apr 30, 2017
cc8abba
bundle-renderer.md исправлена ссылка
Alex-Sokolov Apr 30, 2017
9c46545
build-config.md переведён
Alex-Sokolov Apr 30, 2017
acacb2b
css.md переведён
Alex-Sokolov Apr 30, 2017
ce48c91
head.md переведён
Alex-Sokolov Apr 30, 2017
7ab8c11
cache.md переведён
Alex-Sokolov Apr 30, 2017
169144d
streaming.md переведён
Alex-Sokolov Apr 30, 2017
7825051
SUMMARY.md допереведён
Alex-Sokolov Apr 30, 2017
924e1f8
api.md начат перевод
Alex-Sokolov Apr 30, 2017
61828fc
build-config.md доработки
Alex-Sokolov May 1, 2017
2ec9e03
bundle-rendered.md доработки
Alex-Sokolov May 1, 2017
37e3712
api.md допереведён
Alex-Sokolov May 1, 2017
ebdec18
Merge pull request #5 from vuejs/master
Alex-Sokolov May 1, 2017
018b10d
api.md исправлены опечатки
Alex-Sokolov May 1, 2017
a9a3b79
basic.md исправлены опечатки
Alex-Sokolov May 1, 2017
d63a695
build-config.md исправлены опечатки
Alex-Sokolov May 1, 2017
5885df8
bundle-renderer.md исправлены опечатки
Alex-Sokolov May 1, 2017
4db01fb
caching.md исправлены опечатки
Alex-Sokolov May 1, 2017
eae6ee2
css.md исправлены опечатки
Alex-Sokolov May 1, 2017
38a3681
data.md исправлены опечатки
Alex-Sokolov May 1, 2017
a4cd8bc
head.md исправлены опечатки
Alex-Sokolov May 1, 2017
be1b2d8
hydration.md исправлены опечатки
Alex-Sokolov May 1, 2017
b12e70f
routing.md исправлены опечатки
Alex-Sokolov May 1, 2017
02a1fc0
streaming.md исправлены опечатки
Alex-Sokolov May 1, 2017
89f91f4
structure.md исправлены опечатки
Alex-Sokolov May 1, 2017
b096bb4
universal.md исправлены опечатки
Alex-Sokolov May 1, 2017
031dc62
Merge pull request #3 from Alex-Sokolov/master
Alex-Sokolov May 1, 2017
90e8ff6
Merge pull request #6 from vuejs/master
Alex-Sokolov May 2, 2017
03fd580
api.md доработки к 2.3.1
Alex-Sokolov May 2, 2017
0a7d4fe
build-config.md доработки к 2.3.1
Alex-Sokolov May 2, 2017
58dee17
bundle-renderer.md доработки к 2.3.1
Alex-Sokolov May 2, 2017
b7fc492
Merge pull request #7 from Alex-Sokolov/master
Alex-Sokolov May 2, 2017
f3f8407
head.md доработки
Alex-Sokolov May 2, 2017
8713a38
Merge pull request #8 from Alex-Sokolov/master
Alex-Sokolov May 2, 2017
db6859d
routing.md исправлен пример
Alex-Sokolov May 3, 2017
10b3c10
Merge pull request #9 from Alex-Sokolov/master
Alex-Sokolov May 3, 2017
6a50a75
README.md переведён
Alex-Sokolov May 6, 2017
511820a
Merge pull request #10 from Alex-Sokolov/master
Alex-Sokolov May 6, 2017
e924c00
Исправления очепяток
simplesmiler May 6, 2017
1e68710
Стилистические исправления
simplesmiler May 6, 2017
ea5db24
Merge pull request #11 from simplesmiler/master
Alex-Sokolov May 6, 2017
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions LANGS.md
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
* [English](en/)
* [Русский](ru/)
50 changes: 50 additions & 0 deletions ru/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
# Руководство по серверному рендерингу Vue.js

> **Примечание:** для этого руководства требуются следующие версии Vue и библиотек:
> - vue & vue-server-renderer >= 2.3.0
> - vue-router >= 2.5.0
> - vue-loader >= 12.0.0 & vue-style-loader >= 3.0.0

> Если вы ранее использовали Vue 2.2 с серверным рендерингом, вы заметите, что рекомендуемая структура кода теперь [немного отличается](./structure.md) (с новой опцией [runInNewContext](./api.md#runinnewcontext) установленной в `false`). Ваше существующее приложение по-прежнему будет работать, но советуем внести изменения с учётом новых рекомендаций.

## Что такое серверный рендеринг (SSR)?

Vue.js — это фреймворк для создания приложений, выполняемых на клиенте (client-side). По умолчанию компоненты Vue создают и манипулируют DOM в браузере. Однако, также возможно рендерить те же компоненты в HTML-строки на сервере, отправлять их в браузер, и наконец «гидрировать» статическую разметку в полностью интерактивное приложение на клиенте.

Приложение Vue.js отрендеренное на сервере также можно считать «изоморфным» или «универсальным», в том смысле, что большая часть кода приложения **является общей для сервера и клиента**.

## Нужен ли вам SSR?

По сравнению с традиционным SPA (Single-Page Application), преимуществами серверного рендеринга будут:

- Лучшее SEO, поскольку поисковые роботы будут видеть полностью отрендеренную страницу.

Обратите внимание, что на данный момент Google and Bing могут без проблем индексировать синхронные приложения JavaScript. Ключевое слово здесь — синхронные. Если ваше приложение запускается с индикатором загрузки, а потом догружает контент через Ajax, то поисковый робот просто не будет дожидаться окончания загрузки. Это значит, что если у вас есть асинхронный контент на страницах где SEO важен, то может потребоваться серверный рендеринг.

- Лучшие показатели времени до отображения контента (time-to-content), особенно при плохом интернете или на медленных устройствах. Для разметки, отрендеренной на сервере, не требуется дожидаться пока весь JavaScript будет загружен и выполнен, поэтому ваш пользователь увидит полностью отрендеренную страницу раньше. Как правило, это приводит к лучшему пользовательскому опыту и может быть критичным для приложений, где время до отображения контента напрямую связано с коэффициентом конверсии.

Следует учитывать и некоторые компромиссы при использовании серверного рендеринга:

- Ограничения при разработке. Код только для браузера может быть использован лишь в определённых хуках жизненного цикла; некоторые внешние библиотеки могут нуждаться в особой обработке, чтобы иметь возможность запускаться в приложении с серверным рендерингом.

- Более сложные требования по настройке и развёртыванию сборки. В отличие от полностью статичного SPA, который может быть развёрнут на любом статичном файловом сервере, приложение с серверным рендерингом требует окружения, где есть возможность запустить сервер Node.js.

- Повышенная нагрузка на стороне сервера. Рендеринг полноценного приложения в Node.js очевидно более требователен к ресурсам процессора, чем простая раздача статичных файлов, поэтому если вы ожидаете большой трафик, будьте готовы к соответствующей нагрузке на сервер и используйте стратегии кэширования.

Прежде чем использовать серверный рендеринг для вашего приложения, задайте себе вопрос, действительно ли он вам нужен. Ответ зависит от того, насколько важно время до контента для вашего приложения. Например, если вы разрабатываете панель мониторинга для внутренних нужд, где дополнительные несколько сотен миллисекунд начальной загрузки не так важны, то серверный рендеринг будет излишеством. Однако, в тех случаях, когда время до контента критично, серверный рендеринг может позволит достичь наилучшей производительности начальной загрузки.

## SSR vs Пререндеринг

Если вы интересуетесь серверным рендерингом только для того, чтобы улучшить SEO на нескольких маркетинговых страницах (например, `/`, `/about`, `/contact`, и т.д.), вам скорее всего будет достаточно __пререндеринга__. Вместо того, чтобы заставлять веб-сервер компилировать HTML на лету, пререндеринг просто сгенерирует статичные HTML-файлы для указанных маршрутов на этапе сборки. Преимуществом пререндеринга будет простота реализации, кроме того этот подход позволит вам оставить фронтенд полностью статичным.

Если вы используете Webpack, то для добавления пререндеринга достаточно установить плагин [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin). Он был тщательно протестирован с приложениями Vue, а его [создатель](https://github.com/chrisvfritz) — член основной команды разработки Vue.

## Об этом руководстве

Это руководство ориентировано на SPA приложения с рендерингом на сервере, используя Node.js в качестве сервера. Использование серверного рендеринга Vue совместно с другими технологиями и настройками бэкэнда являются отдельной темой и не рассматриваются в этом руководстве.

Это руководство будет очень детальным и предполагает, что вы уже знакомы с самим Vue.js, имеете знания и опыт работы с Node.js и Webpack. Если вы предпочитаете более высокоуровневые решения, обеспечивающие работу из коробки — вам следует попробовать [Nuxt.js](http://nuxtjs.org/). Он построен на том же стеке Vue, но позволяет абстрагироваться от написания шаблонного кода, а также предоставляет некоторые дополнительные возможности, такие как генерация статичного сайта. Однако он может не подойти, если вам необходим полный контроль над структурой приложения. В любом случае, вам будет полезно прочитать это руководство, чтобы лучше понимать, как все составляющие работают вместе.

По мере прочтения руководства, будет полезным обращаться к официальному [демо HackerNews](https://github.com/vuejs/vue-hackernews-2.0/), в котором используется большинство техник, изложенных в этом руководстве.

Наконец, обратите внимание, что решения в этом руководстве не являются окончательными — мы решили, что они хорошо работают для нас, но это не означает, что они не могут быть улучшены. Они могут быть пересмотрены в будущем — поэтому не стесняйтесь вносить свой вклад, отправляя пулл-реквесты!
27 changes: 27 additions & 0 deletions ru/SUMMARY.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
- [Использование](basic.md)
- [Написание универсального кода](universal.md)
- [Структура исходного кода](structure.md)
- [Маршрутизация и разделение кода](routing.md)
- [Предзагрузка данных и состояния](data.md)
- [Гидратация клиентской части](hydration.md)
- [Представляем Bundle Renderer](bundle-renderer.md)
- [Конфигурация сборки](build-config.md)
- [Управление CSS](css.md)
- [Управление заголовочными тегами (head)](head.md)
- [Кэширование](caching.md)
- [Стриминг](streaming.md)
- [Справочник API](api.md)
- [createRenderer](api.md#createrendereroptions)
- [createBundleRenderer](api.md#createbundlerendererbundle-options)
- [Класс: Renderer](api.md#class-renderer)
- [Класс: BundleRenderer](api.md#class-bundlerenderer)
- [Опции рендерера](api.md#renderer-options)
- [template](api.md#template)
- [clientManifest](api.md#clientmanifest)
- [inject](api.md#inject)
- [shouldPreload](api.md#shouldpreload)
- [runInNewContext](api.md#runinnewcontext)
- [basedir](api.md#basedir)
- [cache](api.md#cache)
- [directives](api.md#directives)
- [Webpack плагины](api.md#webpack-plugins)
Loading