基于React+Redux的SSR实现方法 为什么要实现服务端渲染(SSR) 总结下来有以下几点: SEO,让搜索引擎更容易读取页面内容 首屏渲染速度更快(重点),无需等待js文件下载执行的过程 代码同构,服务端和客户端可以共享某些代码 今天我们将构建一个使用 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": "http://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'; class App extends React.Component { componentWillMount() { fetchUsers(); } render() { const { users } = this.props; return (
{ users && users.length > 0 && users.map( // ... render the user here ) }
); } } 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 重新计算状态,而我们的 由于连接到 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( , 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(` App
`); }); 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( , document.querySelector('#content') ); 服务端几乎相同: import ReactDOMServer from 'react-dom/server'; const markupAsString = ReactDOMServer.renderToString( ); 我们使用了相同的组件 和 store ,不同之处在于它返回的是一个字符串,而不是虚拟DOM。 然后将这个字符串加入到 Express 的响应里面,所以服务端代码为: const store = createStore(); const content = ReactDOMServer.renderToString( ); app.get('*', (req, res) => { res.set('Content-Type', 'text/html'); res.send(` App
${ content }
`); }); 如果重新启动服务器并打开相同的 http://localhost:3000 ,我们将看到以下响应: App
我们的页面中确实有一些内容,但它只是
。这并不意味着程序出错了。这绝对是正确的。 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( ); res.set('Content-Type', 'text/html'); res.send(` App
${ content }
`); } }); ReactDOMServer.renderToString(); }); 我们使用 Store 的 subscribe 方法来监听状态。当状态发生变化——是否有任何用户数据被获取。如果 users 存在,我们将 unsubscribe() ,这样我们就不会让相同的代码运行两次,并且我们使用相同的存储实例转换为string。最后,我们将标记输出到浏览器。 store.subscribe方法返回一个函数,调用这个函数就可以解除监听 有了上面的代码,我们的组件已经可以成功地在服务器端渲染。通过开发者工具,我们可以看到发送到浏览器的内容: App

Eve Holt

Charles Morris

Tracey Ramos

当然,现在并没有结束,客户端 JavaScript 不知道服务器上发生了什么,也不知道我们已经对API进行了请求。我们必须通过传递 Store 的状态来通知浏览器,以便它能够接收它。 const content = ReactDOMServer.renderToString( ); res.set('Content-Type', 'text/html'); res.send(` App
${ content }
`); 我们将 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。 这只是一个简单的案例,实际开发场景往往比这个复杂的多,需要考虑的情况也会非常多,你们的服务端渲染是怎么做的? 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持中文源码网。