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

服務端渲染（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，採用預渲染