React16 + next.js 4 + antd-mobile2 服务端渲染实践总结

随着React服务端渲染愈来愈流行，笔者也想尝尝鲜，通过半个月的折腾，笔者把原先的客户端渲染项目，经过结合 next.js 构建了一个服务端渲染的同构项目。再加上开启服务器页面缓存，以及静态资源CDN加速优化，最终使得 网站首屏渲染时间在0.6秒（即：DOMContentLoaded 的时间）左右，大大提升了页面的响应速度，进一步提高用户体验。

渲染截图

项目线上地址

前端架构源码

架构简要说明

很显然，这是移动端网站，选用了 React16 + next.js4 + antd-mobile2 + redux 的技术栈，算是笔者学习React 两年来第一个服务端渲染的项目。因为爱折腾，笔者喜欢本身动手搭脚手架，期间参考了各路大牛的源码和想法，很是感谢！因此此次作下总结，若是刚好能帮到在React服务端渲染方面有困惑的同窗，何乐而不为？

• 目录，具体参照源码所示

• 代码规范，本架构经过 eslint 配备了完善了 React 语法规范检查。
• 样式，因为 next.js 目前的版本（v 4.2）并不建议配置loader（听说下个版本会支持），因此咱们的样式最好能提早编译好，为此笔者额外配置了 webpack-handle-css.js 的文件，用于样式的实时编译和打包。同时引入了 antd-mobile 做为辅助UI库，而且支持主题配置。固然，本站依然使用了rem布局，至于字形图标的使用请参阅这里。
• next，next有本身的运行机制，你须要注意和遵照，好比你的全部页面都必须放到根目录下的pages文件夹里，至于路由和文件路径的关系，在 server.js 里有展现。另外，next 有本身的路由模块，因此这里用不到 react-router。更多详情

• 组件，能够复用的模块要写成组件；不能复用，可是逻辑比较复杂的模块也应该写成组件。其他的，都写在pages里就好了。组件分为无状态组件，和有状态组件，须要指出的是，在next.js的架构中，若是你写的是无状态组件，能够不用引入 react，如：

  export default ({ text }) => (
      <div className="h100 flex jc-center ai-center">
      <i className="i-loading rotate font32 c999" />&nbsp;
      <span>{text || '加载中...'}</span>
    </div>
  )

• redux，初始化的redux数据，统一写在每一个page的getInitialProps生命周期里，它的特色是能够在服务端渲染和客户端渲染中都能使用。更多细节都在源码里，欢迎交流探讨。
• 部署上线，这是个同构项目，须要配置服务器node环境，在 server.js 文件里，笔者开启了服务端页面缓存，但对于有用户数据的页面则是选择了关闭缓存，避免串号问题，另外在 next.config.js 文件里，经过设置 assetPrefix ，将全部静态资源放入CDN中，进一步提升网站首屏渲染速度。CDN 中的静态资源须要手动导出，运行 npm run export，资源将被打包到根目录下的 outCDN 中。