資訊專欄INFORMATION COLUMN
摘要：三服務(wù)端渲染方式方式一傳統(tǒng)方式服務(wù)端渲染，解決用戶體驗(yàn)和更好的，有諸多工具使用這種方式如的的等。未列入白名單即請(qǐng)求不是請(qǐng)求或未通過(guò)任何過(guò)濾器，將只是充當(dāng)反向代理，只是按原樣傳送請(qǐng)求和響應(yīng)。
一、服務(wù)器端渲染是什么?
使用 React 構(gòu)建客戶端應(yīng)用程序，默認(rèn)情況下，可以在瀏覽器中輸出 React 組件，進(jìn)行生成 DOM 和操作 DOM。React 也可以在服務(wù)端通過(guò) Node.js 轉(zhuǎn)換成 HTML，直接在瀏覽器端“呈現(xiàn)”處理好的 HTML 字符串，這個(gè)過(guò)程可以被認(rèn)為 “同構(gòu)”，因?yàn)閼?yīng)用程序的大部分代碼都可以在服務(wù)器和客戶端上運(yùn)行。
二、為什么使用服務(wù)器端渲染?
服務(wù)器端渲染(SSR)的優(yōu)勢(shì)主要在于：
更好的 SEO，由于搜索引擎爬蟲抓取工具可以直接查看完全渲染的頁(yè)面。
更好的用戶體驗(yàn)，對(duì)于緩慢的網(wǎng)絡(luò)情況或運(yùn)行緩慢的設(shè)備，加載完資源瀏覽器直接呈現(xiàn)，無(wú)需等待所有的 JavaScript 都完成下載并執(zhí)行，才顯示服務(wù)器渲染的HTML。
三、服務(wù)端渲染方式
方式一：
傳統(tǒng)方式服務(wù)端渲染，解決用戶體驗(yàn)和更好的 SEO，有諸多工具使用這種方式如React的(Next.js)、Vue的(Nuxt.js)等。有些工具將 webpack 運(yùn)行在服務(wù)端生產(chǎn)環(huán)境，實(shí)時(shí)編譯，將編譯結(jié)果緩存起來(lái)，這都還是傳統(tǒng)的方式，只不過(guò)將 webpack 運(yùn)行在服務(wù)端實(shí)時(shí)編譯，還是開發(fā)環(huán)境編譯預(yù)編譯好的問(wèn)題。
而這里這里將 webpack 放在開發(fā)環(huán)境，只做開發(fā)打包的功能，打包 客戶端 bundle ，服務(wù)端 bundle，資源映射文件 assets.json，CSS 等資源進(jìn)行部署。
服務(wù)器 bundle 用于服務(wù)器端渲染(SSR)；
客戶端 bundle 給瀏覽器加載，瀏覽器通過(guò) bundle 加載更多其它模塊(chunk)js；
資源映射文件 assets.json 則是，服務(wù)器 bundle 在準(zhǔn)備所需 HTML，需要預(yù)插入那些模塊(chunk)js，和CSS，這只是提高用戶體驗(yàn)。
??
方式二：
這是一種創(chuàng)新的方法，前端單頁(yè)面應(yīng)用，以前怎么玩兒，現(xiàn)在還怎么玩兒，多的一步是，你得先訪問(wèn)一個(gè)Rendora的服務(wù)，在前面攔截是否需要服務(wù)端渲染。下圖為官方圖：
??
這種方式原本只是個(gè)想法，想法是前端不用管服務(wù)端渲染的事兒了，不就是解決SEO？，這些爬蟲過(guò)來(lái)的時(shí)候，可以通過(guò)頭信息判斷，寫個(gè)服務(wù)，然后將需要的內(nèi)容給爬蟲就可以了。
??
這種方式非常好，之前寫好的項(xiàng)目一句不用改，只需新起 Rendora 服務(wù)。對(duì)于來(lái)自前端服務(wù)器或外部的每個(gè)請(qǐng)求(百度谷歌爬蟲)，Rendora會(huì)根據(jù)配置文件，根據(jù)頭，路徑來(lái)檢測(cè)或過(guò)濾，以確定 Rendora 是否應(yīng)該只傳遞從后端服務(wù)器返回的初始HTML或使用Chrome提供的無(wú)頭服務(wù)器端呈現(xiàn)的HTML。更具體地說(shuō)，對(duì)于每個(gè)請(qǐng)求，有2條路徑：
1.請(qǐng)求被列入白名單作為SSR的候選者(即過(guò)濾后的Get請(qǐng)求)，Rendora 會(huì)指示無(wú)頭Chrome實(shí)例請(qǐng)求相應(yīng)的頁(yè)面，呈現(xiàn)它，并返回包含最終服務(wù)器端的響應(yīng)呈現(xiàn)出HTML。通常只需要將百度、谷歌、必應(yīng)爬蟲等網(wǎng)絡(luò)抓取工具列入白名單即可。
2.未列入白名單(即請(qǐng)求不是GET請(qǐng)求或未通過(guò)任何過(guò)濾器)，Rendora將只是充當(dāng)反向HTTP代理，只是按原樣傳送請(qǐng)求和響應(yīng)。
Rendora可以看作是位于后端服務(wù)器（例如Node.js / Express.js，Python / Django等等）之間的反向HTTP代理服務(wù)器，也可能是你的前端代理服務(wù)器（例如nginx，traefik，apache等）。
Rendora，新的方式非常厲害，有很多優(yōu)勢(shì)：
方便遷移老的項(xiàng)目，前端和后端代碼不需要更改；
可能更快的性能，資源(CPU)消耗可能更少，Golang編寫的二進(jìn)制文件；
多種緩存策略；
已經(jīng)擁有 docker 容器方案。
最后我更推薦Rendora的方式，這將是未來(lái)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/54756.html
摘要：服務(wù)端渲染兩種方式根據(jù)上文介紹對(duì)服務(wù)端渲染利弊有所了解，我們可以根據(jù)利弊權(quán)衡取舍，最近在做服務(wù)端渲染的項(xiàng)目，找到多種服務(wù)端渲染解決方案，大致分為兩類。第一種方式傳統(tǒng)方式服務(wù)端渲染，解決用戶體驗(yàn)和更好的，有諸多工具使用這種方式如的的等。 最近在開發(fā)一個(gè)服務(wù)端渲染工具，通過(guò)一篇小文大致介紹下服務(wù)端渲染，和服務(wù)端渲染的方式方法。在此文后面有兩中服務(wù)端渲染方式的構(gòu)思，根據(jù)你對(duì)服務(wù)端渲染的利弊權(quán)...
摘要：服務(wù)端渲染的手腳架這個(gè)啟動(dòng)包的設(shè)計(jì)是為了讓你使用一整套最新最酷的前端技術(shù)，所有都是可配置，富特性，基于已經(jīng)提供代碼熱加載，使用預(yù)處理，單元測(cè)試，代碼覆蓋率報(bào)告，代碼分割等等更多。 Universal React Starter Kit 服務(wù)端渲染的React手腳架 這個(gè)啟動(dòng)包的設(shè)計(jì)是為了讓你使用一整套最新最酷的前端技術(shù)，所有都是可配置，富特性，基于webpack已經(jīng)提供代碼熱加載，使用...
摘要：服務(wù)端渲染的手腳架這個(gè)啟動(dòng)包的設(shè)計(jì)是為了讓你使用一整套最新最酷的前端技術(shù)，所有都是可配置，富特性，基于已經(jīng)提供代碼熱加載，使用預(yù)處理，單元測(cè)試，代碼覆蓋率報(bào)告，代碼分割等等更多。 Universal React Starter Kit 服務(wù)端渲染的React手腳架 這個(gè)啟動(dòng)包的設(shè)計(jì)是為了讓你使用一整套最新最酷的前端技術(shù)，所有都是可配置，富特性，基于webpack已經(jīng)提供代碼熱加載，使用...
閱讀 2586·2021-08-20 09:38
閱讀 1364·2019-08-30 15:43
閱讀 602·2019-08-29 17:13
閱讀 1614·2019-08-29 14:01
閱讀 1323·2019-08-29 13:29
閱讀 2342·2019-08-23 18:29
閱讀 2056·2019-08-23 17:51
閱讀 1922·2019-08-23 17:16
