zz_jesse的博客

为了方便各位读者能更清晰，更流畅的阅读这本小册，笔者在这里准备了一个内容导读。主要是为了说明笔者从 0 到 1 设计React SSR应用开发骨架的整体过程和思路，小册中每个章节的关系就像个链表结构，前后关联，层层递进、逐步深入、逐步完善。希望各位读者通过导读可以对这本小册的内容有一个宏观的了解和认知，以达到降低阅读成本，提升阅读收益的目的。小册内容分为五大部分搭建应用骨架的过程就像是盖房...

导读本节标题：「武装思想」- React SSR vs SSR vs CSR本节主旨：通过全面对比三种渲染模式，阐述为什么需要 react ssr开篇本文主要来介绍下SSR、CSR、React SSR 这三种渲染方式以及各自的优缺点。什么是 SSRSSR 的全称是Server Side Rendering，对应的中文名称是:服务端渲染，也就是将渲染的工作放在服务端进行。这种方式很早...

导读本节标题：「武装思想」- React SSR 根本原理本节主旨：全面分析 react ssr 技术的本质，并对对虚拟 dom、同构应用具体流程、双端对比机制进行说明。武装思想在动手搭建应用骨架前我们要先了解下react ssr 最根本的原理，这是整个技术架构实现的基础，也可以说是基石，可以理解为我们盖房子的地基。如果你对一些多技术感觉到陌生或者看过很多次仍然会忘记时，主要原因要么是...

导读本节标题：「小试牛刀」- 实现最基本的 React SSR本节主旨：完成最简单的ssr,体验组件直出的过程本节配套代码:https://github.com/Bigerfe/koa-react-ssr/tree/better/packages/base-react-ssr正文上一节我们介绍了react ssr的核心原理。这一节我们就来实操一下，实现一个单纯的 react ssr功...

导读本节标题：「小试牛刀」- 初步认识同构 - 交互实现本节主旨： 基于上一节，尝试引出最明显的问题，分析问题，逐步解决问题，实现可交互的 react ssr 应用本节配套代码:https://github.com/Bigerfe/koa-react-ssr/tree/better/packages/my-react-ssr正文上一节，我们实现了一个react ssr版的hello w...

导读本节标题：「建造毛坯」- 开发体验升级本节主旨：工欲善其事，必先利其器，构建开发环境，提高开发体验，实现双端代码的自动编译以及服务的自动重启(手动实现多进程模型)本节配套代码:https://github.com/Bigerfe/koa-react-ssr/tree/better/packages/my-react-ssr1正文前几节我们了解并实现了组件的直出和基本同构，完成了一个...

导读本节标题：「建造毛坯」- 双端路由同构本节主旨： 继续以发现问题，分析问题，解决问题的思路，来实现多路由的双端同构，重点在于服务端和客户端如何处理本节配套代码：https://github.com/Bigerfe/koa-react-ssr/tree/better/packages/my-react-ssr2正文前面几节我们实现了一个最基础的 react ssr，同时也初步接触了同...

导读本节标题：「建造毛坯」- 双端数据同构本节主旨： 不可缺少的副作用处理，实现双端异步数据的获取，数据脱水，数据注水，重点在于如何利用同构来实现本节配套代码：https://github.com/Bigerfe/koa-react-ssr/tree/better/packages/my-react-ssr-dataiso正文上一节我们实现了应用骨架的路由同构，这一节我们来实现非常重要...

导读本节标题：「建造毛坯」- SEO TDK 支持本节主旨：解决 SPA 的不足，两种方式实现 TDK 直出，达到 SEO 优化的目的本节配套代码：https://github.com/Bigerfe/koa-react-ssr/tree/better/packages/my-react-ssr-seo0https://github.com/Bigerfe/koa-react-ssr/t...

导读本节标题：「建造毛坯」- CSS 资源处理本节主旨：CSS 模块无法在服务端解析，通用的 CSS 资源处理方式本节配套代码：https://github.com/Bigerfe/koa-react-ssr/tree/better/packages/my-react-ssr-css正文从我们开始搭建应用骨架到这里，这一路我们发现了很多问题，也解决了很多问题,这个收获是巨大的。但总...

