服务端渲染react+mobx+webpack+express实战（同时也支持客户端渲染）

用户83 发布于2019-08-20 16:14 / 3427人阅读

摘要：但是在服务器环境中，并没有和这个对象，所以我们在服务器环境中抛出一个异常，然后捕获到之后进行跳转。我相信我们所采用的一些方法也许并不是最完美的解法，如果有更好的欢迎来中提探讨交流，互相学习项目地址在此

目前绝大多数网站还是一个多页的结构，但其实一个网站已经完全可以做成一个spa，比如youtube就是一个spa，最近公司项目都是采用react+mobx服务端渲染的单页面应用的形式，踩了一些坑，有一些自己的体验，所以把项目抽了出来去掉了业务代码，留了一个架子分享一下。

项目github地址

目前react主流的状态管理使用的比较多的是redux，我司之前有个项目也是react+redux，从我个人使用下来的感受来说，对于绝大多数的前端应用场景，mobx远比redux更合适，更简单使用，更容易上手。

效果 登陆，注册

添加item到列表中

如果路由中没有的页面，处理404

如何使用

git clone git@github.com:L-x-C/isomorphic-react-with-mobx.git
cd isomorphic-react-with-mobx
npm install

Dev (客户端渲染)

npm start
open http://localhost:3000

Production (服务端渲染)

npm run server
open http://localhost:20000

一些经常会遇到的情况 如何在服务端获取数据?

在每个component中增加一个onEnter,用一个promise来处理，在这个promise中发起一个action，改变mobx中的states值

@action
static onEnter({states, pathname, query, params}) {
    return Promise.all([
      menuActions.setTDK(states, "列表"),
      jobActions.fetchJobList(states, query)
    ]);
}

之所以能这么做，是因为在serverRender中有一个onEnter的预处理，会根据component的嵌套从最外层一直遍历到最里层的onEnter，并执行其中的的方法

import async from "async";

export default (renderProps, states) => {
  const params = renderProps.params;
  const query = renderProps.location.query;
  const pathname = renderProps.location.pathname;

  let onEnterArr = renderProps.components.filter(c => c.onEnter);
  return new Promise((resolve, reject) => {
    async.eachOfSeries(onEnterArr, function(c, key, callback) {
      let enterFn = c.onEnter({states, query, params, pathname});
      if (enterFn) {
        enterFn.then(res => {
          if (res) {
            //处理Promise回调执行，比如登陆
            res.forEach((fn) => {
              if (Object.prototype.toString.call(fn) === "[object Function]") {
                fn();
              }
            });
          }

          if (key === (onEnterArr.length - 1)) {
            resolve();
          }

          callback();
        }).catch(err => {
          reject(err);
        });
      } else {
        callback();
      }
    });
  });
};

如何在服务端设置tdk(title, description, keywords)?

这其实在上一个问题中就已经出现了，onEnter中有一个setTDK(states, t, d, k)的方法，使用他就可以设置tdk的值

如何在服务端进行跳转?

在浏览器环境中，我们可以设置window.location.href = url来进行跳转。
但是在服务器环境中，并没有window和document这2个对象，所以我们在服务器环境中抛出一个异常，然后捕获到之后进行302跳转。
具体可以看src/helpers/location.js, 中的redirect function
他会自动判断当前环境，来选择使用哪一种跳转

import {redirect} from "./helpers/location";

@action
static onEnter({states, query, params}) {
    redirect("http://www.xxx.com");
}

mobx的原理及使用就不在这里做详细的介绍了，网上搜一搜有很多。
我相信我们所采用的一些方法也许并不是最完美的解法，如果有更好的欢迎来github中提issue探讨交流，互相学习~项目地址在此

GPU云服务器云服务器服务端渲染云服务器支持gpu渲染吗网页端webrtc视频渲染网页端3d云渲染

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82807.html

前端每周清单半年盘点之 React 与 ReactNative 篇

摘要：前端每周清单半年盘点之与篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。与求同存异近日，宣布将的构建工具由迁移到，引发了很多开发者的讨论。前端每周清单半年盘点之 React 与 ReactNative 篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为...

Barry_Ng 2019-08-22 10:54 评论0 收藏0
前端每周清单第 50 期: AngularJS and Long Term Support, Web

摘要：在该版本发布之后，开发团队并不会继续发布新的特性，而会着眼于进行重大的错误修复。发布每六个星期，团队就会创建新的分支作为发布通道，本文即是对新近发布的版本进行简要介绍。 showImg(https://segmentfault.com/img/remote/1460000013229009); 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热...

DobbyKim 2019-08-26 11:38 评论0 收藏0
基于 Webpack 4 多入口生成模板用于服务端渲染的方案及实战

摘要：原作者原链接基于多入口生成模板用于服务端渲染的方案及实战法律声明警告本作品遵循署名非商业性使用禁止演绎未本地化版本协议发布。这是什么背景现代化的前端项目中很多都使用了客户端渲染的单页面应用。原作者：@LinuxerPHL原链接：基于 Webpack 4 多入口生成模板用于服务端渲染的方案及实战法律声明警告：本作品遵循署名-非商业性使用-禁止演绎3.0 未本地化版本（CC BY-...

big_cat 2019-08-26 10:37 评论0 收藏0
基于 Webpack 4 多入口生成模板用于服务端渲染的方案及实战

摘要：原作者原博文地址基于多入口生成模板用于服务端渲染的方案及实战法律声明警告本作品遵循署名非商业性使用禁止演绎未本地化版本协议发布。这是什么背景现代化的前端项目中很多都使用了客户端渲染的单页面应用。原作者：@LinuxerPHL原博文地址: 基于 Webpack 4 多入口生成模板用于服务端渲染的方案及实战法律声明警告：本作品遵循署名-非商业性使用-禁止演绎3.0 未本地化版本（...

Lavender 2019-08-26 10:37 评论0 收藏0
干货实例：什么是React服务端渲染？

摘要：今天分享一篇公司大佬的文章，非常厉害的大神崇拜脸，讲讲服务端渲染。服务端渲染，它到底用了什么原理呢服务端渲染原理服务端渲染的方式有很多，主流的服务端语言为使用渲染。富婆来报道，今天想问题想不出来，随手抓了一下头发，没想到啊没想到，我那浓（mei）密(sheng)茂(ji)盛(gen)的秀发又少了好几根，一定要改掉这个想不出来问题就揪头发的坏习惯。今天分享一篇公司大佬的文章，非常厉害的...

Jason_Geng 2019-08-26 13:42 评论0 收藏0