服務端渲染（SSR）

簡述：
    又稱為後端渲染，服務器端在返回html之前，在html特定的區域特定的符號裏用數據填充，再給客戶端，客戶端只負責解析HTML。
    鼠標右擊點擊查看源碼時，頁面代碼可以在源代碼中看到。
    性能消耗在服務器端，用戶達到一定程度的時候，後端會考慮緩存
    部分數據，避免消耗過多的資源重復渲染。
優點：
    前端耗時少，首次渲染快，更快的內容到達時間

    利於SEO
缺點：
    網絡傳輸數據量大，占用部分服務器運算資源
    用戶體驗差
    不容易維護，前端修改部分html/css後端也要改

客戶端渲染

簡述：
    又稱為前端渲染，起源於js的興起，ajax讓前端渲染更加成熟
    前端專註於ui，後端專註於邏輯，真正意義上實現了前後端的分離
    通過約定好的API來交互，後端提供數據，前端根據數據生成DOM插入HTML頁面。

    初次渲染大都是將原html中的數據標記{{}}替換
    鼠標右擊查看源碼，頁面代碼不可以在源代碼中看到
    性能消耗在客戶端
優點：
    減少服務器壓力
    可以實現局部刷新，無需每次都請求完整的頁面，體驗更好
缺點：
    前端耗時較多，首屏渲染慢，渲染前要下載一堆js和css文件
    不利於SEO，爬蟲看不到完整的代碼

難點：
    數據變更後，頁面響應式變更如何節省資源？直接DOM的讀寫是很慢的

SPA

簡述：
    single page application單頁面應用，只有一張Web頁面的應用
    加載單個html頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序
    頁面初始化時加載必須的htm,js,css，所有操作都在此頁面完成，通過js控制
    MVVM：經典的MVVM開發模式，前後端各負其責
    ajax：重前端，業務邏輯在本地操作，數據通過ajax同步提交
優點：
    只需要處理#後面的字符，頁面並不會重載，實現局部刷新
缺點：
    不容易管理，也不夠安全
    不利於SEO，SEO需花費額外的功夫

預渲染

簡述：
    核心：prerender-spa-plugin
    無需服務器實時動態編譯，采用預渲染，在構建時針對特定路由簡單的生成靜態HTML文件
優點：
    幾乎可以獲得服務端渲染的所有優點，沒有缺點
    加載應用程序的路由，將結果保存在一個靜態的HTML文件中
    無需更改代碼或添加服務器端
缺點：
    若網站有成百上千條路線，預編譯會非常的慢
    雖每次更新只需要一次但會需要更長的時間
適用場景：
    只需改善少數頁面的SEO，可以采用預渲染

// webpack配置
new PrerenderSPAPlugin({
  staticDir: path.join(__dirname, ‘dist‘),
  routes: [ ‘/‘, ‘/home‘, ‘/infomation‘, ‘/ticket‘, ‘/scenery‘, ‘/about‘ ],
  renderer: new Renderer({
    headless: false,
    renderAfterDocumentEvent: ‘render-event‘
  })
}),

如何選擇？

1.註重SEO的新聞網站，非強交互的頁面，建議采用服務器端渲染
2.對於強交互的頁面，不註重SEO，采用客戶端渲染
3.只需改善少數頁面的SEO，采用預渲染

什麽是服務端渲染、客戶端渲染、SPA、預渲染，看完這一篇就夠了