點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁(yè) - 科技 - 知識(shí)百科 - 正文

基于React+Redux的SSR實(shí)現(xiàn)方法

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:12:05

基于React+Redux的SSR實(shí)現(xiàn)方法

基于React+Redux的SSR實(shí)現(xiàn)方法:為什么要實(shí)現(xiàn)服務(wù)端渲染(SSR) 總結(jié)下來(lái)有以下幾點(diǎn)： SEO，讓搜索引擎更容易讀取頁(yè)面內(nèi)容首屏渲染速度更快（重點(diǎn)），無(wú)需等待js文件下載執(zhí)行的過(guò)程代碼同構(gòu)，服務(wù)端和客戶端可以共享某些代碼今天我們將構(gòu)建一個(gè)使用 Redux 的簡(jiǎn)單的 React 應(yīng)用程

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀基于React+Redux的SSR實(shí)現(xiàn)方法:為什么要實(shí)現(xiàn)服務(wù)端渲染(SSR) 總結(jié)下來(lái)有以下幾點(diǎn)： SEO，讓搜索引擎更容易讀取頁(yè)面內(nèi)容首屏渲染速度更快（重點(diǎn)），無(wú)需等待js文件下載執(zhí)行的過(guò)程代碼同構(gòu)，服務(wù)端和客戶端可以共享某些代碼今天我們將構(gòu)建一個(gè)使用 Redux 的簡(jiǎn)單的 React 應(yīng)用程

為什么要實(shí)現(xiàn)服務(wù)端渲染(SSR)

總結(jié)下來(lái)有以下幾點(diǎn)：

SEO，讓搜索引擎更容易讀取頁(yè)面內(nèi)容
首屏渲染速度更快（重點(diǎn)），無(wú)需等待js文件下載執(zhí)行的過(guò)程
代碼同構(gòu)，服務(wù)端和客戶端可以共享某些代碼

今天我們將構(gòu)建一個(gè)使用 Redux 的簡(jiǎn)單的 React 應(yīng)用程序，實(shí)現(xiàn)服務(wù)端渲染(SSR)。該示例包括異步數(shù)據(jù)抓取，這使得任務(wù)變得更有趣。

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

安裝環(huán)境

在開(kāi)始編寫(xiě)應(yīng)用之前，需要我們先把環(huán)境編譯/打包環(huán)境配置好，因?yàn)槲覀儾捎玫氖莈s6語(yǔ)法編寫(xiě)代碼。我們需要將代碼編譯成es5代碼在瀏覽器或node環(huán)境中執(zhí)行。

我們將用babelify轉(zhuǎn)換來(lái)使用browserify和watchify來(lái)打包我們的客戶端代碼。對(duì)于我們的服務(wù)器端代碼，我們將直接使用babel-cli。

代碼結(jié)構(gòu)如下:

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

我們?cè)趐ackage.json里面加入以下兩個(gè)命令腳本:

"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庫(kù)幫助并行運(yùn)行多個(gè)進(jìn)程，這正是我們?cè)诒O(jiān)控更改時(shí)需要的。

最后一個(gè)有用的命令，用于運(yùn)行我們的http服務(wù)器:

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

不使用 node ./build/server/server.js 而使用 Nodemon 的原因是，它可以監(jiān)控我們代碼中的任何更改，并自動(dòng)重新啟動(dòng)服務(wù)器。這一點(diǎn)在開(kāi)發(fā)過(guò)程會(huì)非常有用。

開(kāi)發(fā)React+Redux應(yīng)用

假設(shè)服務(wù)端返回以下的數(shù)據(jù)格式：

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

我們通過(guò)一個(gè)組件將數(shù)據(jù)渲染出來(lái)。在這個(gè)組件的 componentWillMount 生命周期方法中，我們將觸發(fā)數(shù)據(jù)獲取，一旦請(qǐng)求成功，我們將發(fā)送一個(gè)類型為 user_fetch 的操作。該操作將由一個(gè) reducer 處理，我們將在 Redux 存儲(chǔ)中獲得更新。狀態(tài)的改變將觸發(fā)我們的組件重新呈現(xiàn)指定的數(shù)據(jù)。

Redux具體實(shí)現(xiàn)

reducer 處理過(guò)程如下：

// 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 請(qǐng)求去改變應(yīng)用狀態(tài)，我們需要編寫(xiě) 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 實(shí)現(xiàn)的最關(guā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) ?這是因?yàn)楫?dāng)我們?cè)诜?wù)器端渲染時(shí)，我們需要一個(gè)全新的 Store 實(shí)例來(lái)處理每個(gè)請(qǐng)求。

