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