基於React+Redux的SSR實現方法

爲什麼要實現服務端渲染(SSR)

總結下來有以下幾點：

1. SEO，讓搜索引擎更容易讀取頁面內容
2. 首屏渲染速度更快（重點），無需等待js文件下載執行的過程
3. 代碼同構，服務端和客戶端可以共享某些代碼

今天我們將構建一個使用 Redux 的簡單的 React 應用程序，實現服務端渲染(SSR)。該示例包括異步數據抓取，這使得任務變得更有趣。

如果您想使用本文中討論的代碼，請查看GitHub: answer518/react-redux-ssr

安裝環境

在開始編寫應用之前，需要我們先把環境編譯/打包環境配置好，因爲我們採用的是es6語法編寫代碼。我們需要將代碼編譯成es5代碼在瀏覽器或node環境中執行。

我們將用babelify轉換來使用browserify和watchify來打包我們的客戶端代碼。對於我們的服務器端代碼，我們將直接使用babel-cli。

代碼結構如下:

`build`
`src`
`├── client`
`│  └── client.js`
`└── server`
`└── server.js`

我們在package.json裏面加入以下兩個命令腳本:

`"scripts"``: {`
`"build"``:` `"`
`browserify ./src/client/client.js -o ./build/bundle.js -t babelify &&`
`babel ./src/ --out-dir ./build/"``,`
`"watch"``:` `"`
`concurrently`
`\"watchify ./src/client/client.js -o ./build/bundle.js -t babelify -v\"`
`\"babel ./src/ --out-dir ./build/ --watch\"`
`"`
`}`

concurrently庫幫助並行運行多個進程，這正是我們在監控更改時需要的。

最後一個有用的命令，用於運行我們的http服務器:

`"scripts"``: {
`"build"``:` `"..."``,`
`"watch"``:` `"..."``,`
`"start"``:` `"nodemon ./build/server/server.js"`
`}`

不使用 node ./build/server/server.js 而使用 Nodemon 的原因是，它可以監控我們代碼中的任何更改，並自動重新啓動服務器。這一點在開發過程會非常有用。

開發React+Redux應用

假設服務端返回以下的數據格式：

`[`
`{`
`"id"``: 4,`
`"first_name"``:` `"Gates"``,`
`"last_name"``:` `"Bill"``,`
`"avatar"``:` `"[https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg](https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg)"`
`},`
`{`
`...`
`}`
`]`

我們通過一個組件將數據渲染出來。在這個組件的 componentWillMount 生命週期方法中，我們將觸發數據獲取，一旦請求成功，我們將發送一個類型爲 user_fetch 的操作。該操作將由一個 reducer 處理，我們將在 Redux 存儲中獲得更新。狀態的改變將觸發我們的組件重新呈現指定的數據。

Redux具體實現

reducer 處理過程如下：

`// reducer.js`
`import { USERS_FETCHED } from` `'./constants'``;`
`function` `getInitialState() {`
`return` `{ users:` `null` `};`
`}`
`const reducer =` `function` `(oldState = getInitialState(), action) {`
`if` `(action.type === USERS_FETCHED) {`
`return` `{ users: action.response.data };`
`}
`return` `oldState;`
`};`

爲了能派發 action 請求去改變應用狀態，我們需要編寫 Action Creator ：

`// actions.js`
`import { USERS_FETCHED } from` `'./constants'``;`
`export const usersFetched = response => ({ type: USERS_FETCHED, response });`
`// selectors.js`
`export const getUsers = ({ users }) => users;`

Redux 實現的最關鍵一步就是創建 Store :

`// store.js`
`import { USERS_FETCHED } from` `'./constants'``;`
`import { createStore } from` `'redux'``;`
`import reducer from` `'./reducer'``;`
`export` `default` `() => createStore(reducer);`

爲什麼直接返回的是工廠函數而不是 createStore(reducer) ?這是因爲當我們在服務器端渲染時，我們需要一個全新的 Store 實例來處理每個請求。

實現React組件

在這裏需要提的一個重點是，一旦我們想實現服務端渲染，那我們就需要改變之前的純客戶端編程模式。

服務器端渲染，也叫代碼同構，也就是同一份代碼既能在客戶端渲染，又能在服務端渲染。

我們必須保證代碼能在服務端正常的運行。例如，訪問 Window 對象，Node不提供Window對象的訪問。

`// App.jsx`
`import React from` `'react'``;`
`import { connect } from` `'react-redux'``;`
`import { getUsers } from` `'./redux/selectors'``;`
`import { usersFetched } from` `'./redux/actions'``;`
`const ENDPOINT =` `'[http://localhost:3000/users_fake_data.json](http://localhost:3000/users_fake_data.json)'``;`
`class App extends React.Component {`
`componentWillMount() {`
`fetchUsers();`
`}`
`render() {`
`const { users } =` `this``.props;`
`return` `(`
`<div>`
`{`
`users && users.length > 0 && users.map(`
`// ... render the user here`
`)`
`}`
`</div>`
`);`
`}`
`}`
`const ConnectedApp = connect(`
`state => ({`
`users: getUsers(state)`
`}),`
`dispatch => ({`
`fetchUsers: async () => dispatch(`
`usersFetched(await (await fetch(ENDPOINT)).json())`
`)`
`})`
`)(App);`
`export` `default` `ConnectedApp;`

