服務(wù)器端渲染（SSR)
學(xué)前準(zhǔn)備
- ES6
- Node
- Vue
什么是服務(wù)器端渲染
- 前端渲染：html頁面作為靜態(tài)文件存在，前端請求時(shí)后端不對該文件做任何內(nèi)容上的修改，直接以資源的方式返回給前端，前端拿到頁面后，根據(jù)寫在html頁面上的js代碼，對該html的內(nèi)容進(jìn)行修改。
- 服務(wù)端渲染：前端發(fā)出請求后，后端在將HTML頁面返回給前端之前，先把HTML頁面中的特定區(qū)域，用數(shù)據(jù)填充好，再將完整的HTML返回給前端。在SPA場景下，服務(wù)端渲染都是針對第一次get請求，它會(huì)完整的html給瀏覽器，瀏覽器直接渲染出首屏，用不著瀏覽器端多一個(gè)AJAX請求去獲取數(shù)據(jù)再渲染。
為什么使用服務(wù)器端渲染
優(yōu)點(diǎn)：
- 更好的 SEO，因?yàn)閭鹘y(tǒng)的搜索引擎只會(huì)從 HTML 中抓取數(shù)據(jù)，這會(huì)導(dǎo)致前端渲染的頁面無法被抓取。
- 更快的內(nèi)容到達(dá)時(shí)間(time-to-content)，特別是對于緩慢的網(wǎng)絡(luò)情況或運(yùn)行緩慢的設(shè)備 。頁面首屏?xí)r間大概有80%消耗在網(wǎng)絡(luò)上，剩下的時(shí)間在后端讀取數(shù)據(jù)以及瀏覽器渲染，顯然要優(yōu)化后面的20%是比較困難的，優(yōu)化網(wǎng)絡(luò)時(shí)間是效果最明顯的手段。傳統(tǒng)的Ajax請求是先請求js再由js發(fā)起數(shù)據(jù)請求，兩項(xiàng)時(shí)間再加上瀏覽器渲染時(shí)間才是首屏?xí)r間。而SSR能將兩個(gè)請求合并為一個(gè)。
缺點(diǎn)：
- 更多的服務(wù)器端負(fù)載。
- 服務(wù)器端和瀏覽器環(huán)境差異帶來的問題，例如document等對象找不到的問題。
如何選擇
建議：如果注重SEO的新聞?wù)军c(diǎn)，非強(qiáng)交互的頁面，建議用SSR；像后臺管理頁面這類強(qiáng)交互的應(yīng)用，建議使用前端渲染。
