React Server Components 介绍 亮点

2020年12月21日，圣诞节前夕，React团队发了关于React Server Components的博客和RFC。一方面是公布他们关于React的进展，另一方面是希望吸取业界的反馈。
本文解答：什么是React Server Components？有什么亮点？

前端简史

• 【静态】在最早的时候是根本没有前端或者后端的概念的。当时就是用 Dreamweaver 写 html 静态页面，然后部署到一台电脑的 IIS (Internet Information Services) 上。当请求这个页面时，返回这个 html 文件。
• 【模版】再后面一点，服务端变得复杂了一些，html 页面开始使用各种模板来写，譬如 Java 系列的 FreeMarker，还有 ASP 、 PHP 等等。此时，前后端开发是一体的，最多也就是模板的编写算是最初的前端范畴，但那个时候，这个活儿往往都是现在的后端开发去干的。
• 【Web2.0】随着 2005年 Ajax (Asynchronous JavaScript and XML) 的诞生，彻底得改变了这一切。JS 脚本可以独立向服务器请求数据，拿到数据后，进行处理并更新网页，这个过程中，后端只负责提供数据，其他事情都由前端来做。不夸张的说，这一年算得上是 Web 开发技术发展的元年。Web也从 1.0 的时代，步入 2.0 的时代。促进了前后端的分离。
• 【MVC】前端可以通过 Ajax 获取数据，因此也就有了处理数据的需求，于是就促使了前端 MVC 的诞生。在这个阶段的后期，前端逐渐开始有了一点工程化的影子，并且开始受 CommonJS 的影响，有了模块化编程的概念，诞生了相应的 CMD 和 AMD 的规范。开始有了构建工具 Grunt/Gulp，开始有了编码的规范 JsLint。
• 【MVVM】MVVM 同样是一种软件架构模式，它是在 MVC 的基础上演进过来的，去掉了 MVC 中的 Controller，增加了数据的双向绑定。最有代表性的框架就是 Google 公司推出的 Angular， 它的风格属于 HTML 语言的增强，核心概念就是数据双向绑定。
• 【SPA】用户第一次发起页面请求时，后端返回HTML、 CSS 和 JS文件。JS 文件包括了页面切换逻辑的处理，这是单页应用实现的关键，它利用 Hash 或者 History 的技术，实现了当切换页面时，首先通过 Ajax 获取到新页面需要的数据，然后由 JS 根据要切换到的网址，使用获取到的数据来拼接出要展示页面的 HTML。整个切换页面的动作全部由前端来完成了。这就是单页应用，所有的资源只在第一次页面请求时被加载，后面都只会发起 Ajax 请求获取数据而已。
• 【SSR】SPA 让 web 变成了应用的形态，它是客户端渲染（client side render）。客户端渲染有它的弊端，譬如没法做 SEO(Search Engine Optimization)，由于所有的 JS 和 CSS会在首次访问时被全部加载，并且 HTML 是在前端组装的，就势必导致首屏加载以及渲染的时间会增加，影响用户体验（不过有了代码分割，只要不需要SEO，SPA现在依然是最流行的方案）。目前NextJS是个不错的SSR框架。此外umi也支持SSR，也支持SSR失败时自动降级为CSR。

背景

Good & Cheap & Fast

Dan在视频开头，提到了Project Management中的概念：一个项目中，Good、Cheap、Fast三种属性很难同时具备，通常只能追求其二的极致。这同样适用于React开发：好的用户体验、低成本的代码维护、快的性能。

举个例子：一个典型的展示组件的例子。
给一个作曲家id，渲染他的详情页，里面可以看到他的TopTracks，Discography。当然，TopTracks和Discography不一定非要在详情页可以看到（其他地方也可以引用，希望它是公共的，不是详情页私有的组件）

好的用户体验、快的性能

如果能够在父组件统一获取数据，再传递数据给子组件，那么性能是快的，避免了多个API请求。用户体验也好。但是维护成本又高，每个数据需要一层一层传递下去，如果API做了改动，每个子组件都要改；此外要复用TopTracks和Discography的话，就需要在其它地方重新写获取数据的逻辑。