你看到，我們使用 componentWillMount 來發送 fetchUsers 請求， componentDidMount 爲什麼不能用呢？ 主要原因是 componentDidMount 在服務端渲染過程中並不會執行。

fetchUsers 是一個異步函數，它通過Fetch API請求數據。當數據返回時，會派發 users_fetch 動作，從而通過 reducer 重新計算狀態，而我們的 <App /> 由於連接到 Redux 從而被重新渲染。

`// client.js`
`import React from` `'react'``;`
`import ReactDOM from` `'react-dom'``;`
`import { Provider } from` `'react-redux'``;`
`import App from` `'./App.jsx'``;`
`import createStore from` `'./redux/store'``;`
`ReactDOM.render(`
`<Provider store={ createStore() }><App /></Provider>,`
`document.querySelector(``'#content'``)`
`);`

運行Node Server

爲了演示方便，我們首選Express作爲http服務器。

`// server.js`
`import express from` `'express'``;`
`const app = express();`
`// Serving the content of the "build" folder. Remember that`
`// after the transpiling and bundling we have:`
`//`
`// build`
`//  ├── client`
`//  ├── server`
`//  │  └── server.js`
`//  └── bundle.js`
`app.use(express.static(__dirname +` `'/../'``));`
`app.get(``'*'``, (req, res) => {`
`res.set(``'Content-Type'``,` `'text/html'``);`
`res.send(``
`<html>`
`<head>`
`<title>App</title>`
`</head>`
`<body>`
`<div id=``"content"``></div>`
`<script src=``"/bundle.js"``></script>`
`</body>`
`</html>`
``);`
`});`
`app.listen(`
`3000,`
`() => console.log(``'Example app listening on port 3000!'``)`
`);`

有了這個文件，我們可以運行 npm run start 並訪問 http://localhost:3000 。我們看到數據獲取成功，併成功的顯示了。

服務端渲染

目前爲止，我們的服務端僅僅是返回了一個 html 骨架，而所有交互全在客戶端完成。瀏覽器需要先下載 bundle.js 後執行。而服務端渲染的作用就是在服務器上執行所有操作併發送最終標記，而不是把所有工作交給瀏覽器執行。 React 足夠的聰明，能夠識別出這些標記。

還記得我們在客戶端做的以下事情嗎?

`import ReactDOM from` `'react-dom'``;`
`ReactDOM.render(`
`<Provider store={ createStore() }><App /></Provider>,`
`document.querySelector(``'#content'``)`
`);`

服務端幾乎相同：

`import ReactDOMServer from` `'react-dom/server'``;`
`const markupAsString = ReactDOMServer.renderToString(`
`<Provider store={ store }><App /></Provider>`
`);`

我們使用了相同的組件 <App /> 和 store ，不同之處在於它返回的是一個字符串，而不是虛擬DOM。

然後將這個字符串加入到 Express 的響應裏面，所以服務端代碼爲：

`const store = createStore();`
`const content = ReactDOMServer.renderToString(`
`<Provider store={ store }><App /></Provider>`
`);`
`app.get(``'*'``, (req, res) => {`
`res.set(``'Content-Type'``,` `'text/html'``);`
`res.send(``
`<html>`
`<head>`
`<title>App</title>`
`</head>`
`<body>`
`<div id=``"content"``>${ content }</div>`
`<script src=``"/bundle.js"``></script>`
`</body>`
`</html>`
``);`
`});`

如果重新啓動服務器並打開相同的 http://localhost:3000 ，我們將看到以下響應:

`<``html``>`
`<``head``>`
`<``title``>App</``title``>`
`</``head``>`
`<``body``>`
`<``div` `id``=``"content"``><``div` `data-reactroot``=``""``></``div``></``div``>`
`<``script` `src``=``"/bundle.js"``></``script``>`
`</``body``>`
`</``html``>`

我們的頁面中確實有一些內容，但它只是 <div data-reactroot=""></div> 。這並不意味着程序出錯了。這絕對是正確的。 React 確實呈現了我們的頁面，但它只呈現靜態內容。在我們的組件中，我們在獲取數據之前什麼都沒有，數據的獲取是一個異步過程，在服務器上呈現時，我們必須考慮到這一點。這就是我們的任務變得棘手的地方。這可以歸結爲我們的應用程序在做什麼。在本例中，客戶端代碼依賴於一個特定的請求，但如果使用 redux-saga 庫，則可能是多個請求，或者可能是一個完整的root saga。我意識到處理這個問題的兩種方法:

1、我們明確知道請求的頁面需要什麼樣的數據。我們獲取數據並使用該數據創建 Redux 存儲。然後我們通過提供已完成的 Store 來呈現頁面，理論上我們可以做到。

