React 服务器组件与服务器端渲染 (SSR) 之间的区别

SSR 是关于初始页面加载的

React 服务器组件始终在服务器上渲染

React 服务器组件更有可能减少包大小

结论

2020 年 12 月，React 团队推出了一项名为 React 服务器组件 (React Server Components) 的实验性功能。你可能会好奇，这些“服务器组件”与服务器端渲染 (SSR) 究竟有何不同。

如果您喜欢这篇文章，请给它一个💓、🦄或🔖，并考虑订阅📬我的免费每周开发者新闻通讯

SSR 是关于初始页面加载的

使用 SSR 时，您会将 HTML 发送到客户端，然后加载所有典型的 React JavaScript。JavaScript 加载完成后，应用程序即被视为已完成“hydrated”（水合），并恢复为可正常运行的客户端 React 应用。这意味着，在初始页面加载后，您的应用本质上与未使用 SSR 时一样，仍然是原来的 React 应用。在 SSR 中，除了首次页面加载是纯 HTML 之外，所有组件仍然是客户端组件！

TL;DR：SSR 基本上就是让初始加载看起来更像传统的服务器渲染应用程序。

React 服务器组件始终在服务器上渲染

React 服务器组件始终在服务器上渲染。这些组件很可能正在从后端获取数据，因此将这些组件的渲染与正在获取的数据放在一起是合理的。每当这些组件需要重新渲染时，它们都会从服务器重新获取，并合并到现有的客户端 React 组件树中。这样做的好处是，即使我们从服务器重新获取部分视图，客户端状态也会被保留。

React 服务器组件更有可能减少包大小

由于服务器端渲染 (SSR) 应用与初始页面加载有关，因此客户端在浏览应用时很可能会下载所有依赖项（毕竟，在首次页面加载后，它就变成了客户端应用）。但是，如果您依赖了 React 服务器组件，这些依赖项将始终只存在于服务器上，因为这些 React 服务器组件在渲染完成之前不会发送到前端。

结论

虽然 React 服务器组件和 SSR 都涉及一些服务器端的 React 渲染，但它们实际上有很大不同！RSC 是一个非常有趣的开发，我当然期待了解更多关于它们的知识。