注意window.main这个函数的定义，结合index.ejs可以知道这个函数是所有脚本加载完成后才触发，里面用的是react-loadable的写法，用于页面的懒加载，关于页面分别打包的写法要结合路由设置来讲解，这里有个大致印象即可。需要注意的是app这个文件下暴露出的三个方法是在浏览器端和服务器端通用的，接下来主要就是说这部分的思路。
路由处理
接下来看以下src/app目录下的文件，index.js暴露了三个方法，这里面涉及的三个方法在服务端和浏览器端开发都会用到，这一部分主要讲其下的router文件里面的代码思路和createApp.js文件对路由的处理，这里是实现两端路由相互打通的关键点。
router文件夹下的routes.js是路由配置文件，将各个页面下的路由配置都引进来，合成一个配置数组，可以通过这个配置来灵活控制页面上下线。同目录下的index.js是RouterV4的标准写法，通过遍历配置数组的方式传入路由配置，ConnectRouter是用于合并Router的一个组件，注意到history要作为参数传入，需要在createApp.js文件里做单独的处理。先大致看一下Route组件中的几个配置项，值得注意的是其中的thunk属性，这是实现后端获取数据后渲染的关键一步，正是这个属性实现了类似Next里面的组件提前获取数据的生命周期钩子，其余的属性都可以在相关React-router文档中找到说明，这里不在赘述。
import routesConfig from './routes'; const Routers=({history})=>( <ConnectedRouter history={history}> <div> { routesConfig.map(route=>( <Route key={route.path} exact={route.exact} path={route.path} component={route.component} thunk={route.thunk} /> )) } </div> </ConnectedRouter> ) export default Routers;
查看app目录下的createApp.js里面的代码可以发现，本框架是针对不同的工作环境做了不同的处理，只有在生产环境下才利用Loadable.Capture方法实现了懒加载，动态引入不同页面对应的打包之后的js文件。到这里还要看一下组件里面的路由配置文件的写法，以home页面下的index.js为例。注意/* webpackChunkName: 'Home' */这串字符，实质是指定了打包后此页面对应的js文件名，所以针对不同的页面，这个注释也需要修改，避免打包到一起。loading这个配置项只会在开发环境生效，当页面加载未完成前显示，这个实际项目开发如果不需要可以删除此组件。
import {homeThunk} from '../../store/actions/thunk'; const LoadableHome = Loadable({ loader: () =>import(/* webpackChunkName: 'Home' */'./containers/homeContainer.js'), loading: Loading, }); const HomeRouter = { path: 'https://www.jb51.net/', exact: true, component: LoadableHome, thunk: homeThunk // 服务端渲染会开启并执行这个action，用于获取页面渲染所需数据 } export default HomeRouter
这里多说一句，有时我们要改造的项目的页面文件里有从window.location里面获取参数的代码，改造成服务端渲染时要全部去掉，或者是要在render之后的生命周期中使用。并且页面级别组件都已经注入了相关路由信息，可以通过this.props.location来获取URL里面的参数。本项目用的是BrowserRouter，如果用HashRouter则包含参数可能略有不同，根据实际情况取用。
根据React16的服务端渲染的API介绍：
浏览器端使用的注入ConnectedRouter中的history为：import createHistory from 'history/createBrowserHistory'
服务器端使用的history为import createHistory from 'history/createMemoryHistory'
服务端渲染
这里就不会涉及到koa2的一些基础知识，如果对koa2框架不熟悉可以参考我的另外一篇博文。这里是看server文件夹下都是服务端的代码。首先是简洁的app.js用于保证每次连接都返回的是一个新的服务器端实例，这对于单线程的js语言是很关键的思路。需要重点介绍的就是clientRouter.js这个文件，结合/src/app/configureStore.js这个文件共同理解服务端渲染的数据获取流程和React的渲染机制。
/*configureStore.js*/ import {createStore, applyMiddleware,compose} from "redux"; import thunkMiddleware from "redux-thunk"; import createHistory from 'history/createMemoryHistory'; import { routerReducer, routerMiddleware } from 'react-router-redux' import rootReducer from '../store/reducers/index.js'; const routerReducers=routerMiddleware(createHistory());//路由 const composeEnhancers = process.env.NODE_ENV=='development'?window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose; const middleware=[thunkMiddleware,routerReducers]; //把路由注入到reducer，可以从reducer中直接获取路由信息 let configureStore=(initialState)=>createStore(rootReducer,initialState,composeEnhancers(applyMiddleware(...middleware))); export default configureStore;