react16 next.js4 antd-mobile2 redux
随着React服务端渲染越来越流行,笔者也想尝尝鲜,经过半个月的折腾,笔者把原先的客户端渲染项目,通过结合 next.js 构建了一个服务端渲染的同构项目。再加上开启服务器页面缓存,以及静态资源CDN加速优化,最终使得网站首屏渲染时间在0.6秒(即:DOMContentLoaded 的时间)左右,大大提高了页面的响应速度,进一步提升用户体验。
很显然,这是移动端网站,选用了 React16 + next.js4 + antd-mobile2 + redux 的技术栈,算是笔者学习React 两年来第一个服务端渲染的项目。由于爱折腾,笔者喜欢自己动手搭脚手架,期间参考了各路大牛的源码和想法,非常感谢!所以这次做下总结,如果恰好能帮到在React服务端渲染方面有困惑的同学,何乐而不为?
react-router
。更多详情
export default ({ text }) => (
<div className="h100 flex jc-center ai-center">
<i className="i-loading rotate font32 c999" />
<span>{text || '加载中...'}</span>
</div>
)
npm run export
,资源将被打包到根目录下的 outCDN 中。MIT