實(shí)現(xiàn)React組件

在這里需要提的一個(gè)重點(diǎn)是，一旦我們想實(shí)現(xiàn)服務(wù)端渲染，那我們就需要改變之前的純客戶端編程模式。

服務(wù)器端渲染，也叫代碼同構(gòu)，也就是同一份代碼既能在客戶端渲染，又能在服務(wù)端渲染。

我們必須保證代碼能在服務(wù)端正常的運(yùn)行。例如，訪問(wèn) Window 對(duì)象，Node不提供Window對(duì)象的訪問(wèn)。

// 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 來(lái)發(fā)送 fetchUsers 請(qǐng)求， componentDidMount 為什么不能用呢？主要原因是 componentDidMount 在服務(wù)端渲染過(guò)程中并不會(huì)執(zhí)行。

fetchUsers 是一個(gè)異步函數(shù)，它通過(guò)Fetch API請(qǐng)求數(shù)據(jù)。當(dāng)數(shù)據(jù)返回時(shí)，會(huì)派發(fā) users_fetch 動(dòng)作，從而通過(guò) reducer 重新計(jì)算狀態(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')
);

運(yùn)行Node Server

為了演示方便，我們首選Express作為http服務(wù)器。

// 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="https://www.gxlcms.com/bundle.js"></script>
 </body>
 </html>
 `);
});

app.listen(
 3000,
 () => console.log('Example app listening on port 3000!')
);

有了這個(gè)文件，我們可以運(yùn)行 npm run start 并訪問(wèn) http://localhost:3000 。我們看到數(shù)據(jù)獲取成功，并成功的顯示了。

服務(wù)端渲染

目前為止，我們的服務(wù)端僅僅是返回了一個(gè) html 骨架，而所有交互全在客戶端完成。瀏覽器需要先下載 bundle.js 后執(zhí)行。而服務(wù)端渲染的作用就是在服務(wù)器上執(zhí)行所有操作并發(fā)送最終標(biāo)記，而不是把所有工作交給瀏覽器執(zhí)行。 React 足夠的聰明，能夠識(shí)別出這些標(biāo)記。

還記得我們?cè)诳蛻舳俗龅囊韵率虑閱?#63;

import ReactDOM from 'react-dom';

ReactDOM.render(
 <Provider store={ createStore() }><App /></Provider>,
 document.querySelector('#content')
);

服務(wù)端幾乎相同：

import ReactDOMServer from 'react-dom/server';

const markupAsString = ReactDOMServer.renderToString(
 <Provider store={ store }><App /></Provider>
);

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

然后將這個(gè)字符串加入到 Express 的響應(yīng)里面，所以服務(wù)端代碼為：

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="https://www.gxlcms.com/bundle.js"></script>
 </body>
 </html>
 `);
});

如果重新啟動(dòng)服務(wù)器并打開(kāi)相同的 http://localhost:3000 ，我們將看到以下響應(yīng):

<html>
 <head>
 <title>App</title>
 </head>
 <body>
 <div id="content"><div data-reactroot=""></div></div>
 <script src="https://www.gxlcms.com/bundle.js"></script>
 </body>
</html>

我們的頁(yè)面中確實(shí)有一些內(nèi)容，但它只是 <div data-reactroot=""></div> 。這并不意味著程序出錯(cuò)了。這絕對(duì)是正確的。 React 確實(shí)呈現(xiàn)了我們的頁(yè)面，但它只呈現(xiàn)靜態(tài)內(nèi)容。在我們的組件中，我們?cè)讷@取數(shù)據(jù)之前什么都沒(méi)有，數(shù)據(jù)的獲取是一個(gè)異步過(guò)程，在服務(wù)器上呈現(xiàn)時(shí)，我們必須考慮到這一點(diǎn)。這就是我們的任務(wù)變得棘手的地方。這可以歸結(jié)為我們的應(yīng)用程序在做什么。在本例中，客戶端代碼依賴于一個(gè)特定的請(qǐng)求，但如果使用 redux-saga 庫(kù)，則可能是多個(gè)請(qǐng)求，或者可能是一個(gè)完整的root saga。我意識(shí)到處理這個(gè)問(wèn)題的兩種方法:

