摘要:三服務端渲染方式方式一傳統方式服務端渲染,解決用戶體驗和更好的,有諸多工具使用這種方式如的的等。未列入白名單即請求不是請求或未通過任何過濾器,將只是充當反向代理,只是按原樣傳送請求和響應。
一、服務器端渲染是什么?
使用 React 構建客戶端應用程序,默認情況下,可以在瀏覽器中輸出 React 組件,進行生成 DOM 和操作 DOM。React 也可以在服務端通過 Node.js 轉換成 HTML,直接在瀏覽器端“呈現”處理好的 HTML 字符串,這個過程可以被認為 “同構”,因為應用程序的大部分代碼都可以在服務器和客戶端上運行。
二、為什么使用服務器端渲染?
服務器端渲染(SSR)的優勢主要在于:
更好的 SEO,由于搜索引擎爬蟲抓取工具可以直接查看完全渲染的頁面。
更好的用戶體驗,對于緩慢的網絡情況或運行緩慢的設備,加載完資源瀏覽器直接呈現,無需等待所有的 JavaScript 都完成下載并執行,才顯示服務器渲染的HTML。
三、服務端渲染方式
方式一:
傳統方式服務端渲染,解決用戶體驗和更好的 SEO,有諸多工具使用這種方式如React的(Next.js)、Vue的(Nuxt.js)等。有些工具將 webpack 運行在服務端生產環境,實時編譯,將編譯結果緩存起來,這都還是傳統的方式,只不過將 webpack 運行在服務端實時編譯,還是開發環境編譯預編譯好的問題。
而這里這里將 webpack 放在開發環境,只做開發打包的功能,打包 客戶端 bundle ,服務端 bundle,資源映射文件 assets.json,CSS 等資源進行部署。
服務器 bundle 用于服務器端渲染(SSR);
客戶端 bundle 給瀏覽器加載,瀏覽器通過 bundle 加載更多其它模塊(chunk)js;
資源映射文件 assets.json 則是,服務器 bundle 在準備所需 HTML,需要預插入那些模塊(chunk)js,和CSS,這只是提高用戶體驗。
??
方式二:
這是一種創新的方法,前端單頁面應用,以前怎么玩兒,現在還怎么玩兒,多的一步是,你得先訪問一個Rendora的服務,在前面攔截是否需要服務端渲染。下圖為官方圖:
??
這種方式原本只是個想法,想法是前端不用管服務端渲染的事兒了,不就是解決SEO?,這些爬蟲過來的時候,可以通過頭信息判斷,寫個服務,然后將需要的內容給爬蟲就可以了。
??
這種方式非常好,之前寫好的項目一句不用改,只需新起 Rendora 服務。對于來自前端服務器或外部的每個請求(百度谷歌爬蟲),Rendora會根據配置文件,根據頭,路徑來檢測或過濾,以確定 Rendora 是否應該只傳遞從后端服務器返回的初始HTML或使用Chrome提供的無頭服務器端呈現的HTML。更具體地說,對于每個請求,有2條路徑:
1.請求被列入白名單作為SSR的候選者(即過濾后的Get請求),Rendora 會指示無頭Chrome實例請求相應的頁面,呈現它,并返回包含最終服務器端的響應呈現出HTML。通常只需要將百度、谷歌、必應爬蟲等網絡抓取工具列入白名單即可。
2.未列入白名單(即請求不是GET請求或未通過任何過濾器),Rendora將只是充當反向HTTP代理,只是按原樣傳送請求和響應。
Rendora可以看作是位于后端服務器(例如Node.js / Express.js,Python / Django等等)之間的反向HTTP代理服務器,也可能是你的前端代理服務器(例如nginx,traefik,apache等)。
Rendora,新的方式非常厲害,有很多優勢:
方便遷移老的項目,前端和后端代碼不需要更改;
可能更快的性能,資源(CPU)消耗可能更少,Golang編寫的二進制文件;
多種緩存策略;
已經擁有 docker 容器方案。
最后我更推薦Rendora的方式,這將是未來。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/54756.html
摘要:服務端渲染兩種方式根據上文介紹對服務端渲染利弊有所了解,我們可以根據利弊權衡取舍,最近在做服務端渲染的項目,找到多種服務端渲染解決方案,大致分為兩類。第一種方式傳統方式服務端渲染,解決用戶體驗和更好的,有諸多工具使用這種方式如的的等。 最近在開發一個服務端渲染工具,通過一篇小文大致介紹下服務端渲染,和服務端渲染的方式方法。在此文后面有兩中服務端渲染方式的構思,根據你對服務端渲染的利弊權...
摘要:服務端渲染的手腳架這個啟動包的設計是為了讓你使用一整套最新最酷的前端技術,所有都是可配置,富特性,基于已經提供代碼熱加載,使用預處理,單元測試,代碼覆蓋率報告,代碼分割等等更多。 Universal React Starter Kit 服務端渲染的React手腳架 這個啟動包的設計是為了讓你使用一整套最新最酷的前端技術,所有都是可配置,富特性,基于webpack已經提供代碼熱加載,使用...
摘要:服務端渲染的手腳架這個啟動包的設計是為了讓你使用一整套最新最酷的前端技術,所有都是可配置,富特性,基于已經提供代碼熱加載,使用預處理,單元測試,代碼覆蓋率報告,代碼分割等等更多。 Universal React Starter Kit 服務端渲染的React手腳架 這個啟動包的設計是為了讓你使用一整套最新最酷的前端技術,所有都是可配置,富特性,基于webpack已經提供代碼熱加載,使用...
閱讀 2588·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
閱讀 2344·2019-08-23 18:29
閱讀 2056·2019-08-23 17:51
閱讀 1923·2019-08-23 17:16
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要