React SSR
react server-slide 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的方式运行,路由是HashRouternpm start能够正常运行不代表npm run start:ssr能够正常运行,可能有一些细微的差别,因此发布之前最好在npm run start:ssr下测试下
编译工程
$ npm run build:dll # 如果没有build dll 需要先运行此步骤
$ npm run buildnpm 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的方式运行,路由使用BrowserRouternpm 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
}
]- 嵌套路由
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent