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的能力从前端扩大到了后端，当前说不定各大公司会呈现前端组件公共服务之类的技术基建，可能会在当前扭转现有的前端开发模式。

总之，值得期待。

微信关注公众号「 前端耳东 」，每周继续更新文章，分享前端深度技术和职场教训，对大家前端进阶、面试找工作都有帮忙。