React 服務端渲染的流程簡述
做 react SSR 有一段時間了, 在正好在這裡分享一下.
什麼是服務端渲染
使用者第一次請求/重新整理頁面時, 由服務端響應. 伺服器響應的是一個已經插入了元件文字的模板 ( template with pre-populated component ). 由於響應的頁面已經有元件的 HTML 文字, 可以省去瀏覽器端首次渲染的工作, 加快首屏顯示速度, SEO 友好.
服務端渲染時瀏覽器的工作流程
瀏覽器接收到伺服器預渲染的模板後, 渲染 DOM, 然後開始下載 js 檔案(bundle), 下載完成後 react 開始工作, 生成VDOM. 由於使用了 SSR hydrate() API, VDOM 上元件的 mount 行為 (也就是元件從 VDOM 到 真實 DOM 的第一次的 render) 將會被跳過. Mobx/Redux 和 React Router 開始工作.
餘後的頁面內的連結 ( <Link> ) 跳轉皆由 react router 接管.
服務端渲染時的工程架構
服務端渲染時, 伺服器和瀏覽器共用一套模板, 一套元件. 兩個入口檔案 (兩個 bundle). 伺服器需要一個 服務端 bundle, 對應的 webpack 編譯配置需要適配服務端環境 (nodejs commonjs 模組系統). 開發環境下的服務端渲染工作可以和 webpack devServer 協作, 實現開發時服務端渲染的熱載入.
流程
伺服器響應
在客戶端入口元件應用 ReactDOM.hydrate() 替換 ReactDOM.render() 在服務端使用 ReactDOMServer.renderToString() 將元件轉化為字串, 插入模板中, 響應給客戶端.
實現首次載入時資料同步
- Mobx 的服務端渲染配置: 參考官方文件.
- 前後端資料傳遞: 通過指令碼注入的方法向模板插入一個 js 物件, 以此傳遞資料給瀏覽器, 實現 VDOM 和 DOM 上元件/元素的資料同步.
window.__INITIAL_STATE__ = <%%-initialState %>
服務端 React Router 設定
服務端需要使用 React Router <StaticRouter> 元件.
- 通過 <StaticRouter> 上 location 自動實現對 <Route> 的匹配 (響應).
- 通過 <StaticRouter> 上的 context 屬性手動實現對 <Redirect> 的響應. 參考 React Router 官方文件.
前端路由的資料獲取
定義介面: 可以在 routes 檔案內定義用於獲取資料的 API, 也可以在元件內部提供靜態方法來獲取資料的 API. 呼叫介面: 在元件的生命週期函式中呼叫這些 API.
針對 SEO 搜尋引擎爬蟲的配置.
動態渲染 <head>
以上, 程式碼細節還是比較多的. 使用了 Material-UI 的話也需要做相關的配置.
示例程式碼參考:
作者：Apolo_Du 連結：https://www.jianshu.com/p/d11889804869 來源：簡書 簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。