React 服務端渲染完美的解決方案

React 服務端渲染完美的解決方案

1、服務器端渲染是什麼? 使用 React 構建客戶端應用程序，默認狀況下，能夠在瀏覽器中輸出 React 組件，進行生成 DOM 和操做 DOM。React 也能夠在服務端經過 Node.js 轉換成 HTML，直接在瀏覽器端「呈現」處理好的 HTML 字符串，這個過程能夠被認爲 「同構」，由於應用程序的大部分代碼均可以在服務器和客戶端上運行。 2、爲何使用服務器端渲染? 服務器端渲染(SSR)的優點主要在於： 更好的 SEO，因爲搜索引擎爬蟲抓取工具能夠直接查看徹底渲染的頁面。 更好的用戶體驗，對於緩慢的網絡狀況或運行緩慢的設備，加載完資源瀏覽器直接呈現，無需等待全部的 JavaScript 都完成下載並執行，才顯示服務器渲染的HTML。 3、服務端渲染方式 方式一： 傳統方式服務端渲染，解決用戶體驗和更好的 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，新的方式很是厲害，有不少優點： 1.方便遷移老的項目，前端和後端代碼不須要更改； 2.可能更快的性能，資源(CPU)消耗可能更少，Golang編寫的二進制文件； 3.多種緩存策略； 4.已經擁有 docker 容器方案。 最後我更推薦Rendora的方式，這將是將來。