這幾天服務(wù)端渲染在知乎上熱度又上來了墓臭,于是我又去翻看了一些相關(guān)資料。
服務(wù)端渲染是什么
我最開始接觸是在Vue
的官網(wǎng)上懂昂,開始是作為一個(gè)小節(jié)出現(xiàn)轩褐,現(xiàn)在已經(jīng)是個(gè)專門的大章節(jié)來專門講Vue服務(wù)端渲染的內(nèi)容。
服務(wù)端渲染 簡(jiǎn)單來說就是在服務(wù)器上把數(shù)據(jù)和模板拼接好以后發(fā)送給客戶端顯示侠讯。
回顧下前端的歷史挖藏,最開始的站點(diǎn)是簡(jiǎn)單的靜態(tài)網(wǎng)站。后端大哥把.html
文件推送給用戶厢漩,用戶瀏覽器解析這些字符串進(jìn)行顯示膜眠。那個(gè)時(shí)候就是 服務(wù)端渲染 。可是后來由于網(wǎng)站內(nèi)容越來越復(fù)雜宵膨、特效越來越炫酷架谎,這種‘兼職’狀態(tài)已經(jīng)不能滿足需求,細(xì)分之下的前端出現(xiàn)了辟躏。
隨后為了方便的開發(fā)谷扣,開始提倡 前后端分離,大家各做個(gè)的捎琐,彼此之間通過基于HTTP
的各種API
協(xié)作会涎,變成了數(shù)據(jù)動(dòng)態(tài)生成的新一代站點(diǎn)。
再后來出現(xiàn)了Vue
等三大MV*
框架瑞凑,網(wǎng)站做成了SPA
應(yīng)用末秃,解決了很多問題的同時(shí)也帶來了新問題,其中最突出的兩個(gè):難以SEO和首屏加載緩慢籽御。
服務(wù)端渲染解決了什么
難以SEO
SPA
網(wǎng)站們不僅數(shù)據(jù)是動(dòng)態(tài)生成的练慕,連大部分DOM
節(jié)點(diǎn)都是動(dòng)態(tài)生成的,后臺(tái)只提供一個(gè)基本模板技掏,而內(nèi)容需要等到各種JS
文件在客戶端下載運(yùn)行完成以后才能顯示铃将。
而搜索引擎目前并不會(huì)去下載這些JS
文件來爬數(shù)據(jù)(據(jù)說 Google 已經(jīng)有了這項(xiàng)技術(shù)并在使用,百度也能這樣做但沒做)零截,那么在搜索引擎改變策略前麸塞,總得想點(diǎn)辦法秃臣。
時(shí)尚就是輪回涧衙,現(xiàn)在前端竟然也有這個(gè)現(xiàn)象...那么大神們想到了辦法:那就讓我們回到老路上吧。
得益于Node.js
的出現(xiàn)奥此,不需要后臺(tái)做太多弧哎,把數(shù)據(jù)和模板在中間服務(wù)器上進(jìn)行組裝,再發(fā)送給客戶端稚虎。這樣的模式解決了問題又沒有讓大家倒退回去撤嫩,大廠們沖鋒在前,提出各種實(shí)踐方案蠢终,這里有美團(tuán)的大神發(fā)布的兩篇文章:
美團(tuán)點(diǎn)評(píng)點(diǎn)餐前后端分離實(shí)踐——一個(gè)可能沒用現(xiàn)成框架
美團(tuán)點(diǎn)評(píng)點(diǎn)餐 Nuxt.js 實(shí)戰(zhàn)——一個(gè)用了Nuxt.js
框架
珠玉在前序攘,我也說不了太深,有興趣請(qǐng)看文章寻拂。
首屏加載緩慢
隨著前端的發(fā)展程奠,業(yè)務(wù)邏輯越來越復(fù)雜,代碼也越來越厚祭钉,各種JS
文件越來越大瞄沙,當(dāng)一個(gè)網(wǎng)頁打開,所有東西都下載完頁面能打開,白屏?xí)r間越來越長(zhǎng)距境。
為了解決這個(gè)問題申尼,代碼模塊化 和 按需加載、占位圖 和 預(yù)展示 紛紛開始應(yīng)用垫桂,從不同的角度削減了問題程度师幕。但是服務(wù)端渲染同樣也是解決這個(gè)問題的角度之一,由于不少資源在中間服務(wù)器上進(jìn)行拼接伪货,節(jié)省了客戶端的不少時(shí)間们衙,效果也很不錯(cuò)。
服務(wù)端渲染有什么缺點(diǎn)
在解決問題的同時(shí)同樣也有一些成本是必須要考慮的碱呼。
首先是 技術(shù)成本蒙挑,中間增加了這些環(huán)節(jié)當(dāng)然要多更多的時(shí)間或更多的人來完成,并且還有不少坑要踩愚臀。
然后很多計(jì)算從客戶端移到服務(wù)器上忆蚀,對(duì)服務(wù)器的壓力增加,特別是高并發(fā)時(shí)會(huì)給服務(wù)器的 CPU 帶來更大的負(fù)載姑裂。
結(jié)語
我個(gè)人覺得用不用馋袜、怎么用依然得看需求和取舍,技術(shù)是工具舶斧,主要還是看人欣鳖。