From e924c001376185488096d5f80d693164f44c9e4b Mon Sep 17 00:00:00 2001 From: simplesmiler Date: Sat, 6 May 2017 17:15:15 +0300 Subject: [PATCH 1/2] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=BE=D1=87=D0=B5=D0=BF=D1=8F=D1=82?= =?UTF-8?q?=D0=BE=D0=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ru/README.md | 4 ++-- ru/api.md | 2 +- ru/basic.md | 2 +- ru/bundle-renderer.md | 2 +- ru/css.md | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/ru/README.md b/ru/README.md index c7ab8b98..d63cc096 100644 --- a/ru/README.md +++ b/ru/README.md @@ -25,11 +25,11 @@ Vue.js — это фреймворк для создания приложени Следует учитывать и некоторые компромиссы при использовании серверного рендеринга: -- Ограничения при разработке. Код только для браузера может быть использован лишь внутри определённых хуках жизненного цикла; некоторые внешние библиотеки могут нуждаться в особой обработке, чтобы иметь возможность запускаться в приложении с серверным рендерингом. +- Ограничения при разработке. Код только для браузера может быть использован лишь в определённых хуках жизненного цикла; некоторые внешние библиотеки могут нуждаться в особой обработке, чтобы иметь возможность запускаться в приложении с серверным рендерингом. - Более сложные требования по настройке и развёртыванию сборки. В отличие от полностью статичного SPA, который может быть развёрнут на любом статичном файловом сервере, приложение с серверным рендерингом требует окружения, где есть возможность запустить сервер Node.js. -- Повышенная нагрузка на стороне сервера. Рендеринг полноценного приложения в Node.js очевидно более требовательно к ресурсам процессора, чем простая раздача статичных файлов, поэтому если вы ожидаете большой трафик, будьте готовы к соответствующей нагрузке на сервер и используйте стратегии кэширования. +- Повышенная нагрузка на стороне сервера. Рендеринг полноценного приложения в Node.js очевидно более требователен к ресурсам процессора, чем простая раздача статичных файлов, поэтому если вы ожидаете большой трафик, будьте готовы к соответствующей нагрузке на сервер и используйте стратегии кэширования. Прежде чем использовать серверный рендеринг для вашего приложения, первый вопрос который вы должны задать себе, действительно ли он вам нужен. В основном это зависит от того, насколько важно время до контента для вашего приложения. Например, если вы разрабатываете панель мониторинга для внутренних нужд, где дополнительные несколько сотен миллисекунд начальной загрузки не так важны, то серверный рендеринг будет излишеством. Однако, в тех случаях, когда время до контента критично, серверный рендеринг может позволит достичь наилучшей производительности начальной загрузки. diff --git a/ru/api.md b/ru/api.md index 9a460ef2..b03a9d43 100644 --- a/ru/api.md +++ b/ru/api.md @@ -102,7 +102,7 @@ const renderer = createBundleRenderer(serverBundle, { ... }) По умолчанию, только JavaScript и CSS файлы будут предзагружаться, так как они абсолютно необходимы для загрузки приложения. - Для других типов ресурсов, таких как изображений или шрифтов, предзагрузка может привести к ненужному увеличению объёмов передаваемой информации и даже к ухудшению производительности, поэтому предзагрузка зависит от реализуемого сценария. Вы можете точно контролировать, что требует предзагрузки, используя опцию `shouldPreload`: + Для других типов ресурсов, таких как изображения или шрифты, предзагрузка может привести к ненужному увеличению объёмов передаваемой информации и даже к ухудшению производительности, поэтому предзагрузка зависит от реализуемого сценария. Вы можете точно контролировать, что требует предзагрузки, используя опцию `shouldPreload`: ``` js const renderer = createBundleRenderer(bundle, { diff --git a/ru/basic.md b/ru/basic.md index 0ea0db33..cac87f2e 100644 --- a/ru/basic.md +++ b/ru/basic.md @@ -119,7 +119,7 @@ renderer.renderToString(app, (err, html) => { ``` -Мы можем предоставить необходимые данные для интерполяции, передав объект контекста для для рендера вторым аргументов в `renderToString`: +Мы можем предоставить необходимые данные для интерполяции, передав объект контекста для рендера вторым аргументом в `renderToString`: ``` js const context = { diff --git a/ru/bundle-renderer.md b/ru/bundle-renderer.md index 0b05eb83..bf679ad5 100644 --- a/ru/bundle-renderer.md +++ b/ru/bundle-renderer.md @@ -2,7 +2,7 @@ ## Проблемы с обычным SSR -До этого момента мы предполагали, что сборку с кодом серверной части будет напрямую использоваться сервером через `require`: +До этого момента мы предполагали, что сборка с кодом серверной части будет напрямую использоваться сервером через `require`: ``` js const createApp = require('/path/to/built-server-bundle.js') diff --git a/ru/css.md b/ru/css.md index 70af5d7b..fd8db8f6 100644 --- a/ru/css.md +++ b/ru/css.md @@ -91,7 +91,7 @@ module.exports = { module.exports = { // ... plugins: [ - // обычно дело, извлекать зависимости в фрагмент для вендоров для лучшего кэширования. + // обычное дело, извлекать зависимости в фрагмент для вендоров для лучшего кэширования. new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: function (module) { From 1e68710cce332beb2686499008d949fbac4229a3 Mon Sep 17 00:00:00 2001 From: simplesmiler Date: Sat, 6 May 2017 17:20:11 +0300 Subject: [PATCH 2/2] =?UTF-8?q?=D0=A1=D1=82=D0=B8=D0=BB=D0=B8=D1=81=D1=82?= =?UTF-8?q?=D0=B8=D1=87=D0=B5=D1=81=D0=BA=D0=B8=D0=B5=20=D0=B8=D1=81=D0=BF?= =?UTF-8?q?=D1=80=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ru/README.md | 18 +++++++++--------- ru/api.md | 6 +++--- ru/bundle-renderer.md | 2 +- ru/caching.md | 4 ++-- ru/css.md | 4 ++-- 5 files changed, 17 insertions(+), 17 deletions(-) diff --git a/ru/README.md b/ru/README.md index d63cc096..84d1c08d 100644 --- a/ru/README.md +++ b/ru/README.md @@ -5,13 +5,13 @@ > - 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`). Ваше существующее приложение должно продолжать работать, но советуем внести изменения с учётом новых рекомендаций. +> Если вы ранее использовали Vue 2.2 с серверным рендерингом, вы заметите, что рекомендуемая структура кода теперь [немного отличается](./structure.md) (с новой опцией [runInNewContext](./api.md#runinnewcontext) установленной в `false`). Ваше существующее приложение по-прежнему будет работать, но советуем внести изменения с учётом новых рекомендаций. ## Что такое серверный рендеринг (SSR)? -Vue.js — это фреймворк для создания приложений, выполняемых на клиенте (client-side). По умолчанию компоненты Vue создают и манипулируют DOM в браузере в качестве вывода. Однако, также возможно рендерить те же компоненты в HTML-строки на сервере, отправлять их в браузер, и наконец «гидрировать» статическую разметку в полностью интерактивное приложение на клиенте. +Vue.js — это фреймворк для создания приложений, выполняемых на клиенте (client-side). По умолчанию компоненты Vue создают и манипулируют DOM в браузере. Однако, также возможно рендерить те же компоненты в HTML-строки на сервере, отправлять их в браузер, и наконец «гидрировать» статическую разметку в полностью интерактивное приложение на клиенте. -Приложение Vue.js отрендеренное на сервере также можно считать «изоморфным» или «универсальным», в том смысле, что большая часть кода приложения **выполняется на сервере и на клиенте**. +Приложение Vue.js отрендеренное на сервере также можно считать «изоморфным» или «универсальным», в том смысле, что большая часть кода приложения **является общей для сервера и клиента**. ## Нужен ли вам SSR? @@ -19,7 +19,7 @@ Vue.js — это фреймворк для создания приложени - Лучшее SEO, поскольку поисковые роботы будут видеть полностью отрендеренную страницу. - Обратите внимание, что на данный момент Google and Bing без проблем могут индексировать синхронные приложения JavaScript. Ключевое слово здесь — синхронные. Если ваше приложение запускается с индикатором загрузки, а потом загружает контент через Ajax, то поисковый робот просто не будет дожидаться окончания загрузки. Это значит, что если у вас есть асинхронный контент на страницах где SEO важен, то может потребоваться серверный рендеринг. + Обратите внимание, что на данный момент Google and Bing могут без проблем индексировать синхронные приложения JavaScript. Ключевое слово здесь — синхронные. Если ваше приложение запускается с индикатором загрузки, а потом догружает контент через Ajax, то поисковый робот просто не будет дожидаться окончания загрузки. Это значит, что если у вас есть асинхронный контент на страницах где SEO важен, то может потребоваться серверный рендеринг. - Лучшие показатели времени до отображения контента (time-to-content), особенно при плохом интернете или на медленных устройствах. Для разметки, отрендеренной на сервере, не требуется дожидаться пока весь JavaScript будет загружен и выполнен, поэтому ваш пользователь увидит полностью отрендеренную страницу раньше. Как правило, это приводит к лучшему пользовательскому опыту и может быть критичным для приложений, где время до отображения контента напрямую связано с коэффициентом конверсии. @@ -31,20 +31,20 @@ Vue.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. +Если вы используете Webpack, то для добавления пререндеринга достаточно установить плагин [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin). Он был тщательно протестирован с приложениями Vue, а его [создатель](https://github.com/chrisvfritz) — член основной команды разработки Vue. ## Об этом руководстве -Это руководство ориентировано на SPA приложения с рендерингом на стороне сервере, используя Node.js в качестве сервера. Использование серверного рендеринга Vue совместно с другими технологиями и настройками бэкэнда являются отдельной темой и не рассматриваются в этом руководстве. +Это руководство ориентировано на SPA приложения с рендерингом на сервере, используя Node.js в качестве сервера. Использование серверного рендеринга Vue совместно с другими технологиями и настройками бэкэнда являются отдельной темой и не рассматриваются в этом руководстве. -Это руководство будет очень детальным и предполагает, что вы уже знакомы с самим Vue.js, имеете знания и опыт работы с Node.js и Webpack. Если вы предпочитаете более высокоуровневые решения, обеспечивающие работу из коробки — вам следует попробовать [Nuxt.js](http://nuxtjs.org/). Он построен на том же стеке Vue, но позволяет абстрагироваться от написания шаблонного кода, а также предоставляет некоторые дополнительные возможности, такие как генерация статичного сайта. Однако это может не соответствовать вашему варианту, если необходим точный контроль структуры вашего приложения. Несмотря на это, было бы полезно прочитать это руководство, чтобы лучше понимать, как всё работает вместе. +Это руководство будет очень детальным и предполагает, что вы уже знакомы с самим Vue.js, имеете знания и опыт работы с Node.js и Webpack. Если вы предпочитаете более высокоуровневые решения, обеспечивающие работу из коробки — вам следует попробовать [Nuxt.js](http://nuxtjs.org/). Он построен на том же стеке Vue, но позволяет абстрагироваться от написания шаблонного кода, а также предоставляет некоторые дополнительные возможности, такие как генерация статичного сайта. Однако он может не подойти, если вам необходим полный контроль над структурой приложения. В любом случае, вам будет полезно прочитать это руководство, чтобы лучше понимать, как все составляющие работают вместе. -По мере прочтения руководства, также может быть полезным обращаться к официальному [демо HackerNews](https://github.com/vuejs/vue-hackernews-2.0/), в котором используется большинство техник, изложенных в этом руководстве. +По мере прочтения руководства, будет полезным обращаться к официальному [демо HackerNews](https://github.com/vuejs/vue-hackernews-2.0/), в котором используется большинство техник, изложенных в этом руководстве. Наконец, обратите внимание, что решения в этом руководстве не являются окончательными — мы решили, что они хорошо работают для нас, но это не означает, что они не могут быть улучшены. Они могут быть пересмотрены в будущем — поэтому не стесняйтесь вносить свой вклад, отправляя пулл-реквесты! diff --git a/ru/api.md b/ru/api.md index b03a9d43..82aea676 100644 --- a/ru/api.md +++ b/ru/api.md @@ -98,11 +98,11 @@ const renderer = createBundleRenderer(serverBundle, { ... }) - 2.3.0+ - Функция управления, какие файлы должны иметь `` в генерируемых ресурсах. + Функция, определяющая какие файлы должны иметь `` в генерируемых ресурсах. По умолчанию, только JavaScript и CSS файлы будут предзагружаться, так как они абсолютно необходимы для загрузки приложения. - Для других типов ресурсов, таких как изображения или шрифты, предзагрузка может привести к ненужному увеличению объёмов передаваемой информации и даже к ухудшению производительности, поэтому предзагрузка зависит от реализуемого сценария. Вы можете точно контролировать, что требует предзагрузки, используя опцию `shouldPreload`: + Для других типов ресурсов, таких как изображения или шрифты, предзагрузка может привести к ненужному увеличению объёмов передаваемой информации и даже к ухудшению производительности, поэтому список файлов, которые нужно предзагружать, зависит от ситуации. Вы можете точно контролировать, что требует предзагрузки, используя опцию `shouldPreload`: ``` js const renderer = createBundleRenderer(bundle, { @@ -132,7 +132,7 @@ const renderer = createBundleRenderer(serverBundle, { ... }) - используется только в `createBundleRenderer` - Ожидается: `boolean | 'once'` (`'once'` поддерживается только с версии 2.3.1+) - По умолчанию, рендерер сборки будет создавать новый контекст V8 для каждого рендеринга и повторно исполнять всю сборку. Это имеет некоторые преимущества — например, код приложения изолирован от процесса сервера и не нужно беспокоиться [о проблеме «синглетона с состоянием»](./structure.md#avoid-stateful-singletons), о которой упоминали ранее в руководстве. Однако этот режим требует значительных затрат производительности, поскольку повторное выполнение сборки обходится дорого, особенно когда приложение становится большим. + По умолчанию, рендерер сборки будет создавать новый контекст V8 для каждого рендеринга и повторно исполнять всю сборку. Это имеет некоторые преимущества — например, код приложения изолирован от процесса сервера и не нужно беспокоиться [о проблеме «синглетона с состоянием»](./structure.md#avoid-stateful-singletons), которая упоминалась ранее в руководстве. Однако этот режим требует значительных затрат производительности, поскольку повторное выполнение сборки обходится дорого, особенно когда приложение становится большим. По умолчанию эта опция имеет значение `true` для обеспечения обратной совместимости, но рекомендуется использовать `runInNewContext: false` или `runInNewContext: 'once'` всегда, когда это возможно. diff --git a/ru/bundle-renderer.md b/ru/bundle-renderer.md index bf679ad5..051a0a1e 100644 --- a/ru/bundle-renderer.md +++ b/ru/bundle-renderer.md @@ -24,7 +24,7 @@ const createApp = require('/path/to/built-server-bundle.js') --- -Мы обсудим, как настроить Webpack для генерации необходимых частей для рендерера в следующем разделе, но сейчас давайте предположим, что у нас уже есть всё необходимое, и вот как создавать рендерер: +Мы обсудим, как настроить Webpack для генерации необходимых частей для рендерера в следующем разделе, а сейчас давайте предположим, что у нас уже есть всё необходимое, и создадим рендерер: ``` js const { createBundleRenderer } = require('vue-server-renderer') diff --git a/ru/caching.md b/ru/caching.md index a8ce9441..01fd13cc 100644 --- a/ru/caching.md +++ b/ru/caching.md @@ -78,9 +78,9 @@ export default { Если рендерер найдёт попадание в кэше для компонента во время рендеринга, он будет напрямую переиспользовать кэшированный результат для всего поддерева. Это означает, что вы **НЕ ДОЛЖНЫ** кэшировать компонент когда: - Он имеет дочерние компоненты, которые могут полагаться на глобальное состояние. -- Он имеет дочерние компоненты, которые с побочными эффектами (side effects) для `context` рендера. +- Он имеет дочерние компоненты, которые создают побочные эффекты (side effects) для `context` рендера. -Поэтому кэширование компонентов следует с аккуратностью применять для устранения узких мест производительности. В большинстве случаев вам не потребуется и не нужно кэшировать компоненты, используемые в единственном экземпляре. Наиболее общий тип компонентов, подходящих для кэширования — те, что повторяются в больших `v-for` циклах. Поскольку эти компоненты, как правило, управляются объектами из коллекции базы данных, они могут использовать простую стратегию кэширования: сгенерируйте их ключи кэша, используя их уникальный идентификатор + временную метку последнего обновления: +Поэтому кэширование компонентов следует с аккуратностью применять для устранения узких мест производительности. В большинстве случаев не следует кэшировать компоненты, используемые в единственном экземпляре. Наиболее общий тип компонентов, подходящих для кэширования — те, что повторяются в больших `v-for` циклах. Поскольку такие компоненты, как правило, отражают объекты из коллекции базы данных, они могут использовать простую стратегию кэширования: сгенерируйте их ключи кэша, используя их уникальный идентификатор + временную метку последнего обновления: ``` js serverCacheKey: props => props.item.id + '::' + props.item.last_updated diff --git a/ru/css.md b/ru/css.md index fd8db8f6..5db5a412 100644 --- a/ru/css.md +++ b/ru/css.md @@ -8,9 +8,9 @@ Что ещё более важно, загрузчик `vue-style-loader`, используемый внутри `vue-loader`, имеет некоторые особенности для серверного рендеринга: -- Универсальный опыт создания для клиента и сервера. +- Единый код для клиента и сервера. -- Автоматизирование критического CSS при использовании `bundleRenderer`. +- Автоматизация критического CSS при использовании `bundleRenderer`. Если используется во время рендеринга на сервере, CSS компонента может быть собран и вставлен в HTML (автоматически обрабатывается при использовании опции `template`). На клиенте, когда компонент используется в первый раз, `vue-style-loader` проверяет, есть ли уже встроенный сервером CSS для этого компонента, а если нет, CSS будет динамически встроен через тег `