支持ssr的react项目

一.项目运行

git clone https://github.com/BeliefRC/ReactSSR.git  //clone项目
npm i  //安装依赖
npm run  dev//项目运行

二.目录结构

    ReactSSR
    	public/
    	src/
    		clinet/                  客户端相关代码
    		components/       公共组件代码
    		containers/          路由页面
    		server/                 服务端代码，根据路由渲染不同页面，接口转发
    		store/                   redux单一状态树
    		App.js
    		Routers.js            路由配置文件
    		config.js
    		withStyle.js
   	 package.json
		.babelrc
		webpack.base.js      webpack公共基础配置
		webpack.client.js     客户端webpack配置
		webpack.server.js    服务端webbpack配置
    	README.md

三.使用到的技术栈

1. 在server/**js 中使用express创建http服务

   • 使用express.static将public目录作为静态资源服务目录
   • 使用express-http-proxy做代理转发
   • 使用react-dom/server中的renderToString方法将组件转换成html字符串
   • 路由组件中使用StaticRouter代替传统的BrowserRouter或HashRouter,并且传入location属性（当前路由地址）、context属性（全局上下文数据）
   • 使用react-router-config提供的renderRoutes方法，渲染出不同路由对应的页面
   • 在window.context上挂载store数据，实现数据的注水，达到客户端，服务端的状态统一的效果

2. 客户端相关代码

   • 使用ReactDom.hydrate代替ReactDom.render方法
   • 由于componentDidMount在服务端无法执行，所以添加loadData静态方法，在服务端渲染时，会检查组件中是否含有该方法，从而达到发送请求等相关目的

3. store及相关配置

   • 提供getStore和getClientStore两个方法，分别为生成服务端及客户端store代码
   • 两个方法中使用了redux-thunk中间件，并且运用到了thunk.withExtraArgument方法创建了不同的axios实例
   • 两个不同的axios实例（request方法）的主要区别是baseUrl配置不同
   • getClientStore方法中会从window.context取出默认的state，并且传入默认的createStore，实现数据脱水，达到客户端，服务端的状态统一的效果

4. webpack配置

   • 除了配置基本的entry、output、loader外，需要注意的是webpack.server.js中需要配置target为node，并且加以下代码，目的是不打包node的相关代码

const nodeExternals = require('webpack-node-externals')
const serverConfig = {
   //其他配置....
   externals: [nodeExternals()]
   //其他配置....
}

5. 其他配置
   • 使用nodemon监控监管代码，实现服务端代码自动重启
   • 使用npm-run-all并行打包客户端服务端代码，并且启动相关服务
   • 使用react-helmet支持title和meta的修改的,进行网页SEO优化