首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于React+Redux的SSR实现方法

Posted in Javascript onJuly 03, 2018

为什么要实现服务端渲染(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"
    },
    {
      ...
    }
]

我们通过一个组件将数据渲染出来。在这个组件的 componentWillMount 生命周期方法中，我们将触发数据获取，一旦请求成功，我们将发送一个类型为 user_fetch 的操作。该操作将由一个 reducer 处理，我们将在 Redux 存储中获得更新。状态的改变将触发我们的组件重新呈现指定的数据。

基于React+Redux的SSR实现方法

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 (
   <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"},{"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>

当然，现在并没有结束，客户端 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。

这只是一个简单的案例，实际开发场景往往比这个复杂的多，需要考虑的情况也会非常多，你们的服务端渲染是怎么做的？

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

基于React+Redux的SSR实现方法

- Author -

answer518

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
一个符号插入器 中用到的js代码
Sep 04 Javascript
javascript脚本编程解决考试分数统计问题
Oct 18 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 Javascript
VUE 3D轮播图封装实现方法
Jul 03 #Javascript
vue.js轮播图组件使用方法详解
Jul 03 #Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 #Javascript
解析vue data不可以使用箭头函数问题
Jul 03 #Javascript
详解Vue SPA项目优化小记
Jul 03 #Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 #jQuery
JS实现显示当前日期的实例代码
Jul 03 #Javascript
mysqldump(1) ACID(1) Stater(1) XPathParser(1) sock(2) minio(1) protocol(1) csgo(1) sentinel(1) Windows server 2003(1)
You might like
PHP模块memcached使用指南
2014/12/08 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
Highcharts入门之简介
2016/08/02 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
wxPython定时器wx.Timer简单应用实例
2015/06/03 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
打包发布Python模块的方法详解
2016/09/18 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
python日志模块logbook使用方法
2019/09/19 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
python 8种必备的gui库
2020/08/27 Python
python基于爬虫+django，打造个性化API接口
2021/01/21 Python
薇诺娜官方网上商城：专注敏感肌肤
2017/05/25 全球购物
瑞典灯具和照明网上商店：Lamp24.se
2018/03/17 全球购物
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
大学生实习期自我评价范文
2013/10/03 职场文书
银行介绍信范文
2014/01/10 职场文书
2014年个人售房协议书
2014/10/30 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
再谈python_tkinter弹出对话框创建
2022/03/20 Python