SSR在左，React Server Component在右

2020年已通过去了，可是有一项2020年的技术提案仍然值得研究，它就是React Server Component！没错，React团队又出新活儿了，学不动的同窗能够直接看本篇文章😸

已经有了SSR，为何还会有React Server Component这种东西出现呢？它们俩的区别是什么呢？

要解释这些问题，咱们先来看看Web渲染的发展历程。

web渲染发展历程

---

远古时期的前端代码，都是夹杂在Php、Jsp、Asp的代码中，而且整个页面由服务器来查询数据而且填充拼接，最终生成的是一个完整的HTML页面，返回给浏览器能够直接去解析展示，到如今有不少网站仍是这样的模式，好比下图这种：

随着时间的发展，这种模式的问题也逐步凸显。

从用户体验上来讲，每次在页面上点击一个tab切换，都有多是返回一个完整的Html，浏览器会从新刷新一次，这种体验是很难受的，由于有可能你在页面上勾选了一些状态会在刷新以后彻底消失掉，这会让人感受不是在使用一个应用，而是在不一样的几个单独页面之间来回切换，使用体验很是不流畅。

从开发体验上来讲，先后端的代码、仓库混在一块儿，前端工程师急须要独立的来作一些事情来提高开发体验和用户体验，此时Ajax技术出现了。

随着Ajax技术的普遍应用以及Vue、React、Angular等等技术的出现，前端单页应用愈来愈被前端工程师所接受。此时几乎全部的拉取数据、组装Html、渲染页面的工做都放到了前端来作，服务端的职责收敛到API请求来执行业务逻辑和获取数据，先后端的职责分明，分别把持网站的两头，中间是Http请求把他们串起来。

可是这种单页面应用的纯前端渲染也带来了一些问题，由于在首次请求的时候，服务器端只会返回一个几乎为空的Html（以下图），后续的内容数据都靠Ajax去动态的获取，若是要请求的数据不少的话，就会产生白屏，而且会有SEO问题。并且随着前端工程的膨胀，打包后的代码体积也会愈来愈大。

为了解决首次访问白屏问题以及SEO问题，你们把目光转向了SSR（服务端渲染），React社区推出了Next.js，Vue社区推出了Nuxt.js，它们都是在首次访问某页面时，直接在服务器端拼装一个完整的Html。

React Server Component

---

单页应用+部分页面SSR就是完美的方案吗？确定不是的。作技术的都知道每种方案只是符合某些条件下的特定场景而已，随着业务复杂度上升以及技术债的堆积，SSR的问题也凸显出来，若是一个页面请求的接口不少，那么这个页面在服务端就会花费很长的时间才能拼装完成，那么响应时间依然过长。并且搞过SSR的同窗都知道，这里面踩坑也很多。

到目前为止，咱们已经清晰的知道前端开发的痛点了：

1. 更好的用户体验：不能一言不合就白屏
2. 更好的开发体验：组件尽量的和业务解耦，不要写成一坨，更好维护
3. 更好的性能：尽量少的请求接口

对于权衡这3个痛点，React团队给出的解决办法是React Server Component，它可让你：

1. 在服务端运行React组件，而且这些组件永远不会被下载到浏览器中去，这样子就能够减少前端项目的打包体积
2. 完整的服务端访问能力，好比直接在React组件中读取文件、访问数据库，在官方给出的demo中也看到了react-fs、react-pg这样的库

而且它和SSR的区别在于：

1. SSR返回的是一个Html，而React Server Component返回的是一个React可解析的结构。
2. SSR返回的页面会让页面从新刷新，丢失掉以前页面上的状态，好比表单选中之类的；而React Server Component返回的并不会让页面从新刷新而丢失状态。

使用场景

---

以React官方给的介绍视频为例，假若有这么一个常见的业务需求，1个父组件内套了2个子组件，而且每一个子组件须要的数据不同：

为了尽可能的少发请求，咱们通常会用1个接口去拿到2份儿数据：

可是这样子作的问题是，2个子组件与父组件耦合太严重，不利于维护，因而咱们选择在2个子组件内各自请求数据：

可是这样子作相比上一种作法，多了2次接口请求，性能上会受影响，使用React Server Component重构来作就会是这样：

组件的业务数据拉取放在了服务端来作，而且服务端组件不会被打包到前端代码中，对于前端来讲，整个网络请求只有一次。

个人见解

---

React团队提出的这项技术，社区也有过相似的，但此次不一样的是它是基于React技术栈来作的，因此关注度和接受程度会比其余相似的技术更高一些。

从前端开发者角度来讲，这项技术把Component的能力从前端扩展到了后端，之后说不定各大公司会出现前端组件公共服务之类的技术基建，可能会在之后改变现有的前端开发模式。

总之，值得期待。

微信关注公众号「 前端耳东 」，每周持续更新文章，分享前端深度技术和职场经验，对你们前端进阶、面试找工做都有帮助。