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

总之，值得期待。

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