React SSR 服务端渲染原理解析与实践

全网最完整的 React SSR 同构技术原理解析与实践,从零开始手把手带你打造自己的同构应用开发骨架,帮助大家彻底深入理解服务端渲染及底层实现原理,学完本课程,你也可以打造自己的同构框架。
1.1K+ 购买
打开
作者 zz_jesse
发布时间 2020-03-11 02:06
更新时间 2020-09-19 15:50

作者介绍

zz_jesse,全栈工程师、公众号「前端技术江湖」作者、react ssr 应用开发骨架「zz.js」作者。

早期做过前后端开发,目前专注前端领域、爱折腾、爱分享。

小册介绍

到如今React SSR技术已并非新技术,实现起来也不是那么困难,应用的场景也越来越多。

且业内也有很多知名的开发框架next.jsnuxt.js等可以让你无需关心底层,只需关注自己的业务开发,就像开发SPA应用一样容易。

这些框架虽然简单易用,但是由于黑盒,高度封装,很难窥探其底层原理和实现,所以很多开发者也仅仅停留在使用层面。另外网上也有很多相关的技术文章,但大多良莠不齐,不成体系。所以要想真正理解并掌握这项技术所需要的成本非常高。

我本人接触并学习React SSR是由于工作的需要,后又经过一段时间的深入学习和实践,当时也恰巧业内还没有基于koa2React SSR开发骨架,所以干脆写成一个开源项目 zz.js,技术栈是react+node+koa2+webpack

项目构建期间查阅了大量的资料,但最终还是需要通过实践来验证所有的认知和理解。后来为了验证和升级自己的轮子,参考了一些业内框架的实现,将其中较好的实现用于自己的轮子,虽然实现细节不同,但是原理大同小异。

目前zz.js,已经比较完备,可以用于实际的项目开发,由于是全白盒,所以可以非常方便进行二次开发和改造。

现在借助这本小册,将本人对React SSR技术的理解和认知整理成文,带你从基础原理出发,同时结合大量实践,步步为营,发现问题、分析问题、解决问题的方式,从零开始打造一个完整的开发骨架。

这个过程就像是盖房子,从地基开始,逐步的建造。最后让你对本技术的原理和在搭建SSR框架的实现细节以及问题排查和处理有一个非常详细且完整的认知和理解,最后你也可以搭建属于自己的SSR开发框架。

希望这本小册可以帮你答疑解惑,降低你的学习成本,快速掌握本技术。

小册主要内容

有愿景的小册

小册特点 - 全面、完整、涉及原理、实践、细节、开发环境、生产环境、多版本同构(有状态管理、无状态管理、双模式渲染)。

小册愿景 - 帮助那些对 react ssr 技术有兴趣的同学解惑答疑,让你彻底理解并掌握这项技术。

可以系统学习,也可以作为一本参考资料,需要时翻阅一下。

技术栈

react 16
koa2
node
react-router5
babel7
webpack4
webpack-dev-server
其他辅助...

你会学到什么?

学基础、学原理、学习从0到1如何搭建一个完整的应用骨架,彻底理解React SSR技术,最后可以搭建属于自己的SSR应用骨架。

  • 彻底理解 React SSR 的核心原理
  • 彻底理解同构
  • 如何打造同构应用
  • 数据同构
  • 路由同构
  • 路由分割
  • CSS 同构
  • 使用高阶组件进行优化
  • React 结合 Redux 的同构应用打造
  • 服务端和客户端的 webpack 配置
  • 如何配置生产环境
  • node 子进程的应用
  • 一个项目骨架从0到1的开发和设计过程

适宜人群

  • 初中高级前端工程师
  • 了解传统服务渲染技术
  • React SSR 技术感兴趣的小伙伴,无论你用的是 react 还是 vue,原理相同
  • react node koa 有基本的了解和应用

购买须知

  1. 本小册为图文形式内容服务,共计 20 节;
  2. 全部文章预计 2 月 10 日更新完成;
  3. 购买用户可享有小册永久的阅读权限;
  4. 购买用户可进入小册微信群,与作者互动;
  5. 掘金小册为虚拟内容服务,一经购买成功概不退款;
  6. 掘金小册版权归北京北比信息技术有限公司所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表,违者将依法追究责任;
  7. 在掘金小册阅读过程中,如有任何问题,请邮件联系 xiaoce@xitu.io
  1. 「小册导读」- 不迷路
  2. 「武装思想」- React SSR vs SSR vs CSR
  3. 「武装思想」- React SSR 根本原理
  4. 「小试牛刀」- 实现最基本的 React SSR
  5. 「小试牛刀」- 初步认识同构 - 交互实现
  6. 「建造毛坯」- 开发体验升级
  7. 「建造毛坯」- 双端路由同构
  8. 「建造毛坯」- 双端数据同构
  9. 「建造毛坯」- SEO TDK 支持
  10. 「建造毛坯」- CSS 资源处理
  11. 「工程竣工 」- 构建生产环境
  12. 「装修阶段」- 双服务模式热更新
  13. 「装修阶段」- 基于路由的按需渲染
  14. 「装修阶段」- 使用高阶组件优化数据同构
  15. 「装修阶段」- CSS 资源同构处理
  16. 「装修阶段」- 添加状态管理 redux
  17. CSR/SSR双模式渲染支持以及其他细节梳理
  18. 对比业内已有框架的实现
  19. React SSR 项目实战
  20. 前方的路 - 是结束更是开始