###Installation
###安裝
`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.
整個指南我們都用NPM，不過也可以用?[Yarn](https://yarnpkg.com/en/)?代替。
####Notes
####注意
It's recommended to use Node.js version 6+.
vue-server-renderer
?and?vue
?must have matching versions.
建議Node v6以上。
vue-server-renderer
?和 vue
必須用對應的版本。
vue-server-renderer
?relies on some Node.js native modules and therefore can only be used in Node.js.
vue-server-renderer依賴Node本身的模塊，因此只能應用在node上面。
We may provide a simpler build that can be run in other JavaScript runtimes in the future.
我們在未來會提供可以跑在其他js解析器的更簡單的構建。
###Rendering a Vue Instance
###渲染Vue實例
``` javascript
// Step 1: Create a Vue instance
// 第一步： 創建Vue實例
const Vue = require('vue')
const app = new Vue({
template: `<div>Hello World</div>`
})
// Step 2: Create a renderer
// 第二步：創建渲染器
const renderer = require('vue-server-renderer').createRenderer()
// Step 3: Render the Vue instance to HTML
// 第三步：把Vue實例渲染到HTML
renderer.renderToString(app, (err, html) => {
if (err) throw err
console.log(html)
// => <div data-server-rendered="true">hello world</div>
})
```
###Integrating with a Server
###服務端集成
It is pretty straightforward when used inside a Node.js server, for example?[Express](https://expressjs.com/):
在Node里面使用相當的簡單，例如[Express](https://expressjs.com/):
`npm install express --save`
``` javascript
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
server.get('*', (req, res) => {
const app = new Vue({
data: { url: req.url },
template: `<div>The visited URL is: {{ url }}</div>`
})
renderer.renderToString(app, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.end(` <!DOCTYPE html> <html lang="en"> <head><title>Hello</title></head> <body>${html}</body> </html> `)
})
})
server.listen(8080)
```
###Using a Page Template
###使用頁面模板
When you render a Vue app, the renderer only generates the markup of the app.
當你渲染Vue應用的時候，渲染器只生成應用的標記。
In the example we had to wrap the output with an extra HTML page shell.
在案例里，我們用一個額外的HTML頁面可以包裹輸出。
To simplify this, you can directly provide a page template when creating the renderer.
為簡化這步操作，你可以在創建渲染器的時候直接提供頁面模板。
Most of the time we will put the page template in its own file, e.g.?index.template.html
:
大多數時候我們把頁面模板放在它自己的文件里，例如 index.template.html
``` html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
```
Notice the?<!--vue-ssr-outlet-->?comment -- this is where your app's markup will be injected.
####注意<!--vue-ssr-outlet-->語句，這里將是應用標記要注入的地方。
We can then read and pass the file to the Vue renderer:
我們將讀取并傳送文件給Vue的渲染器：
``` javascript
const renderer = createRenderer({
template: require('fs').readFileSync('./index.template.html', 'utf-8')
})
renderer.renderToString(app, (err, html) => {
console.log(html)
// will be the full page with app content injected.
})
```
###Template Interpolation
###模板插入
The template also supports simple interpolation.
模板支持簡單插入
Given the following template:
上例子：
```javascript
<html>
<head>
<title>{{ title }}</title>
{{{ meta }}}
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
```
We can provide interpolation data by passing a "render context object" as the second argument to?renderToString
:
我們提供通過傳遞‘渲染上下文對象’作為第二參數的插入數據：
``` javascript
const context = { title: 'hello', meta: ` <meta ...> <meta ...> `}
renderer.renderToString(app, context, (err, html) => {
// page title will be "hello"
// with meta tags injected
})
```
The?context object can also be shared with the Vue app instance, allowing components to dynamically register data for template interpolation.
上下文對象可以和Vue應用實例共享，允許組件動態的給模板插入注冊數據。
In addition, the template supports some advanced features such as:
此外，模板支持一些高級特性，例如：
Auto injection of critical CSS when using?*.vue?components;
在使用vue單頁組件的時候自動注入css
Auto injection of asset links and resource hints when using?clientManifest;
當使用clientManifest的時候，自動注入資源鏈接和資源提示；
Auto injection and XSS prevention when embedding Vuex state for client-side hydration.
當在客戶端混合Vuex買點的時候，自動注入和阻止XSS。
We will discuss these when we introduce the associated concepts later in the guide.
在指南里，我們將在介紹聚合概念的時候繼續討論。
