理解 React 服务器组件

理解 React 服务器组件
自从 React 被引入开发社区以来的十年里，它经历了几次演变。React 团队在发生根本性变革时并不害羞：如果他们发现了一个更好的问题解决方案，他们就会带着它运行。

几个月前，React 团队推出了 React Server Components，这是最新的范式转变。有史以来第一次，React 组件可以只在服务器上运行。

网上对此有太多的困惑。很多人对这是什么、它是如何工作的、好处是什么以及它如何与服务器端渲染等东西结合在一起有很多疑问。

我一直在做很多关于 React Server Components 的实验，我已经回答了很多我自己的问题。我不得不承认，我对这些东西比我预期的要兴奋得多。真的很酷！

所以，我今天的目标是帮助你揭开这些东西的神秘面纱，回答你可能对 React 服务器组件的很多疑问！

本教程主要是为已经在使用 React 并且对 React 服务器组件感到好奇的开发人员编写的。你不需要成为 React 专家，但如果你刚刚开始使用 React，这可能会很混乱。
文章目录
服务器端渲染快速入门

要将 React Server Components 置于上下文中，了解服务器端渲染（SSR）的工作原理会很有帮助。如果您已经熟悉 SSR，请随时跳到下一个章节！

当我在 2015 年第一次开始使用 React 时，大多数 React 设置都使用“客户端”渲染策略。用户将收到如下所示的 HTML 文件：
```
DOCTYPE html>
<html>
  <body>
    <div id="root">div>
    <script src="/static/js/bundle.js">script>
  body>
html>
1
2
3
4
5
6
7
```
该 bundle.js 脚本包括我们挂载和运行应用程序所需的一切，包括 React、其他第三方依赖项以及我们编写的所有代码。

一旦 JS 被下载和解析，React 就会立即开始行动，为我们的整个应用程序召唤所有 DOM 节点，并将其存放在那个空的
中。

这种方法的问题在于完成所有这些工作需要时间。当这一切发生时，用户盯着一个空白的白色屏幕。随着时间的推移，这个问题往往会变得更糟：我们发布的每个新功能都会为我们的 JavaScript 包增加更多的千字节，从而延长用户必须坐下来等待的时间。

服务器端渲染旨在改善此体验。服务器不会发送空的 HTML 文件，而是渲染我们的应用程序以生成实际的 HTML。用户会收到一个格式完整的 HTML 文档。

该 HTML 文件仍将包含

文章目录

服务器端渲染快速入门