从零开始搭建React同构应用(三):配置SSR

从零开始搭建React同构应用(三):配置SSR

这篇文章来讲解来配置server side render,我们先从最简单的方法开始,用cli的方式模拟实现SSR。

demo在这里

主要内容:

  1. 添加webpack的server render配置

  2. 使用CLI的方式测试SSR输出

添加webpack的server render配置

之前我是考虑在node端直接require源码,例如:

//hook require
require("babel-register")({
    babelrc: "false",
    presets: ['react'],
    plugins: [
        "transform-decorators-legacy",
        "transform-es2015-modules-commonjs"
    ]
});

//直接引入源码
const IndexBundle = require("./src/index/Index.jsx");


//do server side render...

这样少编译一套代码,觉得这样维护起来更方便,但是后来实践发现有几个问题:

  1. import "xxx.styl",引入样式文件会报错。

  2. 这种模式下需要使用babel-registerbabel编译速度较慢,开发模式下每次修改文件再重启服务器耗时太长。

  3. 影响生产环境下执行效率。

最后权衡下,还是决定使用现在多一套ssr编译配置的方案。

webpack.config.js添加以下代码

let serverConfig = {};

Object.assign(serverConfig, browserConfig, {
    output: {
        path: path.join(__dirname, 'build_server'),
        filename: "[name].bundle.js",
        libraryTarget: 'commonjs2' //设置导出类型,web端默认是var,node需要module.exports = xxx的形式
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                query: {                //node端的babel编译配置可以简化很多
                    babelrc: "false",
                    presets: ['react'],
                    plugins: [
                        "transform-decorators-legacy",
                        "transform-es2015-modules-commonjs" //如果不转换成require,import 'xxx.styl'会报错
                    ]
                }
            },
            {
                test: /\.(styl|css)$/,          //node端不能 require('xx.css'),会报错
                loader: 'null'
            },
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            React: 'react',
            ReactDOM: 'react-dom',
            fetch: 'isomorphic-fetch',
            promise: 'promise'
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) || JSON.stringify('development')
        }),
    ],
    target: 'node',
    externals: [nodeExternals()], //不把node_modules中的文件打包
});

因为serverConfig的配置和browserConfig相似,我就使用Object.assign来复制一份,同时做下修改。

nodejs启用 --harmony参数就可以支持绝大部分的ES6,ES7语法,如async等,因此只需要编译JSX语法和import语法。babel的编译速度也因此可以提高很多。babelrc: "false"是为了屏蔽项目目录下的babel.rc文件,那是给浏览器端编译使用的。

同时,在node环境不支持直接引入CSS文件的,如require('xx.css'),因此在打包的时候要忽略样式文件和资源文件,否则会报错。

这里我使用了webpack-node-externals插件,这个插件的原理是利用了webapck中的externals配置项,来剔除node_modules文件的,因为默认webapck会把所有用到的js文件统统打包,而我们由于是在node端,因此不需要把用到的库也打包了。

执行试试

npm run watch

clipboard.png

如果不用webpack-node-externals,打包出的文件体积会大很多

clipboard.png

测试SSR输出

其实使用React的ssr很简单,熟悉下面两个API即可:

  1. React.createElement

  2. ReactDOMServer.renderToString

React.createElement

clipboard.png

这里简单解释下,React.createElementReact类进行实例化,实例化后的组件就可以进行mount操作了,在浏览器环境我们是使用ReactDOM.render()来进行挂载操作的。

ReactDOMServer.renderToString

clipboard.png

ReactDOMServer.renderToString则是把React实例渲染成HTML标签。

测试

这里我们先不搭建HTTP server,暂时用cli的方式模拟一下,方便大家理解。

新建cli.js,写入以下内容(以Index.jsx为例),注意:.defalut不能少。

/**
 * Created by chenchen on 2017/2/4.
 *
 * React server render 命令行测试
 */

//以Index.jsx为例
const IndexBundle = require("../build_server/index.bundle.js");
const React = require("react");
const ReactDOMServer = require("react-dom/server");
let {renderToString} = ReactDOMServer;
let initialData = {todoList: ['11', '22', '33']};
let instance = React.createElement(IndexBundle.default, initialData); //.defalut不能少


let str = renderToString(instance);

console.log(str);

我们添加一条npm script

"test-ssr": "node --harmony test/cli.js"

执行后效果如图

clipboard.png

可以看到我们已经成功输出了组件渲染后的HTML文本了。

下一篇文章我将讲解如何搭建一个简单的Koa server,并结合这边文章内容,实现真正意义上的server side render ^_^。

要注意的地方

React生命周期

React组件的声明周期只会到componentWillMount,因此你不能在componentWillMount及其之前的生命周期钩子中写浏览器环境下的代码,如$.ajax(...),会报错。

前后端数据同步

要注意浏览器端和服务器端的数据要一致,否则会出现HTML重用失败的错误:
clipboard.png

server side render 没有用到redux

可能有人会疑惑,在浏览器编译的代码是:

 //初始数据,用于和server render数据同步
let initialData = window._SERVER_DATA || {};

let store = createStore(reducers, initialData, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

let App = connect(_ => _)(Layout);//用connect包装一下,这里只用到mapStateToProps,而且不对state加以过滤

ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>,
    document.getElementById('wrap'));

而server端的编译没有和Redux沾边,因为Providerconnect(...)(Layout)functional component,本身不会多渲染出来HTML,因此可以不用Redux参与渲染。


前端笔记
该用户没有描述

FE

693 声望
186 粉丝
0 条评论
推荐阅读
sortablejs 支持 iframe 跨域拖拽
页面里面的 iframe 在没有跨域的情况下,SortableJS 是支持跨iframe拖拽的,官方仓库给了例子。如果跨域了,我们拿不到 iframe 的 contentDocument,无法监听事件,所以 Sortable 默认情况下是不能工作的。

Larry_阅读 3.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木141阅读 11.9k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 5.9k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.1k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7.1k评论 6

【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木32阅读 6k评论 9

FE

693 声望
186 粉丝
宣传栏