服務端渲染 · redux中文文檔

# 服務端渲染服務端渲染一個很常見的場景是當用戶（或搜索引擎爬蟲）第一次請求頁面時，用它來做*初始渲染*。當服務器接收到請求后，它把需要的組件渲染成 HTML 字符串，然后把它返回給客戶端（這里統指瀏覽器）。之后，客戶端會接手渲染控制權。下面我們使用 React 來做示例，對于支持服務端渲染的其它 view 框架，做法也是類似的。 ### 服務端使用 Redux 當在服務器使用 Redux 渲染時，一定要在響應中包含應用的 state，這樣客戶端可以把它作為初始 state。這點至關重要，因為如果在生成 HTML 前預加載了數據，我們希望客戶端也能訪問這些數據。否則，客戶端生成的 HTML 與服務器端返回的 HTML 就會不匹配，客戶端還需要重新加載數據。把數據發送到客戶端，需要以下步驟： - 為每次請求創建全新的 Redux store 實例； - 按需 dispatch 一些 action； - 從 store 中取出 state； - 把 state 一同返回給客戶端。在客戶端，使用服務器返回的 state 創建并初始化一個全新的 Redux store。 Redux 在服務端**惟一**要做的事情就是，提供應用所需的**初始 state**。 ## 安裝下面來介紹如何配置服務端渲染。使用極簡的 [Counter 計數器應用](https://github.com/reduxjs/redux/tree/master/examples/counter) 來做示例，介紹如何根據請求在服務端提前渲染 state。 ### 安裝依賴庫本例會使用 [Express](http://expressjs.com/) 來做小型的 web 服務器。還需要安裝 Redux 對 React 的綁定庫，Redux 默認并不包含。 ``` npm install --save express react-redux ``` ## 服務端開發下面是服務端代碼大概的樣子。使用 [app.use](http://expressjs.com/api.html#app.use) 掛載 [Express middleware](http://expressjs.com/guide/using-middleware.html) 處理所有請求。如果你還不熟悉 Express 或者 middleware，只需要了解每次服務器收到請求時都會調用 handleRender 函數。另外，如果有使用 ES6 和 JSX 語法，需要使用 [Babel](https://babeljs.io/) (對應示例[this example of a Node Server with Babel](https://github.com/babel/example-node-server)) 和 [React preset](https://babeljs.io/docs/plugins/preset-react/)。 ##### `server.js` ```js import path from 'path' import Express from 'express' import React from 'react' import { createStore } from 'redux' import { Provider } from 'react-redux' import counterApp from './reducers' import App from './containers/App' const app = Express() const port = 3000 // 提供靜態文件 app.use('/static', Express.static('static')) // 每當收到請求時都會觸發 app.use(handleRender) // 接下來會補充這部分代碼 function handleRender(req, res) { /* ... */ } function renderFullPage(html, preloadedState) { /* ... */ } app.listen(port) ``` ### 處理請求第一件要做的事情就是對每個請求創建一個新的 Redux store 實例。這個 store 惟一作用是提供應用初始的 state。渲染時，使用 `<Provider>` 來包住根組件 `<App />`，以此來讓組件樹中所有組件都能訪問到 store，就像之前的[搭配 React](../basics/UsageWithReact.md) 教程講的那樣。服務端渲染最關鍵的一步是在**發送響應前**渲染初始的 HTML。這就要使用 [ReactDOMServer.renderToString()](https://facebook.github.io/react/docs/react-dom-server.html#rendertostring)。然后使用 [`store.getState()`](../api/Store.md#getState) 從 store 得到初始 state。`renderFullPage` 函數會介紹接下來如何傳遞。 ```js import { renderToString } from 'react-dom/server' function handleRender(req, res) { // 創建新的 Redux store 實例 const store = createStore(counterApp) // 把組件渲染成字符串 const html = renderToString( <Provider store={store}> <App /> </Provider> ) // 從 store 中獲得初始 state const preloadedState = store.getState() // 把渲染后的頁面內容發送給客戶端 res.send(renderFullPage(html, preloadedState)) } ``` ### 注入初始組件的 HTML 和 State 服務端最后一步就是把初始組件的 HTML 和初始 state 注入到客戶端能夠渲染的模板中。如何傳遞 state 呢，我們添加一個 `<script>` 標簽來把 `preloadedState` 賦給 `window.__PRELOADED_STATE__`。客戶端可以通過 `window.__PRELOADED_STATE__` 獲取 `preloadedState`。同時使用 script 標簽來引入打包后的 js bundle 文件。這是打包工具輸出的客戶端入口文件，以靜態文件或者 URL 的方式實現服務端開發中的熱加載。下面是代碼。 ```js function renderFullPage(html, preloadedState) { return ` <!doctype html> <html> <head> <title>Redux Universal Example</title> </head> <body> <div id="root">${html}</div> <script> // 警告：關于在 HTML 中嵌入 JSON 的安全問題，請查看以下文檔 // http://redux.js.org/recipes/ServerRendering.html#security-considerations window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace( /</g, '\\u003c' )} </script> <script src="/static/bundle.js"></script> </body> </html> ` } ``` ## 客戶端開發客戶端代碼非常直觀。只需要從 `window.__PRELOADED_STATE__` 得到初始 state，并傳給 [`createStore()`](../api/createStore.md) 函數即可。代碼如下: #### `client.js` ```js import React from 'react' import { hydrate } from 'react-dom' import { createStore } from 'redux' import { Provider } from 'react-redux' import App from './containers/App' import counterApp from './reducers' // 通過服務端注入的全局變量得到初始 state const preloadedState = window.__PRELOADED_STATE__ // 使用初始 state 創建 Redux store const store = createStore(counterApp, preloadedState) hydrate( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ) ``` 你可以選擇自己喜歡的打包工具（Webpack, Browserify 或其它）來編譯并打包文件到 `static/bundle.js`。當頁面加載時，打包后的 js 會啟動，并調用 [`React.hydrate()`](https://reactjs.org/docs/react-dom.html#hydrate)，然后會與服務端渲染的 HTML 的 `data-react-id` 屬性做關聯。這會把新生成的 React 實例與服務端的虛擬 DOM 連接起來。因為同樣使用了來自 Redux store 的初始 state，并且 view 組件代碼是一樣的，結果就是我們得到了相同的 DOM。就是這樣！這就是實現服務端渲染的所有步驟。但這樣做還是比較原始的。只會用動態代碼渲染一個靜態的 View。下一步要做的是動態創建初始 state 支持動態渲染 view。 ## 準備初始 State 因為客戶端只是執行收到的代碼，剛開始的初始 state 可能是空的，然后根據需要獲取 state。在服務端，渲染是同步執行的而且我們只有一次渲染 view 的機會。在收到請求時，可能需要根據請求參數或者外部 state（如訪問 API 或者數據庫），計算后得到初始 state。 ### 處理 Request 參數服務端收到的唯一輸入是來自瀏覽器的請求。在服務器啟動時可能需要做一些配置（如運行在開發環境還是生產環境），但這些配置是靜態的。請求會包含 URL 請求相關信息，包括請求參數，它們對于做 [React Router](https://github.com/ReactTraining/react-router) 路由時可能會有用。也可能在請求頭里包含 cookies，鑒權信息或者 POST 內容數據。下面演示如何基于請求參數來得到初始 state。 #### `server.js` ```js import qs from 'qs' // 添加到文件開頭 import { renderToString } from 'react-dom/server' function handleRender(req, res) { // 如果存在的話，從 request 讀取 counter const params = qs.parse(req.query) const counter = parseInt(params.counter, 10) || 0 // 得到初始 state let preloadedState = { counter } // 創建新的 Redux store 實例 const store = createStore(counterApp, preloadedState) // 把組件渲染成字符串 const html = renderToString( <Provider store={store}> <App /> </Provider> ) // 從 Redux store 得到初始 state const finalState = store.getState() // 把渲染后的頁面發給客戶端 res.send(renderFullPage(html, finalState)) } ``` 上面的代碼首先訪問 Express 的 `Request` 對象。把參數轉成數字，然后設置到初始 state 中。如果你在瀏覽器中訪問 [http://localhost:3000/?counter=100](http://localhost:3000/?counter=100)，你會看到計數器從 100 開始。在渲染后的 HTML 中，你會看到計數顯示 100 同時設置進了 `__PRELOADED_STATE__` 變量。 ### 獲取異步 State 服務端渲染常用的場景是處理異步 state。因為服務端渲染天生是同步的，因此異步的數據獲取操作對應到同步操作非常重要。最簡單的做法是往同步代碼里傳遞一些回調函數。在這個回調函數里引用響應對象，把渲染后的 HTML 發給客戶端。不要擔心，并沒有想像中那么難。本例中，我們假設有一個外部數據源提供計算器的初始值（所謂的把計算作為一種服務）。我們會模擬一個請求并使用結果創建初始 state。API 請求代碼如下： #### `api/counter.js` ```js function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min)) + min } export function fetchCounter(callback) { setTimeout(() => { callback(getRandomInt(1, 100)) }, 500) } ``` 再次說明一下，這只是一個模擬的 API，我們使用 `setTimeout` 模擬一個需要 500 毫秒的請求（實際項目中 API 請求一般會更快）。傳入一個回調函數，它異步返回一個隨機數字。如果你使用了基于 Promise 的 API 工具，那么要把回調函數放到 `then` 中。在服務端，把代碼使用 `fetchCounter` 包起來，在回調函數里拿到結果： #### `server.js` ```js // 添加到 import import { fetchCounter } from './api/counter' import { renderToString } from 'react-dom/server' function handleRender(req, res) { // 異步請求模擬的 API fetchCounter(apiResult => { // 如果存在的話，從 request 讀取 counter const params = qs.parse(req.query) const counter = parseInt(params.counter) || apiResult || 0 // 得到初始 state let preloadedState = { counter } // 創建新的 Redux store 實例 const store = createStore(counterApp, preloadedState) // 把組件渲染成字符串 const html = renderToString( <Provider store={store}> <App /> </Provider> ) // 從 Redux store 得到初始 state const finalState = store.getState() // 把渲染后的頁面發給客戶端 res.send(renderFullPage(html, finalState)) }) } ``` 因為在回調中使用了 `res.send()`，服務器會保護連接打開并在回調函數執行前不發送任何數據。你會發現每個請求都有 500ms 的延時。更高級的用法會包括對 API 請求出錯進行處理，比如錯誤的請求或者超時。 ### 安全注意事項因為我們代碼中很多是基于用戶生成內容（UGC）和輸入的，不知不覺中，提高了應用可能受攻擊區域。任何應用都應該對用戶輸入做安全處理以避免跨站腳本攻擊（XSS）或者代碼注入。我們的示例中，只對安全做基本處理。當從請求中拿參數時，對 `counter` 參數使用 `parseInt` 把它轉成數字。如果不這樣做，當 request 中有 script 標簽時，很容易在渲染的 HTML 中生成危險代碼。就像這樣的：`?counter=</script><script>doSomethingBad();</script>` 在我們極簡的示例中，把輸入轉成數字已經比較安全。如果處理更復雜的輸入，比如自定義格式的文本，你應該用安全函數處理輸入，比如 [xss-filters](https://github.com/yahoo/xss-filters)。此外，你可以添加額外的安全層來對產生的 state 進行消毒。`JSON.stringify` 可能會造成 script 注入。鑒于此，你需要清洗 JSON 字符串中的 HTML 標簽和其它危險的字符。可以通過字符串替換，例如`JSON.stringify(state).replace(/</g, '\\u003c')`，或者使用復雜的庫如 [serialize-javascript](https://github.com/yahoo/serialize-javascript) 處理。 ## 下一步你還可以參考 [異步 Actions](../advanced/AsyncActions.md) 學習更多使用 Promise 和 thunk 這些異步元素來表示異步數據流的方法。記住，那里學到的任何內容都可以用于同構渲染。如果你使用了 [React Router](https://github.com/ReactTraining/react-router)，你可能還需要在路由處理組件中使用靜態的 `fetchData()` 方法來獲取依賴的數據。它可能返回 [異步 action](../advanced/AsyncActions.md)，以便你的 `handleRender` 函數可以匹配到對應的組件類，對它們均 dispatch `fetchData()` 的結果，在 Promise 解決后才渲染。這樣不同路由需要調用的 API 請求都并置于路由處理組件了。在客戶端，你也可以使用同樣技術來避免在切換頁面時，當數據還沒有加載完成前執行路由。