簡介
關於 Vue 的 SPA 說的已經太多太多了，它爲我們帶來了極速的開發體驗，極強的開發效率。可能唯一有些許不足的就是，當我們對 SEO 很在乎的時候，我們如何去處理 SEO 的需求。
關於 SEO ，Vue 也有現成的解決方案： Vue 服務端渲染
那麼
什麼是服務端渲染
服務端將完整的頁面 html 輸出到客戶端顯示，與 SPA （Single-Page-Application）使用 js 渲染頁面不同。
爲什麼使用服務端渲染
- 更好的 SEO
- 更快的內容到達時間
服務端渲染 or 預渲染
就像官網所說的，如果你調研服務器端渲染(SSR)只是用來改善少數營銷頁面（例如 /, /about, /contact 等）的 SEO，那麼你可能需要 預渲染，一個典型的預渲染使用場景可能類似 這個網站。
區別
服務端渲染和預渲染的使用場景還是有較明顯的區別的。預渲染的使用場景更多是我們所說的靜態頁面的形式，比如說這個網站。服務端渲染適用於大型的、頁面數據處理較多且較爲複雜的、與服務端有數據交互的功能型網站，一個明顯的使用場景就是電商網站。
如果你想閱讀我寫的 Vue 服務端渲染，請移步：手把手教你 Vue 服務端渲染
如何使用預渲染
預渲染的核心是使用 prerender-spa-plugin，如何使用它呢？我們還是以這個網站的源代碼中的 webpack 配置爲例：
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'),
routes: [ '/', '/home', '/infomation', '/ticket', '/scenery', '/about' ],
renderer: new Renderer({
headless: false,
renderAfterDocumentEvent: 'render-event'
})
}),
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
我們需要簡單的配置一下，項目所有的路由，最終生成後有幾個頁面，都是以這個配置爲依據，而不是你在 vue-router 中配置的路由。
最基礎也最核心的配置項也就這幾行代碼，當然，如果你有更多的需求配置項，你可以去 github 上查看文檔，文檔中也有很詳細的介紹。
如何搭建一個預渲染開發環境
如果你也想要使用預渲染來開發你的網站的話，最簡單的方法就是克隆這個項目，然後簡單刪減以後進行二次開發，整個的開發流程和 Vue 是一模一樣的。
Tip
1、相較於 Vue 的模板中大而全的 webpack 配置項，預渲染中的 webpack 配置簡單小巧，如果你有一些 webpack 的配置需求的話，你可能需要自己動手。
2、我的這個項目使用的是 stylus 來作爲 css 預編譯語言，如果你想使用其他的 css 預編譯語言的話，需要額外安裝一些插件以及做一些簡單配置。當然了，默認的 css 肯定是支持的。
3、在寫這個項目的過程中，也有做一些簡單的知識點記錄。vue-prerender 筆記
4、最後項目打包發佈到生產環境，使用 npm run build 一鍵操作即可。如果你想要部署到子目錄下的話，那麼，你可能需要做一些簡單的修改，具體在 vue-prerender 筆記 有提到。