服務(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