8

服務(wù)器端的渲染為了樂趣和響應(yīng)速度

下一步學(xué)習(xí)React的服務(wù)器端渲染,通用應(yīng)用程序?qū)EO更友好,一套代碼前后端通用,

他們能提高web應(yīng)用的響應(yīng)速度,web應(yīng)用導(dǎo)致不斷的變換,服務(wù)器端的渲染伴隨著一定代價,我們應(yīng)該謹(jǐn)慎使用,

在這章里,你會了解到如何設(shè)置服務(wù)器端的渲染,在最后做一個示例,創(chuàng)建通用應(yīng)用程序以及它的利弊

-理解什么是通用應(yīng)用程序

-為什么需要服務(wù)器端的渲染

-使用React創(chuàng)建簡單的靜態(tài)服務(wù)器端渲染的應(yīng)用,并且添加數(shù)據(jù)獲取到服務(wù)器端渲染,理解概念例如dehydration/hydration(吸水和脫水)

-使用Next.js創(chuàng)建服務(wù)端運(yùn)行的React應(yīng)用

自己加的(為什么需要服務(wù)端渲染?什么情況下進(jìn)行服務(wù)端渲染?筆者認(rèn)為,當(dāng)我們要求渲染時間盡量快、頁面響應(yīng)速度快時(優(yōu)點(diǎn)),才會采用服務(wù)器渲染,并且應(yīng)該“按需”對頁面進(jìn)行渲染 ——“首次加載/首屏”。即服務(wù)端渲染的優(yōu)勢在于:由中間層( node端 )為客戶端請求初始數(shù)據(jù)、并由node渲染頁面。那客戶端渲染和服務(wù)端渲染有什么差別?服務(wù)端渲染究竟快在哪里呢?)


通用應(yīng)用程序

當(dāng)我們討論用JS寫的web應(yīng)用程序的時候,我們先想到的客戶端是瀏覽器,這種方式是以服務(wù)端返回一個空的含有javascript標(biāo)簽的HTML頁面加載應(yīng)用,當(dāng)應(yīng)用加載好了,它能過處理DOM節(jié)點(diǎn)顯示UI以及用戶交互,直到去年之前還是這種情況,這種情況普遍存在于WEB應(yīng)用中,

這節(jié)里,我們將介紹,使用React創(chuàng)建服務(wù)端的應(yīng)用(SSR),同構(gòu)于通用的區(qū)別,

為什么需要服務(wù)器端的渲染

SSR是一個非常棒的特性,但是我我們不要一頭扎進(jìn)去為了學(xué)習(xí)而學(xué)習(xí),要視情況而定

SEO (搜素引擎優(yōu)化), 便于搜索,只是提供空的HTML骨架給搜索引擎來爬取并沒有多大的意義,現(xiàn)在,Google能夠運(yùn)行JavaScript但是有限制,SEO也是它的一個痛點(diǎn),

這些年,我們使用2套應(yīng)用,一個服務(wù)端端的渲染為了爬蟲,一個給客戶端的使用,這樣做是因?yàn)榉?wù)端端的渲染能滿足用戶的期望,客戶端不能被搜索引擎搜索,但是維護(hù)起來不靈活不容易修改,幸運(yùn)的是React能夠到服務(wù)端渲染組件并且以一種有好的方式提供內(nèi)容給爬蟲檢索,

SSR不但會SEO友好而且還對分享功能支持友好,

一個通用的代碼庫

更好的性能

客戶端在3G的網(wǎng)絡(luò),用戶不得不等待JS加載完,

不要低估復(fù)雜性

我們不得不設(shè)置和維護(hù)服務(wù),包括路由和邏輯,管理服務(wù)端的數(shù)據(jù)流,

也可能緩存頁面的內(nèi)容,這些都是通用的應(yīng)用快速響應(yīng)頁面和一些其它的目的要求

我的建議是先西寫客戶端的版本,僅當(dāng)應(yīng)用完全運(yùn)行起來后,再考慮改善用戶體檢通過SSR

NEXT.js

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容