React SSR

react server-side render 工程, bundle使用webpack 4.

运行工程

$ git clone https://github.com/m860/react-ssr.git
$ cd react-ssr
$ npm install
$ npm run build:dll
$ npm start

一般在开发阶段都使用npm start,App以SPA的方式运行,路由是HashRouter npm start能够正常运行不代表npm run start:ssr能够正常运行,可能有一些细微的差别,因此发布之前最好在npm run start:ssr下测试下

编译工程

$ npm run build:dll # 如果没有build dll 需要先运行此步骤
$ npm run build

npm command

• npm start:开发阶段,App以SPA的方式运行,路由使用HashRouter,HMR可用
• npm run start:ssr:开发阶段,App以SSR的方式运行,路由使用BrowserRouter,HMR不可用
• npm run build:dll:打包公共库
• npm run build:ssr:打包生产环境,App使用SSR的方式运行,路由使用BrowserRouter
• npm run build:spa:打包生产环境,App使用SPA的方式运行,路由使用HashRouter

服务端数据渲染

先看一个简单的例子

import React,{Component} from "react"

export default class PageDemo extends Component{
    static getInitialProps=()=>{
        return {
            message:"hello SSR"
        };
    }
    constructor(props){
        super(props);
        this.state={
            message:props.message
        };
    }
    render(){
        return (
            <div>
                {this.state.message}
            </div>
        );
    }
}

getInitialProps方法包含一个参数,结构如下:

static getInitialProps({query,params}){
    ...
}

• query: query参数,对应服务端和客户端的query
• params: params参数,对应服务端和客户端的params

在服务端运行的时候getInitialProps由系统自动调用,如果是在客户端执行需要自己手动调用,

import {getInitialProps} from "libs/helpers/ssr.js"

export default class XXX extends Component{
    componentDidMount(){
        const initialProps=getInitialProps(this);
        ...
    }
}

路由配置

• 路由的配置在文件routes.config.js中

export default [
    {
        //名称
        title: ?String,
        //路径
        path: String,
        //组件
        component: Component|Promise<Component>,
        //是否使用精确匹配
        exact: Boolean,
    }
]

• 异步路由的配置使用import,例如:

export default [
    {
        title:"Async Route Config",
        path:"/async/route",
        component:import("COMPONENT_PATH"),
        exact:true
    }
]

• 嵌套路由