因为对网页SEO的需要，要把之前的React项目改造为服务端渲染，经过一番调查和研究，查阅了大量互联网资料。成功踩坑。
选型思路：实现服务端渲染，想用React最新的版本，并且不对现有的写法做大的改动，如果一开始就打算服务端渲染，建议直接用NEXT框架来写
项目地址：https://github.com/wlx200510/react_koa_ssr
脚手架选型：webpack3.11.0 + react Router4 + Redux + koa2 + React16 + Node8.x
主要心得：对React的相关知识更加熟悉，成功拓展自己的技术领域，对服务端技术在实际项目上有所积累
注意点：使用框架前一定确认当前webpack版本为3.x Node为8.x以上，读者最好用React在3个月以上，并有实际React项目经验
项目目录介绍
├── assets │ └── index.css //放置一些全局的资源文件 可以是js 图片等 ├── config │ ├── webpack.config.dev.js 开发环境webpack打包设置 │ └── webpack.config.prod.js 生产环境webpack打包设置 ├── package.json ├── README.md ├── server server端渲染文件，如果对不是很了解，建议参考[koa教程]() │ ├── app.js │ ├── clientRouter.js // 在此文件中包含了把服务端路由匹配到react路由的逻辑 │ ├── ignore.js │ └── index.js └── src ├── app 此文件夹下主要用于放置浏览器和服务端通用逻辑 │ ├── configureStore.js //redux-thunk设置 │ ├── createApp.js //根据渲染环境不同来设置不同的router模式 │ ├── index.js │ └── router │ ├── index.js │ └── routes.js //路由配置文件！ 重要 ├── assets │ ├── css 放置一些公共的样式文件 │ │ ├── _base.scss //很多项目都会用到的初始化css │ │ ├── index.scss │ │ └── my.scss │ └── img ├── components 放置一些公共的组件 │ ├── FloatDownloadBtn 公共组件样例写法 │ │ ├── FloatDownloadBtn.js │ │ ├── FloatDownloadBtn.scss │ │ └── index.js │ ├── Loading.js │ └── Model.js 函数式组件的写法 │ ├── favicon.ico ├── index.ejs //渲染的模板 如果项目需要，可以放一些公共文件进去 ├── index.js //包括热更新的逻辑 ├── pages 页面组件文件夹 │ ├── home │ │ ├── components // 用于放置页面组件，主要逻辑 │ │ │ └── homePage.js │ │ ├── containers // 使用connect来封装出高阶组件 注入全局state数据 │ │ │ └── homeContainer.js │ │ ├── index.js // 页面路由配置文件 注意thunk属性 │ │ └── reducer │ │ └── index.js // 页面的reducer 这里暴露出来给store统一处理 注意写法 │ └── user │ ├── components │ │ └── userPage.js │ ├── containers │ │ └── userContainer.js │ └── index.js └── store ├── actions // 各action存放地 │ ├── home.js │ └── thunk.js ├── constants.js // 各action名称汇集处 防止重名 └── reducers └── index.js // 引用各页面的所有reducer 在此处统一combine处理
项目的构建思路
本地开发使用webpack-dev-server，实现热更新，基本流程跟之前react开发类似，仍是浏览器端渲染，因此在编写代码时要考虑到一套逻辑，两种渲染环境的问题。
当前端页面渲染完成后，其Router跳转将不会对服务端进行请求，从而减轻服务端压力，从而页面的进入方式也是两种，还要考虑两种渲染环境下路由同构的问题。
生产环境要使用koa做后端服务器，实现按需加载，在服务端获取数据，并渲染出整个HTML，利用React16最新的能力来合并整个状态树，实现服务端渲染。
本地开发介绍
查看本地开发主要涉及的文件是src目录下的index.js文件，判断当前的运行环境，只有在开发环境下才会使用module.hot的API，实现当reducer发生变化时的页面渲染更新通知，注意其中的hydrate方法，这是v16版本的一个专门为服务端渲染新增的API方法，它在render方法的基础上实现了对服务端渲染内容的最大可能重用，实现了静态DOM到动态NODES的过程。实质是代替了v15版本下判断checksum标记的过程，使得重用的过程更加高效优雅。
const renderApp=()=>{ let application=createApp({store,history}); hydrate(application,document.getElementById('root')); } window.main = () => { Loadable.preloadReady().then(() => { renderApp() }); }; if(process.env.NODE_ENV==='development'){ if(module.hot){ module.hot.accept('./store/reducers/index.js',()=>{ let newReducer=require('./store/reducers/index.js'); store.replaceReducer(newReducer) }) module.hot.accept('./app/index.js',()=>{ let {createApp}=require('./app/index.js'); let newReducer=require('./store/reducers/index.js'); store.replaceReducer(newReducer) let application=createApp({store,history}); hydrate(application,document.getElementById('root')); }) } }