全网最完整的 React SSR 同构技术原理解析与实践，从零开始手把手带你打造自己的同构应用开发骨架，帮助大家彻底深入理解服务端渲染及底层实现原理，学完本课程，你也可以打造自己的同构框架。

前段时间一直在研究react ssr技术，然后写了一个完整的ssr开发骨架。今天写文，主要是把我的研究成果的精华内容整理落地，另外通过再次梳理希望发现更多优化的地方，也希望可以让更多的人少踩一些坑，让跟多的人理解和掌握这个技术。

相信看过本文（前提是能对你的胃口，也能较好的消化吸收）你一定会对 react ssr 服务端渲染技术有一个深入的理解，可以打造自己的脚手架，更可以用来改造自己的实际项目，当然这不仅限于 react ，其他框架都一样，毕竟原理都是相似的。

为什么要服务端渲染(ssr)

至于为什么要服务端渲染，我相信大家都有所闻，而且每个人都能说出几点来。

在 SPA 模式下，所有的数据请求和 Dom 渲染都在浏览器端完成，所以当我们第一次访问页面的时候很可能会存在“白屏”等待，而服务端渲染所有数据请求和 html内容已在服务端处理完成，浏览器收到的是完整的 html 内容，可以更快的看到渲染内容，在服务端完成数据请求肯定是要比在浏览器端效率要高的多。

有些网站的流量来源主要还是靠搜索引擎，所以网站的 SEO 还是很重要的，而 SPA 模式对搜索引擎不够友好，要想彻底解决这个问题只能采用服务端直出。改变不了别人（搜索yinqing），只能改变自己。

只实现 SSR 其实没啥意义，技术上没有任何发展和进步，否则 SPA 技术就不会出现。

但是单纯的 SPA又不够完美，所以最好的方案就是这两种体验和技术的结合，第一次访问页面是服务端渲染，基于第一次访问后续的交互就是 SPA 的效果和体验，还不影响SEO 效果，这就有点完美了。

单纯实现 ssr 很简单，毕竟这是传统技术，也不分语言，随便用 php 、jsp、asp、node 等都可以实现。

但是要实现两种技术的结合，同时可以最大限度的重用代码（同构），减少开发维护成本，那就需要采用 react 或者 vue 等前端框架相结合 node (ssr) 来实现。

本文主要说 React SSR 技术 ,当然 vue 也一样，只是技术栈不同而已。

整体来说 react 服务端渲染原理不复杂，其中最核心的内容就是同构。

在把最终的 html 进行输出前需要将数据注入到浏览器端(注水)，server 输出(response)后浏览器端可以得到数据(脱水)，浏览器开始进行渲染和节点对比，然后执行组件的componentDidMount 完成组件内事件绑定和一些交互，浏览器重用了服务端输出的 html 节点，整个流程结束。

技术点确实不少，但更多的是架构和工程层面的，需要把各个知识点进行链接和整合。

路由匹配其实就是对 组件path 规则的匹配，如果规则不复杂可以自己写，如果情况很多种还是使用官方提供的库来完成。

react-router-config 这个库由react 官方维护，功能是实现嵌套路由的查找，代码没有多少，有兴趣可以看看。

文章走到这里，相信你已经知道了路由同构，所以上面的第一个问题 ： 【双端路由如何维护？】 解决了。

这里开始解决我们最开始发现的第二个问题 - 【获取数据的方法和逻辑写在哪里？】

数据预取同构，解决双端如何使用同一套数据请求方法来进行数据请求。

先说下流程，在查找到要渲染的组件后，需要预先得到此组件所需要的数据，然后将数据传递给组件后，再进行组件的渲染。

我们可以通过给组件定义静态方法来处理，组件内定义异步数据请求的方法也合情合理，同时声明为静态（static），在 server 端和组件内都也可以直接通过组件（function） 来进行访问。

//数据预取方法 静态 异步 方法

Async 容器组件接收一个 props 传过来的 load 方法，返回值是 Promise类型，用来动态导入组件。

没有介绍结合 redux 状态管理的 ssr 实现，其实也不复杂，关键还是看业务中是否需要使用redux，因为文中已经实现了使用 context 传递数据，直接改成按store 传递也很容易,但是更多的还是对 react-redux 的应用。

//渲染入口 代码仅供参考 

服务端同构渲染虽然可以提升首屏的出现时间，利于 SEO，对低端用户友好，但是开发复杂度有所提高，代码需要兼容双端运行（runtime）,还有一些库只能在浏览器端运行，在服务端加载会直接报错，这种情况就需要进行做一些特殊处理。

同时也会大大的增加服务端负载，当然这都容易解决，可以改用renderToNodeStream() 方法通过流式输出来提升服务端渲染性能，可以进行监控和扩容，所以是否需要 ssr 模式，还要看具体的产品线和用户定位。

本文最初从 react ssr 的整体实现原理上进行说明，然后逐步的抛出问题，循序渐进的逐步解决，最终完成了整个React SSR 所需要处理的技术点，同时对每个技术点和问题做了详细的说明。

但实现方式并不唯一，还有很多其他的方式， 比如 next.js, umi.js,但是原理相似，具体差异我会接下来进行对比后输出。

由于上面文中的代码较为零散，恐怕不能直接运行。为了方便大家的参考和学习，我把涉及到代码进行整理、完善和修改，增加了一些基础配置和工程化处理，目前已形成一个完整的开发骨架，可以直接运行看效果，所有的代码都在这个骨架里，欢迎star 欢迎 下载，交流学习。

很多东西都可以基于你现有的知识创造出来。

只要明白了其中的原理，然后梳理出实现的思路，剩下的就是撸代码了，期间会大量的自动或被动的从你现有的知识库里进行调取，一步一步的，只要不怕麻烦，都能搞得定。

这也是我为什么上来先要说下reac ssr 原理 的原因，因为它指导了我的实践。

全文都是自己亲手一个一个码出，也全部都是出自本人的理解，但个人文采有限，所以导致很多表达说的都是大白话，表达不够清楚的地方还请指出和斧正，但是真正的核心已全部涵盖。

希望本文的内容对你有所帮助，也可以对得住我这个自信的标题。

更多精彩好玩有用的前端内容，请关注公众号《前端张大胖》