2、我們完全依賴於運行在客戶端上的代碼，計算出最終的結果。

第一種方法，需要我們在兩端做好狀態管理。第二種方法需要我們在服務端使用一些額外的庫或工具，來確保同一套代碼能在服務端和客戶端做相同的事情，我個人比較推薦使用這種方法。

例如，我們使用了 Fetch API 向後端發出異步請求，而服務端默認是不支持的。我們需要做的就是在 server.js 中將 Fetch 導入:

`import` `'isomorphic-fetch'``;`

我們使用客戶端API接收異步數據，一旦 Store 獲取到異步數據，我們將觸發 ReactDOMServer.renderToString 。它會提供給我們想要的標記。我們的Express處理器是這樣的:

`app.get(``'*'``, (req, res) => {`
`const store = createStore();`
`const unsubscribe = store.subscribe(() => {`
`const users = getUsers(store.getState());`
`if` `(users !==` `null` `&& users.length > 0) {`
`unsubscribe();`
`const content = ReactDOMServer.renderToString(`
`<Provider store={ store }><App /></Provider>`
`);`
`res.set(``'Content-Type'``,` `'text/html'``);`
`res.send(``
`<html>`
`<head>`
`<title>App</title>`
`</head>`
`<body>`
`<div id=``"content"``>${ content }</div>`
`<script src=``"/bundle.js"``></script>`
`</body>`
`</html>`
``);`
`}`
`});`
`ReactDOMServer.renderToString(<Provider store={ store }><App /></Provider>);`
`});`

我們使用 Store 的 subscribe 方法來監聽狀態。當狀態發生變化——是否有任何用戶數據被獲取。如果 users 存在，我們將 unsubscribe()，這樣我們就不會讓相同的代碼運行兩次，並且我們使用相同的存儲實例轉換爲string。最後，我們將標記輸出到瀏覽器。

store.subscribe方法返回一個函數，調用這個函數就可以解除監聽

有了上面的代碼，我們的組件已經可以成功地在服務器端渲染。通過開發者工具，我們可以看到發送到瀏覽器的內容:

`<``html``>`
`<``head``>`
`<``title``>App</``title``>`
`<``style``>`
`body {`
`font-size: 18px;`
`font-family: Verdana;`
`}`
`</``style``>`
`</``head``>`
`<``body``>`
`<``div` `id``=``"content"``><``div` `data-reactroot``=``""``><``p``>Eve Holt</``p``><``p``>Charles Morris</``p``><``p``>Tracey Ramos</``p``></``div``></``div``>`
`<``script``>`
`window.__APP_STATE = {"users":[{"id":4,"first_name":"Eve","last_name":"Holt","avatar":"[https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg](https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg)"},{"id":5,"first_name":"Charles","last_name":"Morris","avatar":"[https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg](https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg)"},{"id":6,"first_name":"Tracey","last_name":"Ramos","avatar":"[https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg](https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg)"}]};`
`</``script``>`
`<``script` `src``=``"/bundle.js"``></``script``>`
`</``body``>`
`</``html``>`

當然，現在並沒有結束，客戶端 JavaScript 不知道服務器上發生了什麼，也不知道我們已經對API進行了請求。我們必須通過傳遞 Store 的狀態來通知瀏覽器，以便它能夠接收它。

`const content = ReactDOMServer.renderToString(`
`<Provider store={ store }><App /></Provider>`
`);`
`res.set(``'Content-Type'``,` `'text/html'``);`
`res.send(``
`<html>`
`<head>`
`<title>App</title>`
`</head>`
`<body>`
`<div id=``"content"``>${ content }</div>`
`<script>`
`window.__APP_STATE = ${ JSON.stringify(store.getState()) };`
`</script>`
`<script src=``"/bundle.js"``></script>`
`</body>`
`</html>`
``);`

我們將 Store 狀態放到一個全局變量 __APP_STATE 中， reducer 也有一點變化：

`function` `getInitialState() {`
`if` `(``typeof` `window !==` `'undefined'` `&& window.__APP_STATE) {`
`return` `window.__APP_STATE;`
`}`
`return` `{ users:` `null` `};`
`}`

注意 typeof window !== 'undefined' ,我們必須這樣做，因爲這段代碼也會在服務端執行，這就是爲什麼說在做服務端渲染時要非常小心，尤其是全局使用的瀏覽器api的時候。

最後一個需要優化的地方，就是當已經取到 users 時，必須阻止 fetch 。

`componentWillMount() {`
`const { users, fetchUsers } =` `this``.props;`
`if` `(users ===` `null``) {`
`fetchUsers();`
`}`
`}`

總結

服務器端呈現是一個有趣的話題。它有很多優勢，並改善了整體用戶體驗。它還會提升你的單頁應用程序的SEO。但這一切並不簡單。在大多數情況下，需要額外的工具和精心選擇的api。

這只是一個簡單的案例，實際開發場景往往比這個複雜的多，需要考慮的情況也會非常多，你們的服務端渲染是怎麼做的？