1、我們明確知道請(qǐng)求的頁(yè)面需要什么樣的數(shù)據(jù)。我們獲取數(shù)據(jù)并使用該數(shù)據(jù)創(chuàng)建 Redux 存儲(chǔ)。然后我們通過(guò)提供已完成的 Store 來(lái)呈現(xiàn)頁(yè)面，理論上我們可以做到。

2、我們完全依賴于運(yùn)行在客戶端上的代碼，計(jì)算出最終的結(jié)果。

第一種方法，需要我們?cè)趦啥俗龊脿顟B(tài)管理。第二種方法需要我們?cè)诜?wù)端使用一些額外的庫(kù)或工具，來(lái)確保同一套代碼能在服務(wù)端和客戶端做相同的事情，我個(gè)人比較推薦使用這種方法。

例如，我們使用了 Fetch API 向后端發(fā)出異步請(qǐng)求，而服務(wù)端默認(rèn)是不支持的。我們需要做的就是在 server.js 中將 Fetch 導(dǎo)入:

import 'isomorphic-fetch';

我們使用客戶端API接收異步數(shù)據(jù)，一旦 Store 獲取到異步數(shù)據(jù)，我們將觸發(fā) ReactDOMServer.renderToString 。它會(huì)提供給我們想要的標(biāo)記。我們的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="https://www.gxlcms.com/bundle.js"></script>
 </body>
 </html>
 `);
 }
 });

 ReactDOMServer.renderToString(<Provider store={ store }><App /></Provider>);
});

我們使用 Store 的 subscribe 方法來(lái)監(jiān)聽(tīng)狀態(tài)。當(dāng)狀態(tài)發(fā)生變化——是否有任何用戶數(shù)據(jù)被獲取。如果 users 存在，我們將 unsubscribe() ，這樣我們就不會(huì)讓相同的代碼運(yùn)行兩次，并且我們使用相同的存儲(chǔ)實(shí)例轉(zhuǎn)換為string。最后，我們將標(biāo)記輸出到瀏覽器。

store.subscribe方法返回一個(gè)函數(shù)，調(diào)用這個(gè)函數(shù)就可以解除監(jiān)聽(tīng)

有了上面的代碼，我們的組件已經(jīng)可以成功地在服務(wù)器端渲染。通過(guò)開(kāi)發(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="https://www.gxlcms.com/bundle.js"></script>
 </body>
 </html>

當(dāng)然，現(xiàn)在并沒(méi)有結(jié)束，客戶端 JavaScript 不知道服務(wù)器上發(fā)生了什么，也不知道我們已經(jīng)對(duì)API進(jìn)行了請(qǐng)求。我們必須通過(guò)傳遞 Store 的狀態(tài)來(lá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="https://www.gxlcms.com/bundle.js"></script>
 </body>
 </html>
`);

我們將 Store 狀態(tài)放到一個(gè)全局變量 __APP_STATE 中， reducer 也有一點(diǎn)變化：

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

注意 typeof window !== 'undefined' ,我們必須這樣做，因?yàn)檫@段代碼也會(huì)在服務(wù)端執(zhí)行，這就是為什么說(shuō)在做服務(wù)端渲染時(shí)要非常小心，尤其是全局使用的瀏覽器api的時(shí)候。

最后一個(gè)需要優(yōu)化的地方，就是當(dāng)已經(jīng)取到 users 時(shí)，必須阻止 fetch 。

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

 if (users === null) {
 fetchUsers();
 }
}

總結(jié)

服務(wù)器端呈現(xiàn)是一個(gè)有趣的話題。它有很多優(yōu)勢(shì)，并改善了整體用戶體驗(yàn)。它還會(huì)提升你的單頁(yè)應(yīng)用程序的SEO。但這一切并不簡(jiǎn)單。在大多數(shù)情況下，需要額外的工具和精心選擇的api。

這只是一個(gè)簡(jiǎn)單的案例，實(shí)際開(kāi)發(fā)場(chǎng)景往往比這個(gè)復(fù)雜的多，需要考慮的情況也會(huì)非常多，你們的服務(wù)端渲染是怎么做的？

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

基于React+Redux的SSR實(shí)現(xiàn)方法

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽： ssr 實(shí)現(xiàn) React

熱門焦點(diǎn)

基于React+Redux的SSR實(shí)現(xiàn)方法

基于React+Redux的SSR實(shí)現(xiàn)方法

基于React+Redux的SSR實(shí)現(xiàn)方法

最新推薦

猜你喜歡

熱門推薦