【分享】React Koa2 同构(服务端渲染)轻量级模板(boilerplate)

#1

如果你还不是很了解什么是同构,请先自行Google。

现在市面上有不少优秀的同构示例模板:

  • 其中仅有一部分能覆盖所有常见同构难题
  • 配置比较复杂,很多黑科技,不易上手、不易扩展
  • 几乎都使用express、使用koa作为后端环境的简直是千里挑一 TAT

该模板解决了如下常见难题:

  • (重点)开发环境的代码热更新问题 - Browser端的热替换(不刷新页面)、Server端的热更新(无需重启node服务器)
  • 开发环境和生产环境尽量保持环境一致 - 避免环境不一致导致的奇怪bug
  • (重点) 开发和生产环境的代码分割 - 按需加载、按路由加载脚本(javascript)和样式(css)
  • 尽量使用最新的官方组件 - 如react-router-v4,现在市面上很多样板还都只能用v3实现
  • 尽量使用官方提倡的架构 - 如使用reac-router提倡的route config方式、route config中实现数据load
  • (重点)完美结合koa和redux-thunk的async/await编程,实现真正的同构
  • checksum问题
  • (重点)koa作为后端

配置简单到让你发指:

好吧,既然解决这么多问题,是不是配置过程很恶心?答:不是的。整个项目的核心配置就在以下的2 * 2文件中:

— 开始 —

config/webpack.dev.config.js、src/development.js - 开发环境配置

config/webpack.prod.config.js、src/production.js - 生产环境配置

— 结束 —

就这样简单… 相信即使作为前端新手的你也可以很快就上手,同时留下足够的空间让那些对架构上有一些自己想法的人加入一些自己喜欢的自定义feature。

好了废话不多说,代码请直戳Github仓库地址Koa-React-Universal

代码目前仍处于迭代阶段(有些额外功能还需补充上),但是开发、生产、测试环境已经配置完毕。

:slight_smile: 如果觉得好用,请送上star,请尽情fork :slight_smile:

一个简单地DEMO:搜索github代码仓库(仿github界面)

各位如果有什么好的建议也欢迎留下issue、PR,或者在下方留言也可以!

2 Likes
有没有不是spa的demo项目可以参考?
服务器端渲染的时候node无法处理标签怎么办?
#2

先赞,然后mark,最后我clone来看看

#3

超棒,谢谢分享!

#4

马克,支持楼主

#5

感谢楼上各位支持 :slightly_smiling_face:

#6

我自己再顶一下,好像关注服务端渲染的人不多 :sob:

#7

主要现在大家react玩的6的人都不多,何谈SSR,再加上同构,怕是有听都没听过的人吧

#8

求教,,Server端的热更新(无需重启node服务器),,,怎么实现啊?指条明路

#9

有很多办法,我是用webpackDevMiddleware + webpackHotMiddleware编译并热更新server端代码实现的。我是出于很多考虑才用这种方法的。详情见我自己写的插件:koa-webpack-server,一个中间件就完成所有开发环境配置。

如果你不用webpack编译优化你server端的代码,你可以考虑用chokidar去监控文件变化,如果有变化就把对应的require cache删除掉,当然你就需要动态require你的middleware进来。两种方案都可以,也是比较hacky吧…

最简单地,可以用babel-watch,是babel-node的升级版。顾名思义,自动watch你的文件变动并自动重启,是的,实际上还是重启了,只不过是自动的而已。好处/坏处,就是集成了babel环境,如果你有用那么它就有用,没用的话就是累赘LOL。

具体用哪种看你自己的情况吧。

#10

喜欢react,刚好又喜欢koa,mark!

#11

感谢支持 ~

#12

更新docker部署方法 ~

#13

mark 多谢分享

#14

感谢分享,非常好

#15

好东西多谢分享

#16

不错 感谢分享,非常好

#17

:+1::+1::+1:不错不错

#18

很赞,感谢分享 ~

#19

感谢分享,好用

#20

1K浏览了:scream:,自己顶一下