也談服務(wù)端渲染(SSR)

這幾天服務(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ù)是工具舶斧,主要還是看人欣鳖。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市茴厉,隨后出現(xiàn)的幾起案子泽台,更是在濱河造成了極大的恐慌,老刑警劉巖矾缓,帶你破解...
    沈念sama閱讀 216,496評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件怀酷,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡嗜闻,警方通過查閱死者的電腦和手機(jī)蜕依,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來琉雳,“玉大人样眠,你說我怎么就攤上這事〈渲猓” “怎么了檐束?”我有些...
    開封第一講書人閱讀 162,632評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)锯茄。 經(jīng)常有香客問我厢塘,道長(zhǎng)茶没,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,180評(píng)論 1 292
  • 正文 為了忘掉前任晚碾,我火速辦了婚禮抓半,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘格嘁。我一直安慰自己笛求,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評(píng)論 6 388
  • 文/花漫 我一把揭開白布糕簿。 她就那樣靜靜地躺著探入,像睡著了一般。 火紅的嫁衣襯著肌膚如雪懂诗。 梳的紋絲不亂的頭發(fā)上蜂嗽,一...
    開封第一講書人閱讀 51,165評(píng)論 1 299
  • 那天,我揣著相機(jī)與錄音殃恒,去河邊找鬼植旧。 笑死,一個(gè)胖子當(dāng)著我的面吹牛离唐,可吹牛的內(nèi)容都是我干的病附。 我是一名探鬼主播,決...
    沈念sama閱讀 40,052評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼亥鬓,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼完沪!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起嵌戈,我...
    開封第一講書人閱讀 38,910評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤覆积,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后咕别,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體技健,經(jīng)...
    沈念sama閱讀 45,324評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡写穴,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評(píng)論 2 332
  • 正文 我和宋清朗相戀三年惰拱,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片啊送。...
    茶點(diǎn)故事閱讀 39,711評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡偿短,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出馋没,到底是詐尸還是另有隱情昔逗,我是刑警寧澤,帶...
    沈念sama閱讀 35,424評(píng)論 5 343
  • 正文 年R本政府宣布篷朵,位于F島的核電站勾怒,受9級(jí)特大地震影響婆排,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜笔链,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評(píng)論 3 326
  • 文/蒙蒙 一段只、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧鉴扫,春花似錦赞枕、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至莱预,卻和暖如春柠掂,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背依沮。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工陪踩, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人悉抵。 一個(gè)月前我還...
    沈念sama閱讀 47,722評(píng)論 2 368
  • 正文 我出身青樓肩狂,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親姥饰。 傳聞我的和親對(duì)象是個(gè)殘疾皇子傻谁,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容

  • 看到標(biāo)題审磁,你是不是覺得我神經(jīng)病,變態(tài)岂座,我卻在這種類似變態(tài)中找到了些許快樂态蒂。 為什么這么說呢? 一费什、有點(diǎn)債的日子動(dòng)力...
    楊逗逗_666666閱讀 479評(píng)論 0 2
  • 看周深和郭沁唱《大魚》的Live钾恢,聽得我一身雞皮疙瘩,果然鸳址,能超過周深的瘩蚪,只有周深本人。很喜歡耳帝的那個(gè)形容稿黍,就像...
    碧瑩小主閱讀 403評(píng)論 0 4
  • 出于心疹瘦,止于口;很想說巡球,卻沒說言沐。我要帶上這些話邓嘹,穿越山山水水,鋪在春天的原野上险胰。一朵花是一字吴超,一片花是一句...
    冰夫閱讀 171評(píng)論 0 0
  • 我不輕易坐地鐵,我這么說并不是說我在北京有車鸯乃,有房鲸阻、不需要去擠地鐵,而是已我的較輕的體重缨睡,瘦弱的身軀鸟悴,輕易擠不上地...
    躍童ING閱讀 190評(píng)論 0 1
  • 今天學(xué)習(xí)了我的第一個(gè)框架->Struts2,學(xué)習(xí)它如何配置奖年,如何使用细诸,及其用框架實(shí)現(xiàn)簡(jiǎn)單的跳轉(zhuǎn)和登錄。 Strut...
    Double_Z_閱讀 369評(píng)論 0 1