【分享】React Koa2 同构(服务端渲染)轻量级模板(boilerplate)
如果你还不是很了解什么是同构,不妨请先自行Google。
现在市面上有不少优秀的同构示例模板:
- 其中仅有一部分能覆盖所有常见同构难题
- 配置比较复杂,很多黑科技,不易上手、不易扩展
- 几乎都使用express、使用koa作为后端环境的简直是千里挑一 TAT
该模板解决了如下常见难题:
- <b>(重点)</b>开发环境的代码热更新问题 - Browser端的热替换(不刷新页面)、Server端的热更新(无需重启node服务器)
- 开发环境和生产环境尽量保持环境一致 - 避免环境不一致导致的奇怪bug
- <b>(重点)</b> 开发和生产环境的代码分割 - 按需加载、按路由加载脚本(javascript)和样式(css)
- 尽量使用最新的官方组件 - 如react-router-v4,现在市面上很多样板还都只能用v3实现
- 尽量使用官方提倡的架构 - 如使用reac-router提倡的route config方式、route config中实现数据load
- <b>(重点)</b>完美结合koa和redux-thunk的async/await编程,实现真正的同构
- checksum问题
- <b>(重点)</b>koa作为后端
配置简单到让你发指:
好吧,既然解决这么多问题,是不是配置过程很恶心?答:不是的。整个项目的核心配置就在以下的2 * 2文件中:
— 开始 —
config/webpack.dev.config.js、src/development.js - 开发环境配置
config/webpack.prod.config.js、src/production.js - 生产环境配置
— 结束 —
就这样简单… 这样留下足够的空间让使用者加入一些自己喜欢的自定义功能。
好了废话不多说,代码请直戳<b>Github仓库地址</b>:Koa-React-Universal
https://github.com/kimjuny/koa-react-universal
代码目前仍处于迭代阶段(有些额外功能还需补充上),但是开发、生产、测试环境已经配置完毕。
:slight_smile: 如果觉得好用,请送上star,请尽情fork :slight_smile:
<b>一个简单地DEMO:</b>搜索github代码仓库(仿github界面)
各位如果有什么好的建议也欢迎留下issue、PR,或者在下方留言也可以!
4 回复
好像没什么人关注SSR 😓
我来强势关注
自己顶一下
现在 SSR 用的很多啦,可能关注这个网站的人比较少吧,哈哈,楼主加油~