前言----SEO是由英文Search Engine Optimization縮寫而來， 中文意譯為“搜尋引擎優化”。SEO是指通過對網站進行站內優化和修復(網站Web結構調整、網站內容建設、網站程式碼優化和編碼等)和站外優化，從而提高網站的網站關鍵詞排名以及公司產品的曝光度。通過搜尋引擎查詢資訊是當今網民們尋找網上資訊和資源的主要手段。

歷史概況：

十年前，幾乎所有網站都使用 ASP、Java、PHP 這類做後端渲染，但後來隨著 jQuery、Angular、React、Vue 等 JS 框架的崛起，開始轉向了前端渲染。從 2014 年起又開始流行了同構渲染，號稱是未來，集成了前後端渲染的優點，但轉眼間三年過去了，很多當時壯心滿滿的框架（

rendr、Lazo）從先驅變成了先烈。同構到底是不是未來？自己的專案該如何選型？我想不應該只停留在追求熱門和拘泥於固定模式上，忽略了前後端渲染之“爭”的“核心點”，關注如何提升“使用者體驗”。

明確三個概念：「後端渲染」指傳統的 ASP、Java 或 PHP 的渲染機制；「前端渲染」指使用 JS 來渲染頁面大部分內容，代表是現在流行的 SPA 單頁面應用；「同構渲染」指前後端共用 JS，首次渲染時使用 Node.js 來直出 HTML。一般來說同構渲染是介於前後端中的共有部分。

1.網站的渲染模式----服務端渲染和客戶端渲染

    1.1服務端渲染（後端渲染SSR） 

        後端渲染HTML的情況下，瀏覽器會直接接收到經過伺服器計算之後的呈現給使用者的最終的HTML字串，這裡的計算就是伺服器經過解析存放在伺服器端的模板檔案來完成的，在這種情況下，瀏覽器只進行了HTML的解析，以及通過作業系統提供的操縱顯示器顯示內容的系統呼叫在顯示器上把HTML所代表的影象顯示給使用者。        好處：前端耗時少（前端只負責將html進行展示），利於SEO        壞處：網路傳輸資料量大，佔用（部分、少部分）伺服器運算資源，response 出的資料量會（稍）大點，模板改了前端的互動和樣式什麼的一樣得跟著聯動修改

     1.2客戶端渲染（前端渲染CSR）------SPA---單頁面應用

        前端渲染就是指瀏覽器會從後端得到一些資訊，這些資訊或許angularjs的模板檔案，亦或是JSON等各種資料交換格式所包裝的資料，甚至是直接的合法的HTML字串。這些形式都不重要，重要的是，將這些資訊組織排列形成最終可讀的HTML字串是由瀏覽器來完成的，在形成了HTML字串之後，再進行顯示。        好處：網路傳輸資料量小（減少了伺服器壓力）        壞處：前端耗時較多，不利於SEO

2.前端渲染遇到的問題---seo和首屏問題

    SEO 很好理解。由於傳統的搜尋引擎只會從 HTML 中抓取資料，導致前端渲染的頁面無法被抓取。前端渲染常使用的 SPA 會把所有 JS 整體打包，無法忽視的問題就是檔案太大，導致渲染前等待很長時間。特別是網速差的時候，讓使用者等待白屏結束並非一個很好的體驗。     

2.1解決前端渲染SEO問題

    近幾年，隨之前端SPA框架的興起；由前後端分離帶來的SEO問題，相信每個前端攻城獅都有遇到。這裡以Vue為例來說說解決SEO的方法；

    2.1.1 vue------SSR

         首先vue2.x直接提供了一份完整的構建Vue服務端渲染。Vue.js 是構建客戶端應用程式的框架。預設情況下，可以在瀏覽器中輸出 Vue 元件，進行生成 DOM 和操作 DOM。然而，也可以將同一個元件渲染為伺服器端的 HTML 字串，將它們直接傳送到瀏覽器，最後將靜態標記"混合"為客戶端上完全互動的應用程式。

伺服器渲染的 Vue.js 應用程式也可以被認為是"同構"或"通用"，因為應用程式的大部分程式碼都可以在伺服器和客戶端上執行。

具體的使用指南--------------------------------請移步官方文件

    2.1.2 vue------Nuxt.js

    從頭搭建一個服務端渲染的應用是相當複雜的。幸運的是 Nuxt.js 讓這一切變得非常簡單。Nuxt 是一個基於 Vue 生態的更高層的框架，為開發服務端渲染的 Vue 應用提供了極其便利的開發體驗。更酷的是，你甚至可以用它來做為靜態站生成器。推薦嘗試。

Nuxt.js是建立Universal Vue.js應用程式的框架。

它的主要範圍是UI渲染，同時抽象出客戶端/伺服器分佈。

我們的目標是建立一個足夠靈活的框架，以便您可以將其用作主專案庫或基於Node.js的當前專案。

Nuxt.js預先設定了使Vue.js應用伺服器的開發更加愉快的所有配置。

另外，我們還提供另一個名為nuxt generate的部署選項。它將構建一個靜態生成的 Vue.js應用程式。我們相信這個選擇可能是微軟服務開發Web應用程式的下一個重要步驟。

作為一個框架，Nuxt.js提供了很多功能，可以幫助您在客戶端和伺服器端之間進行開發，如非同步資料，中介軟體，佈局等。

以上是Nuxt.js的官方介紹，總的來說Nuxt.js是一個基於Vue的框架，大部分都是vue的東西，看一遍例子再研究研究，也是很容易上手的。總體來說是個不錯的框架，不需要去配置webpack那些繁瑣的東西，很大程度上的讓vue-ssr更加的親民了。

個人感覺nuxt的價效比有點低，其實我建議你自己用vue-ssr介面去實現 需要實現的功能可以從nuxt裡扒這樣構建工程的思路更清晰些。

2.2預渲染的方式---prerender（解決SEO,首屏問題）

    由於頁面較少，且預渲染相對於SSR比較簡單，預渲染可以極大的提高網頁訪問速度。而且配合一些meat外掛，完全可以滿足SEO需求。
    Prerender服務需要有NodeJs環境支援，如果之前伺服器環境沒有NodeJs需要先進行安裝。
    在webpack的配置如下：
    

var PrerenderSpaPlugin = require('prerender-spa-plugin')

var webpackConfig = merge(baseWebpackConfig, {
  plugins: [
    //這段程式碼意思是拷貝static檔案至根目錄使得渲染的檔案可以找到js、css
    new CopyWebpackPlugin([{
      from: 'static'
    }]),
    new PrerenderSpaPlugin(
    //將渲染的檔案放到dist目錄下
      path.join(__dirname, '../dist'),   
      //需要預渲染的路由資訊
      [ '/','/introduct','/culture','/Chairman','/president','/fund','/news','/honor' ],
      {
      //在一定時間後再捕獲頁面資訊，使得頁面資料資訊載入完成
        captureAfterTime: 50000,
        //忽略打包錯誤
        ignoreJSErrors: true,
        phantomOptions: '--web-security=false',
        maxAttempts: 10,
      }
    ),

另：Prerender需要路由使用history模式，使用hash模式會導致失效。

   通俗的說：預渲染的本質就是在打包的時候通過外掛將js提前執行一遍，然後再將有內容的html放到伺服器上，這樣爬蟲自然可以抓到，首屏的問題也可以得到解決。