导读本节标题：「工程竣工 」- 构建生产环境本节主旨：从0实现生产环境下双端构建和资源处理本节配套代码：https://github.com/Bigerfe/koa-react-ssr/tree/better/packages/my-react-ssr-prod正文诶？这么快就到生产环境了吗？我们的开发环境还没彻底完善呢，之前遗留的手动刷新页面才能看到最新效果的问题呢？是的，的确有些...

导读本节标题：「装修阶段」- 双服务模式热更新本节主旨：开发环境体验再度优化升级，实现模块热替换机制本节配套代码：https://github.com/Bigerfe/koa-react-ssr/tree/better/packages/my-react-ssr-HMR正文上一节我们完成了生产环境的配置，从本节开始一起来做一些“装修”的工作，让应用骨架的开发体验更好,同时也是解决我们之...

导读本节标题：「装修阶段」- 基于路由的按需渲染本节主旨：页面渲染性能优化，实现基于路由的拆分，按需渲染，需要特别注意双端路由如何处理本节配套代码：https://github.com/Bigerfe/koa-react-ssr/tree/better/packages/my-react-ssr-routesplit---正文react ssr 下的路由分割 - 按需渲染到这里，我们...

导读本节标题：「装修阶段」- 使用高阶组件优化数据同构本节主旨：替代简陋版的数据同构，使用高阶组件进行优化，逻辑复用，开发更轻快本节配套代码：https://github.com/Bigerfe/koa-react-ssr/tree/better/packages/my-react-ssr-dataisobetter正文在之前的小节中我们已经完成了数据同构，如果用来进行实际项目开发的话...

导读本节标题：「装修阶段」- CSS 资源同构处理本节主旨：利用同构，实现 CSS 资源按需直出，提升 CSS 资源的加载速度，提升页面性能本节配套代码：https://github.com/Bigerfe/koa-react-ssr/tree/better/packages/my-react-ssr-cssiso正文之前的小节中我们已经对 css做过处理，将所有的css打包到一个文件...

导读本节标题：「装修阶段」- 添加状态管理 redux本节主旨：完善骨架模型，支持 redux 状态管理，重点关注如何实现数据同构本节配套代码：https://github.com/Bigerfe/koa-react-ssr/tree/better/packages/my-react-ssr-redux正文小册的内容进行到这里，本应用骨架的搭建已经接近尾声，整体上目前已经比较完善，可以...

导读本节标题：CSR/SSR双模式渲染支持以及其他细节梳理本节主旨：前面没有关注小细节，这里合并起来统一说明，如双模式渲染、跨平台处理、前端模块 hack、跨端访问等正文本节主要是补充一下以前没有提到的一些细节和一些问题以及解决思路，以便于我们可以更方便的应用本骨架进行业务开发，减少前期的一些时间准备成本。本来打算将csr/ssr双模式渲染作为独立章节来说，但是具体的实现很简单，作为独立...

导读本节标题：对比业内已有框架的实现本节主旨：对比业内 next.js，egg-react-ssr 的实现方案，验证自身实现的标准性正文react ssr 到现在已经不是新技术，技术原理也不复杂，但是真要自己弄出一个完整的轮子并非易事，有非常多的细节和边边角角需要处理。所以除了自己来造轮子，我们还可以站在巨人的肩膀上，直接使用业内现成的框架进行开发。造轮子可以，但是不要闭门造车，所以本...

导读本节标题：React SSR 项目实战本节主旨： 通过一个小项目，来全面的感受下自己的骨架本节配套代码：https://github.com/Bigerfe/koa-react-ssr/tree/better/packages/ssr-demo-simple正文前面我们用了大量的时间来讲述原理和以及每一步具体的实现。到这里我们的应用骨架已经搭建完成，剩下的就是应用和升级。本节我...

前方的路 - 是结束更是开始到这里小册的内容就告一段落了,我们从基础原理到具体实战，从零开始一步一个脚印，深入每个细节，发现问题、分析问题、解决问题，最终我们一起搭建完成了React SSR应用开发骨架。感谢你能够持续读到这里，相信你已经在这个小册里得到你想要的答案。另外说说自己写小册的一些心得和收获。写成一本小册真不是件容易的事儿，给我的最大的感觉就是“痛苦”。一方面是时间问题，只能...