react 伺服器端渲染

伺服器端渲染 vs 客戶端渲染

1.伺服器端渲染需要消耗更多的伺服器資源(cpu，記憶體等)

2.客戶端渲染可以將靜態資源部署到cdn上，實現高併發

3.服務端渲染對seo更友好

react 伺服器端渲染的實現

1.構建編譯與執行環境

安裝 babel-node

npm install babel-cli -g

安裝編譯 react 需要的元件

npm install babel-preset-react -s

npm install babel-preset-env -s

npm install babel-plugin-transform-decorators-legacy -s

在 package.json 中設定執行命令：

cross-env node_env=test nodemon --exec babel-node src/server.js

cross-env: 跨平台設定環境變數

nodemon: 監視檔案的改變並重新執行命令

react-dom/server包裡面有兩個方法 rendertostring 和 rendertostaticmarkup

rendertostring 和 rendertostaticmarkup 的主要作用都是將 react component 轉化為 html 的字串

rendertostring: 將react component 轉化為 html 字串，生成的 html 的 dom 會帶有額外屬性：各個 dom 會有 data-react-id 屬性，第乙個dom會有data-checksum屬性

rendertostaticmarkup: 同樣是將 react component 轉化為 html 字串，但是生成html的dom不會有額外屬性，從而節省html字串的大小

剛剛說的都是過去時，是 react15 版本的事情

從16開始 react 去掉了 data-react-id 和 data-checksum

在 react16 中，客戶端渲染使用差異演算法檢查服務端生成的節點的準確性。相比於react15更寬鬆；例如，不要求服務端生成的節點屬性與客戶端順序完全一致。當react16的客戶端渲染器檢測到節點不匹配，僅僅是嘗試修改不匹配的html子樹，而不是修改整個html樹。