From f2b6320fd5129cf5db1b62a9e3017b08238df95f Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 17 Jul 2017 10:13:57 +0200 Subject: [PATCH 1/4] - Remove ` from template because that note refer to the `template` option but to the template concept. - Add some ` for position code words. - "name" become `name` because it's a position code. - Nginx become nginx because it's the official documentaiton name : https://nginx.org/en/. - Change `>=` or `=<` to `+` that is more easy to read and to have consistency accross all documentations. Signed-off-by: Bruno Lesieur --- en/README.md | 6 +++--- en/caching.md | 4 ++-- en/css.md | 2 +- en/head.md | 6 +++--- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/en/README.md b/en/README.md index f1eacdfa..b4524a99 100644 --- a/en/README.md +++ b/en/README.md @@ -1,9 +1,9 @@ # Vue.js Server-Side Rendering Guide > **Note:** this guide requires the following minimum versions of Vue and supporting libraries: -> - vue & vue-server-renderer >= 2.3.0 -> - vue-router >= 2.5.0 -> - vue-loader >= 12.0.0 & vue-style-loader >= 3.0.0 +> - vue & vue-server-renderer 2.3.0+ +> - vue-router 2.5.0+ +> - vue-loader 12.0.0+ & vue-style-loader 3.0.0+ > If you have previously used Vue 2.2 with SSR, you will notice that the recommended code structure is now [a bit different](./structure.md) (with the new [runInNewContext](./api.md#runinnewcontext) option set to `false`). Your existing app should continue to work, but it's recommended to migrate to the new recommendations. diff --git a/en/caching.md b/en/caching.md index 5568a032..465cd02a 100644 --- a/en/caching.md +++ b/en/caching.md @@ -6,7 +6,7 @@ Although Vue's SSR is quite fast, it can't match the performance of pure string- A server-rendered app in most cases relies on external data, so the content is dynamic by nature and cannot be cached for extended periods. However, if the content is not user-specific (i.e. for the same URL it always renders the same content for all users), we can leverage a strategy called [micro-caching](https://www.nginx.com/blog/benefits-of-microcaching-nginx/) to drastically improve our app's capability of handling high traffic. -This is usually done at the Nginx layer, but we can also implement it in Node.js: +This is usually done at the nginx layer, but we can also implement it in Node.js: ``` js const microCache = LRU({ @@ -67,7 +67,7 @@ export default { } ``` -Note that cache-able component **must also define a unique "name" option**. With a unique name, the cache key is thus per-component: you don't need to worry about two components returning the same key. +Note that cache-able component **must also define a unique `name` option**. With a unique name, the cache key is thus per-component: you don't need to worry about two components returning the same key. The key returned from `serverCacheKey` should contain sufficient information to represent the shape of the render result. The above is a good implementation if the render result is solely determined by `props.item.id`. However, if the item with the same id may change over time, or if render result also relies on another prop, then you need to modify your `getCacheKey` implementation to take those other variables into account. diff --git a/en/css.md b/en/css.md index 7d6e846d..42120d6f 100644 --- a/en/css.md +++ b/en/css.md @@ -22,7 +22,7 @@ More importantly, `vue-style-loader`, the loader used internally by `vue-loader` ## Enabling CSS Extraction -To extract CSS from `*.vue` files, use `vue-loader`'s `extractCSS` option (requires `vue-loader>=12.0.0`): +To extract CSS from `*.vue` files, use `vue-loader`'s `extractCSS` option (requires `vue-loader` 12.0.0+): ``` js // webpack.config.js diff --git a/en/head.md b/en/head.md index 90458c6c..81072c3f 100644 --- a/en/head.md +++ b/en/head.md @@ -2,7 +2,7 @@ Similar to asset injection, head management follows the same idea: we can dynamically attach data to the render `context` in a component's lifecycle, and then interpolate those data in `template`. -> In version >=2.3.2, you can directly access the SSR context in a component as `this.$ssrContext`. In older versions you'd have to manually inject the SSR context by passing it to `createApp()` and expose it on the root instance's `$options` - child components can then access it via `this.$root.$options.ssrContext`. +> In version 2.3.2+, you can directly access the SSR context in a component as `this.$ssrContext`. In older versions you'd have to manually inject the SSR context by passing it to `createApp()` and expose it on the root instance's `$options` - child components can then access it via `this.$root.$options.ssrContext`. We can write a simple mixin to perform title management: @@ -38,7 +38,7 @@ const clientTitleMixin = { } } -// VUE_ENV can be injected with webpack.DefinePlugin +// `VUE_ENV` can be injected with `webpack.DefinePlugin` export default process.env.VUE_ENV === 'server' ? serverTitleMixin : clientTitleMixin @@ -66,7 +66,7 @@ export default { } ``` -And inside the `template` passed to bundle renderer: +And inside the template passed to bundle renderer: ``` html From 3f3acf362cabcc804b3e66a8b2467e9fb6dfae9e Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 17 Jul 2017 15:00:05 +0200 Subject: [PATCH 2/4] NPM become npm as into the official documentation Signed-off-by: Bruno Lesieur --- en/api.md | 2 +- en/basic.md | 2 +- en/css.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/en/api.md b/en/api.md index b47a85c6..bbe8af6d 100644 --- a/en/api.md +++ b/en/api.md @@ -151,7 +151,7 @@ See [Introducing the Server Bundle](./bundle-renderer.md) and [Build Configurati - 2.2.0+ - only used in `createBundleRenderer` - Explicitly declare the base directory for the server bundle to resolve `node_modules` dependencies from. This is only needed if your generated bundle file is placed in a different location from where the externalized NPM dependencies are installed, or your `vue-server-renderer` is npm-linked into your current project. + Explicitly declare the base directory for the server bundle to resolve `node_modules` dependencies from. This is only needed if your generated bundle file is placed in a different location from where the externalized npm dependencies are installed, or your `vue-server-renderer` is npm-linked into your current project. - #### `cache` diff --git a/en/basic.md b/en/basic.md index 5b800614..987d2dcd 100644 --- a/en/basic.md +++ b/en/basic.md @@ -6,7 +6,7 @@ npm install vue vue-server-renderer --save ``` -We will be using NPM throughout the guide, but feel free to use [Yarn](https://yarnpkg.com/en/) instead. +We will be using npm throughout the guide, but feel free to use [Yarn](https://yarnpkg.com/en/) instead. #### Notes diff --git a/en/css.md b/en/css.md index 42120d6f..b6249ffc 100644 --- a/en/css.md +++ b/en/css.md @@ -81,7 +81,7 @@ module.exports = { ## Importing Styles from Dependencies -A few things to take note when importing CSS from an NPM dependency: +A few things to take note when importing CSS from an npm dependency: 1. It should not be externalized in the server build. From a0d86e7877e55beff09c3abed27f703cf0dc1c81 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 17 Jul 2017 15:07:57 +0200 Subject: [PATCH 3/4] redis to Redis as into the official documentation. Signed-off-by: Bruno Lesieur --- en/api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/api.md b/en/api.md index bbe8af6d..0a1895b5 100644 --- a/en/api.md +++ b/en/api.md @@ -177,7 +177,7 @@ See [Introducing the Server Bundle](./bundle-renderer.md) and [Build Configurati }) ``` - Note that the cache object should at least implement `get` and `set`. In addition, `get` and `has` can be optionally async if they accept a second argument as callback. This allows the cache to make use of async APIs, e.g. a redis client: + Note that the cache object should at least implement `get` and `set`. In addition, `get` and `has` can be optionally async if they accept a second argument as callback. This allows the cache to make use of async APIs, e.g. a Redis client: ``` js const renderer = createRenderer({ From babacc34572608911d1d2d7c91815ee457fab329 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 14 Aug 2017 16:53:36 +0200 Subject: [PATCH 4/4] NPM and Nginx same as vuejs.org documentation Signed-off-by: Bruno Lesieur --- en/api.md | 2 +- en/basic.md | 2 +- en/caching.md | 2 +- en/css.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/en/api.md b/en/api.md index 0a1895b5..28f92615 100644 --- a/en/api.md +++ b/en/api.md @@ -151,7 +151,7 @@ See [Introducing the Server Bundle](./bundle-renderer.md) and [Build Configurati - 2.2.0+ - only used in `createBundleRenderer` - Explicitly declare the base directory for the server bundle to resolve `node_modules` dependencies from. This is only needed if your generated bundle file is placed in a different location from where the externalized npm dependencies are installed, or your `vue-server-renderer` is npm-linked into your current project. + Explicitly declare the base directory for the server bundle to resolve `node_modules` dependencies from. This is only needed if your generated bundle file is placed in a different location from where the externalized NPM dependencies are installed, or your `vue-server-renderer` is NPM-linked into your current project. - #### `cache` diff --git a/en/basic.md b/en/basic.md index 987d2dcd..5b800614 100644 --- a/en/basic.md +++ b/en/basic.md @@ -6,7 +6,7 @@ npm install vue vue-server-renderer --save ``` -We will be using npm throughout the guide, but feel free to use [Yarn](https://yarnpkg.com/en/) instead. +We will be using NPM throughout the guide, but feel free to use [Yarn](https://yarnpkg.com/en/) instead. #### Notes diff --git a/en/caching.md b/en/caching.md index 465cd02a..95c4887a 100644 --- a/en/caching.md +++ b/en/caching.md @@ -6,7 +6,7 @@ Although Vue's SSR is quite fast, it can't match the performance of pure string- A server-rendered app in most cases relies on external data, so the content is dynamic by nature and cannot be cached for extended periods. However, if the content is not user-specific (i.e. for the same URL it always renders the same content for all users), we can leverage a strategy called [micro-caching](https://www.nginx.com/blog/benefits-of-microcaching-nginx/) to drastically improve our app's capability of handling high traffic. -This is usually done at the nginx layer, but we can also implement it in Node.js: +This is usually done at the Nginx layer, but we can also implement it in Node.js: ``` js const microCache = LRU({ diff --git a/en/css.md b/en/css.md index b6249ffc..42120d6f 100644 --- a/en/css.md +++ b/en/css.md @@ -81,7 +81,7 @@ module.exports = { ## Importing Styles from Dependencies -A few things to take note when importing CSS from an npm dependency: +A few things to take note when importing CSS from an NPM dependency: 1. It should not be externalized in the server build.