>[success] # 頁面渲染 ~~~ 1.頁面渲染整體可以分為兩種，'服務端渲染(SSR )'，'客戶端渲染(CSR )' 1.1.'SSR'為代表的是各類后臺語言web框架一般搭配的模板語法，例如'java的jsp'，'python的jinjia' 他們的特點都是在服務端完成頁面渲染，返回時候頁面并已經存在好了對應要展示的數據內容 1.2.'SSR'為代表的前端框架例如'React、Vue、Angular',他們的特點就是返回頁面骨架時候并沒有內容 所有的內容都是后續加載的js渲染到頁面骨架上的 ~~~ >[info] ## 服務端渲染SSR ~~~ 1.這種渲染都是在服務器端完成的，通過下圖也可以發現html整個數據渲染都是在服務器端，客戶端要做 只是接受返回渲染好的html頁面展示出來 2.這種渲染的弊端: 2.1.應用的前后端部分完全耦合在一起，前后臺協同開發比較困難，甚至說以jsp為例前端還要學習'jsp'語法 2.2.前端沒有足夠的發揮空間，無法充分利用現在前端生態下的一些更優秀的方案； 2.3.由于內容都是在服務端動態生成的，所以服務端的壓力較大； ~~~  >[info] ## 客戶端渲染 ~~~ 1.當ajax誕生后，客戶端渲染流行起來，實現了前后端的可以分開開發互不影響，將原本服務端需要渲染 數據的過程讓客戶端也可做，通過下圖發現第一次拿回的往往是一個html骨架，后續請求獲取的實際數據 才會渲染到頁面上 2.這種渲染的弊端： 2.1.首屏渲染慢：因為 HTML 中沒有內容，必須等到 JavaScript 加載并執行完成才能呈現頁面內容。 2.2.SEO 問題：同樣因為 HTML 中沒有內容，所以對于目前的搜索引擎爬蟲來說，頁面中沒有任何有 用的信息，自然無法提取關鍵詞，進行索引了。 ~~~  >[info] ## 同構渲染 ~~~ 1.'服務端' 和 '客戶端' 都各有利弊將相互結合一下這種【服務端渲染】 + 【客戶端渲染】形式叫做 同步渲染 2.其中vue生態的Nuxt.js就是同構渲染的解決方案,整體的過程如下 2.1.客戶端發起請求 2.2.服務端渲染首屏內容 + 生成客戶端 SPA 相關資源 3.3.服務端將生成的首屏資源發送給客戶端 2.4.客戶端直接展示服務端渲染好的首屏內容 2.5.首屏中的 SPA 相關資源執行之后會激活客戶端 Vue 2.6.之后客戶端所有的交互都由客戶端 SPA 處理 3.'優點'： 1.首屏渲染速度快、有利于 SEO '缺點'： 1.開發成本高' 2.涉及構建設置和部署的更多要求。與可以部署在任何靜態文件服務器上的完全靜態單頁面應 用程序 (SPA) 不同，服務器渲染應用程序，需要處于 Node.js server 運行環境。 3.更多的服務器端負載。在 Node.js 中渲染完整的應用程序，顯然會比僅僅提供靜態文件的 server 更加大量占用 CPU 資源 (CPU-intensive - CPU 密集)，因此如果你預料在高流量環境 (high traffic) 下使用，請準備相應的服務器負載，并明智地采用緩存策略 ~~~