###Vue.js Server-Side Rendering Guide
###Vue.js 服務端渲染指南
######**Note:**?this guide requires the following minimum versions of Vue and supporting libraries:
######**注：**該指南至少需要的最低版本的Vue核心庫和支持庫：
######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](https://ssr.vuejs.org/en/structure.html)?(with the new?[runInNewContext](https://ssr.vuejs.org/en/api.html#runinnewcontext)?option set to?false
).
若你已經用Vue 2.2做服務端渲染（SSR）, 你會發現建議代碼實踐的提示現在[有些不同](https://ssr.vuejs.org/en/structure.html)了(當[runInNewContext](https://ssr.vuejs.org/en/api.html#runinnewcontext)選項設置為false的時候)
Your existing app should continue to work, but it's recommended to migrate to the new recommendations.
你的應用會繼續工作，但是規范將會遷移到新的推薦規范。
###What is Server-Side Rendering (SSR)?
###什么是服務端渲染（SSR）？
Vue.js is a framework for building client-side applications.
Vue.js是構建客戶端應用的框架。
By default, Vue components produce and manipulate DOM in the browser as output.
默認，Vue組件在瀏覽器端輸出和操作DOM。
However, it is also possible to render the same components into HTML strings on the server,
然而，同樣可以在服務端渲染相同組件到HTML里面。
send them directly to the browser,
把他們直接發送到瀏覽器，
and finally "hydrate" the static markup into a fully interactive app on the client.
最后在客戶端把靜態標簽變為富交互的應用。
A server-rendered Vue.js app can also be considered "isomorphic" or "universal",
一個服務端渲染的Vue.js應用能被認為是同構的或者是通用的。
in the sense that the majority of your app's code runs on both the server?**and**?the client.
你應用的大部分代碼是運行在服務端和客戶端的.
###Why SSR?
###為什么要用SSR？
Compared to a traditional SPA (Single-Page Application),
和傳統的單頁應用相比，
the advantage of SSR primarily lies in:
SSR的主要優勢有：
Better SEO, as the search engine crawlers will directly see the fully rendered page.
更好的SEO，搜索引擎的爬蟲能直接看到完整的渲染頁面。
Note that as of now, Google and Bing can index synchronous JavaScript applications just fine.
到目前為止，google和bing可以很好的索引和同步JavaScript應用。
Synchronous being the key word there.
同步是關鍵。
If your app starts with a loading spinner, then fetches content via Ajax,
如果你的應用在啟動的時候有個載入列表，通過AJAX獲取內容，
the crawler will not wait for you to finish.
爬蟲可不會等著你完成。
This means if you have content fetched asynchronously on pages where SEO is important,
這意味著在重點SEO的頁面是異步加載的，
SSR might be necessary.
那么服務器渲染是必然的。
####Faster time-to-content,
####更快的內容加載，
####especially on slow internet or slow devices.
####特別是在低速網絡或者運行慢的設備上。
Server-rendered markup doesn't need to wait until all JavaScript has been downloaded and executed to be
displayed, so your user will see a fully-rendered page sooner.
服務器端顯示不需要等到所有js下載完成和執行才顯示，所以你的用戶將很快看到整個頁面。
This generally results in better user experience, and can be critical for applications where time-to-content is directly associated with conversion rate.
這個結果在用戶體驗方面是更好的，也能用于評定渲染時間直接關系到轉換率的應用。
###There are also some trade-offs to consider when using SSR:
###在用SSR的時候,有幾點需要權衡：
Development constraints. Browser-specific code can only be used inside certain lifecycle hooks;
開發限制。依賴瀏覽器特性的代碼只能在內部關鍵的生命周期鉤子上；
some external libraries may need special treatment to be able to run in a server-rendered app.
一些外部庫在服務端渲染應用上也需要特殊處理。
More involved build setup and deployment requirements.
更多的構建設置和發布需求的耦合。
Unlike a fully static SPA that can be deployed on any static file server,
不在像完整個的靜態單頁應用該可以被發布在任何靜態服務器上，
a server-rendered app requires an environment where a Node.js server can run.
服務端渲染應用更需要一個node服務環境。
###More server-side load.
###更多的服務端加載。
Rendering a full app in Node.js is obviously going to be more CPU-intensive than just serving static files,so if you expect high traffic, be prepared for corresponding server load and wisely employ caching strategies.
node渲染一個完整應用，光服務靜態文件就需要更多的密集型CPU。因此如果你期望有高通信，就需要準備相應的服務載入和合理的使用緩存策略。
Before using SSR for your app, the first question you should ask it whether you actually need it.
在應用SSR之前，先問問自己是否真的需要。
It mostly depends on how important time-to-content is for your app.
主要依賴于渲染時間對應用的重要程度。
For example, if you are building an internal dashboard where an extra few hundred milliseconds on initial load doesn't matter that much, SSR would be an overkill.
例如，你在做一個內部儀表盤，額外初始化的時候額外多幾百號面也沒什么影響，用SSR就過分了。
However, in cases where time-to-content is absolutely critical, SSR can help you achieve the best possible initial load performance.
然而，渲染時間是必要的評定標準，SSR將幫助你在初始化表現上達到最好的可能。
###SSR vs Prerendering
If you're only investigating SSR to improve the SEO of a handful of marketing pages (e.g.?/
,?/about
,?/contact
, etc), then you probably want?**prerendering**?instead.
如果你只是需要SSR在少數交易頁面的SEO提升，那么預加載是替代方案。
Rather than using a web server to compile HTML on-the-fly, prerendering simply generates static HTML files for specific routes at build time.
相比于網頁編譯即時HTML，在構建的時候預加載可以以簡單方式生成特殊路由的靜態HTML文件。
The advantage is setting up prerendering is much simpler and allows you to keep your frontend as a fully static site.
設置預加載的優勢是更簡單，允許你保持前端是一個完整的前端站點。
If you're using Webpack, you can easily add prerendering with the?[prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin).
如果你用Webpack，你用?[prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin)就可以輕易的增加預加載功能。
It's been extensively tested with Vue apps - and in fact,?[the creator](https://github.com/chrisvfritz)?is a member of the Vue core team.
事實上，這已經被廣泛的應用在Vue應用上，[創造者](https://github.com/chrisvfritz)來自于Vue核心代碼團隊。
###About This Guide
###關于這份指南
This guide is focused on server-rendered Single-Page Applications using Node.js as the server.
這份指南專注于用Node作為服務器的服務器端渲染的單頁應用。
Mixing Vue SSR with other backend setups is a topic of its own and is not covered in this guide.
在其他后端服務用Vue SSR是另外一個話題，本指南將不會包含這方面的內容。
This guide will be very in-depth and assumes you are already familiar with Vue.js itself, and have decent working knowledge of Node.js and webpack.
這份指南非常深入解析Vue SSR，是你以已經熟悉Vue.js,掌握node和webpack的相關知識為前提。
If you prefer a higher-level solution that provides a smooth out-of-the-box experience, you should probably give?[Nuxt.js](http://nuxtjs.org/)?a try.
如果你更傾向于用過更高級的，提供封裝完好的體驗的解決方案，你應該試試?[Nuxt.js](http://nuxtjs.org/)?。
It's built upon the same Vue stack but abstracts away a lot of the boilerplate, and provides some extra features such as static site generation.
它同樣建立在Vue的堆棧上面，但是抽了很多引用，并提供一些額外特性，例如靜態站點迭代器。
However, it may not suit your use case if you need more direct control of your app's structure.
然而，如果你對你的應用該結構需要更多直接操作，[Nuxt.js](http://nuxtjs.org/)?可能不適合。
Regardless, it would still be beneficial to read through this guide to better understand how things work together.
無論如何，通過閱讀本指南有助于理解所有事務是如何一起共工作的。
As you read along, it would be helpful to refer to the official?[HackerNews Demo](https://github.com/vuejs/vue-hackernews-2.0/), which makes use of most of the techniques covered in this guide.
就像你看到的，參考官方案例[HackerNews Demo](https://github.com/vuejs/vue-hackernews-2.0/)，因為里面對指南里涉及的大多數技術的用法都有包含。
Finally, note that the solutions in this guide are not definitive - we've found them to be working well for us, but that doesn't mean they cannot be improved.
最后，注意指南里的解決方案不是一定的，雖然對于我們來說他們工作的很好，并不意味著它們是不可改進的。
They might get revised in the future - and feel free to contribute by submitting pull requests!
他們在未來可能會被修改，歡迎提交pr來提交貢獻。
