什么是服務(wù)端渲染？
ajax沒出來前，都是服務(wù)端渲染，服務(wù)端直接返回html文本給瀏覽器。服務(wù)端將對(duì)vue頁(yè)面進(jìn)行渲染（獲取數(shù)據(jù)，填充組件都在服務(wù)端完成）生成HTML文件，將HTML頁(yè)面?zhèn)鹘o瀏覽器?！緦tml在服務(wù)端渲染，合成完整的html文件再輸出到瀏覽器】
目的
為了體驗(yàn)（首屏響應(yīng)），為了解決單頁(yè)面應(yīng)用SEO問題，對(duì)于論壇類，內(nèi)容網(wǎng)站類的網(wǎng)站至關(guān)重要，傳統(tǒng)的SPA應(yīng)用是沒有SEO的，搜索引擎無法抓取頁(yè)面相關(guān)內(nèi)容，也就是用戶搜不到此網(wǎng)站的相關(guān)內(nèi)容。
傳統(tǒng)SPA:
1、瀏覽器加載所有資源（html,css,js,img...）
2、 CDN
3、 返回資源
4、Vue請(qǐng)求server獲取業(yè)務(wù)數(shù)據(jù)
5、返回?cái)?shù)據(jù)渲染成html片段
6、css渲染片段成一個(gè)網(wǎng)頁(yè)
7、用戶
最耗時(shí)的4，5步驟，請(qǐng)求serverapi的過程中本身除了服務(wù)器的限制，還有網(wǎng)絡(luò)，寬帶等限制，并當(dāng)頁(yè)面邏輯過多，數(shù)據(jù)過于繁瑣時(shí)，vue在client端渲染也會(huì)成為性能瓶頸。（比如電商的首頁(yè)，商品詳情頁(yè)）
【在首次請(qǐng)求經(jīng)服務(wù)端路由輸出整個(gè)應(yīng)用程序后，接下來的路由都由前端掌控，前端通過路由作為中心樞紐控制一系列頁(yè)面（組件）的渲染加載和數(shù)據(jù)交互】
SSR
1、服務(wù)端返回頁(yè)面
2、css渲染片段成一個(gè)網(wǎng)頁(yè)
3、用戶
無需下載一堆js和css才能看到頁(yè)面（首屏性能）node緩存的html,節(jié)省了請(qǐng)求接口和框架渲染的時(shí)間
同構(gòu)： 前后端共用JS，首次渲染使用Node.js直接返回HTML
【服務(wù)端取出數(shù)據(jù)和模板組合生成html輸出給前端，前端發(fā)生請(qǐng)求時(shí)，重新給服務(wù)器請(qǐng)求html資源，路由也由服務(wù)器控制】
傳統(tǒng)的SPA的HTML只有一個(gè)無實(shí)際內(nèi)容的HTML和一個(gè)app.js, 而SSR生成的HTML是有內(nèi)容的，這能讓搜索引擎能夠索引到頁(yè)面內(nèi)容。
服務(wù)端渲染
與傳統(tǒng)的SPA相比，優(yōu)勢(shì)在于：
更好的seo , 由于搜索引擎爬蟲抓取工具查看完全渲染的頁(yè)面，即需要同步j(luò)s。如果應(yīng)用程序是初始展示loading狀態(tài)，通過ajax異步獲取內(nèi)容，抓取工具并不會(huì)等待異步完成后再進(jìn)行抓取頁(yè)面內(nèi)容。如果你的站點(diǎn)seo很重要，但頁(yè)面內(nèi)容又是異步獲取內(nèi)容，則需要服務(wù)端渲染SSR。
更快的內(nèi)容到達(dá)時(shí)間，特別是對(duì)于緩慢的網(wǎng)絡(luò)情況或運(yùn)行緩慢的設(shè)備。無需等待所有的JavaScript都完成下載并執(zhí)行，才顯示服務(wù)器渲染的標(biāo)記，所以用戶可以更快速的看到完整渲染的頁(yè)面?！緜鹘y(tǒng)的SPA應(yīng)用是將bundle.js從服務(wù)器獲取，然后在客戶端解析并掛載到dom,而ssr直接將HTML字符串傳給瀏覽器，首屏渲染大大的加快，客戶端只負(fù)責(zé)解析html?！?/p>
可以生成緩存片段，生成靜態(tài)化文件
注意(權(quán)衡之處)：
開發(fā)條件受限。由于沒有動(dòng)態(tài)更新，只有beforeCreate和created會(huì)在服務(wù)器端和客戶端渲染過程中被調(diào)用，其余生命周期鉤子函數(shù)中的代碼只會(huì)在客戶端執(zhí)行（需注意，避免beforeCreate和created生命周期時(shí)產(chǎn)生全局副作用的代碼，比如setInetrval,純客戶端的話，可以在destory中將其銷毀，但是SSR期間并不會(huì)調(diào)用，會(huì)永遠(yuǎn)保存下來）；一些外部拓展庫(kù)需要特殊處理。
-
node.js server運(yùn)行環(huán)境 | 直接獲取document,window對(duì)象找不到
if (process.browser) { ........這里可以獲取document，window ） -
更多的服務(wù)器端負(fù)載。需要做好緩存和 優(yōu)化，相當(dāng)于空間換時(shí)間。
image.png
