基于React+Redux的SSR實現(xiàn)方法
為什么要實現(xiàn)服務端渲染(SSR)
總結下來有以下幾點：
- SEO，讓搜索引擎更容易讀取頁面內(nèi)容
- 首屏渲染速度更快（重點），無需等待js文件下載執(zhí)行的過程
- 代碼同構，服務端和客戶端可以共享某些代碼
今天我們將構建一個使用 Redux 的簡單的 React 應用程序，實現(xiàn)服務端渲染(SSR)。該示例包括異步數(shù)據(jù)抓取，這使得任務變得更有趣。
如果您想使用本文中討論的代碼，請查看GitHub: answer518/react-redux-ssr
安裝環(huán)境
在開始編寫應用之前，需要我們先把環(huán)境編譯/打包環(huán)境配置好，因為我們采用的是es6語法編寫代碼。我們需要將代碼編譯成es5代碼在瀏覽器或node環(huán)境中執(zhí)行。
我們將用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庫幫助并行運行多個進程，這正是我們在監(jiān)控更改時需要的。
最后一個有用的命令，用于運行我們的http服務器:
"scripts": {
"build": "...",
"watch": "...",
"start": "nodemon ./build/server/server.js"
}
不使用 node ./build/server/server.js 而使用 Nodemon 的原因是，它可以監(jiān)控我們代碼中的任何更改，并自動重新啟動服務器。這一點在開發(fā)過程會非常有用。
開發(fā)React+Redux應用
假設服務端返回以下的數(shù)據(jù)格式：
[
{
"id": 4,
"first_name": "Gates",
"last_name": "Bill",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"
},
{
...
}
]
我們通過一個組件將數(shù)據(jù)渲染出來。在這個組件的 componentWillMount 生命周期方法中，我們將觸發(fā)數(shù)據(jù)獲取，一旦請求成功，我們將發(fā)送一個類型為 user_fetch 的操作。該操作將由一個 reducer 處理，我們將在 Redux 存儲中獲得更新。狀態(tài)的改變將觸發(fā)我們的組件重新呈現(xiàn)指定的數(shù)據(jù)。
Redux具體實現(xiàn)
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;
};
為了能派發(fā) action 請求去改變應用狀態(tài)，我們需要編寫 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 實現(xiàn)的最關鍵一步就是創(chuàng)建 Store :
// store.js
import { USERS_FETCHED } from './constants';
import { createStore } from 'redux';
import reducer from './reducer';
export default () => createStore(reducer);
為什么直接返回的是工廠函數(shù)而不是 createStore(reducer) ?這是因為當我們在服務器端渲染時，我們需要一個全新的 Store 實例來處理每個請求。
實現(xiàn)React組件
在這里需要提的一個重點是，一旦我們想實現(xiàn)服務端渲染，那我們就需要改變之前的純客戶端編程模式。
服務器端渲染，也叫代碼同構，也就是同一份代碼既能在客戶端渲染，又能在服務端渲染。
我們必須保證代碼能在服務端正常的運行。例如，訪問 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';
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 來發(fā)送 fetchUsers 請求， componentDidMount 為什么不能用呢？ 主要原因是 componentDidMount 在服務端渲染過程中并不會執(zhí)行。
fetchUsers 是一個異步函數(shù)，它通過Fetch API請求數(shù)據(jù)。當數(shù)據(jù)返回時，會派發(fā) users_fetch 動作，從而通過 reducer 重新計算狀態(tài)，而我們的 <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 。我們看到數(shù)據(jù)獲取成功，并成功的顯示了。
服務端渲染
目前為止，我們的服務端僅僅是返回了一個 html 骨架，而所有交互全在客戶端完成。瀏覽器需要先下載 bundle.js 后執(zhí)行。而服務端渲染的作用就是在服務器上執(zhí)行所有操作并發(fā)送最終標記，而不是把所有工作交給瀏覽器執(zhí)行。 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>
我們的頁面中確實有一些內(nèi)容，但它只是 <div data-reactroot=""></div> 。這并不意味著程序出錯了。這絕對是正確的。 React 確實呈現(xiàn)了我們的頁面，但它只呈現(xiàn)靜態(tài)內(nèi)容。在我們的組件中，我們在獲取數(shù)據(jù)之前什么都沒有，數(shù)據(jù)的獲取是一個異步過程，在服務器上呈現(xiàn)時，我們必須考慮到這一點。這就是我們的任務變得棘手的地方。這可以歸結為我們的應用程序在做什么。在本例中，客戶端代碼依賴于一個特定的請求，但如果使用 redux-saga 庫，則可能是多個請求，或者可能是一個完整的root saga。我意識到處理這個問題的兩種方法:
1、我們明確知道請求的頁面需要什么樣的數(shù)據(jù)。我們獲取數(shù)據(jù)并使用該數(shù)據(jù)創(chuàng)建 Redux 存儲。然后我們通過提供已完成的 Store 來呈現(xiàn)頁面，理論上我們可以做到。
2、我們完全依賴于運行在客戶端上的代碼，計算出最終的結果。
第一種方法，需要我們在兩端做好狀態(tài)管理。第二種方法需要我們在服務端使用一些額外的庫或工具，來確保同一套代碼能在服務端和客戶端做相同的事情，我個人比較推薦使用這種方法。
例如，我們使用了 Fetch API 向后端發(fā)出異步請求，而服務端默認是不支持的。我們需要做的就是在 server.js 中將 Fetch 導入:
import 'isomorphic-fetch';
我們使用客戶端API接收異步數(shù)據(jù)，一旦 Store 獲取到異步數(shù)據(jù)，我們將觸發(fā) 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 方法來監(jiān)聽狀態(tài)。當狀態(tài)發(fā)生變化——是否有任何用戶數(shù)據(jù)被獲取。如果 users 存在，我們將 unsubscribe() ，這樣我們就不會讓相同的代碼運行兩次，并且我們使用相同的存儲實例轉換為string。最后，我們將標記輸出到瀏覽器。
store.subscribe方法返回一個函數(shù)，調(diào)用這個函數(shù)就可以解除監(jiān)聽
有了上面的代碼，我們的組件已經(jīng)可以成功地在服務器端渲染。通過開發(fā)者工具，我們可以看到發(fā)送到瀏覽器的內(nèi)容:
<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"},{"id":5,"first_name":"Charles","last_name":"Morris","avatar":"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"}]};
</script>
<script src="/bundle.js"></script>
</body>
</html>
當然，現(xiàn)在并沒有結束，客戶端 JavaScript 不知道服務器上發(fā)生了什么，也不知道我們已經(jīng)對API進行了請求。我們必須通過傳遞 Store 的狀態(tài)來通知瀏覽器，以便它能夠接收它。
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 狀態(tài)放到一個全局變量 __APP_STATE 中， reducer 也有一點變化：
function getInitialState() {
if (typeof window !== 'undefined' && window.__APP_STATE) {
return window.__APP_STATE;
}
return { users: null };
}
注意 typeof window !== 'undefined' ,我們必須這樣做，因為這段代碼也會在服務端執(zhí)行，這就是為什么說在做服務端渲染時要非常小心，尤其是全局使用的瀏覽器api的時候。
最后一個需要優(yōu)化的地方，就是當已經(jīng)取到 users 時，必須阻止 fetch 。
componentWillMount() {
const { users, fetchUsers } = this.props;
if (users === null) {
fetchUsers();
}
}
總結
服務器端呈現(xiàn)是一個有趣的話題。它有很多優(yōu)勢，并改善了整體用戶體驗。它還會提升你的單頁應用程序的SEO。但這一切并不簡單。在大多數(shù)情況下，需要額外的工具和精心選擇的api。
這只是一個簡單的案例，實際開發(fā)場景往往比這個復雜的多，需要考慮的情況也會非常多，你們的服務端渲染是怎么做的？
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了React實現(xiàn)一個拖拽排序組件?-?支持多行多列、支持TypeScript、支持Flip動畫、可自定義拖拽區(qū)域,文章通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了React中setState的使用與同步異步的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
輪播組件是常見的一種方式,用來展示圖像、信息或者是廣告,本文就來介紹一下React實現(xiàn)動態(tài)輪播圖的使用示例,具有一定的參考價值,感興趣的可以了解一下2023-12-12
這篇文章主要介紹了React中的this指向的相關資料，幫助大家更好的理解和學習使用React，感興趣的朋友可以了解下2021-04-04
下面小編就為大家?guī)硪黄獪\談react+es6+webpack的基礎配置。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
React組件、狀態(tài)管理、代碼優(yōu)化的技巧
文章總結了React組件設計、狀態(tài)管理、代碼組織和優(yōu)化的技巧,它涵蓋了使用Fragment、props解構、defaultProps、key和ref的使用、渲染性能優(yōu)化等方面2024-11-11
關于React Native使用axios進行網(wǎng)絡請求的方法
axios是一個基于Promise的Http網(wǎng)絡庫，可運行在瀏覽器端和Node.js中，Vue應用的網(wǎng)絡請求基本都是使用它完成的。這篇文章主要介紹了React Native使用axios進行網(wǎng)絡請求,需要的朋友可以參考下2021-08-08
React是用于構建用戶界面的JavaScript庫。本文詳細講解了React的生命周期，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
這篇文章主要介紹了 React Native 如何 獲取不同屏幕的像素密度的相關資料,需要的朋友可以參考下2017-01-01
在React的生命周期鉤子和合成事件中，多次執(zhí)行setState，會被調(diào)用幾次，本文就詳細的介紹一下，感興趣的可以了解一下2021-11-11