React Server Components：它们真的能提升性能吗？

Have you heard of React Server Components? You probably have. It's everything anyone talks about in the React community in the last few years. It's also the most misunderstood concept I feel.

你听说过 React Server Components 吗？你可能听说过。它是最近几年 React 社区中每个人都在谈论的一切。我觉得它也是最被误解的概念。

To be totally honest with you, I didn't get their point for a while either. It's way too conceptual for my practical mind. Plus, we could fetch data on the server with Next.js and APIs like getServerSideProps waaay before any Server Components were introduced. So what's the difference?

老实说，我有一段时间也没明白他们的意思。这对我实际思维来说太概念化了。而且，我们早在任何 Server Components 引入之前，就可以用 Next.js 和像 getServerSideProps 这样的 API 在服务器上获取数据。那么有什么区别呢？

Only when I compared how all those patterns differ from an implementation point of view, how data is fetched across different rendering techniques, and when I traced the performance impact of each of them in different variations, it finally clicked.

只有当我比较了所有这些模式从实现角度的差异、不同渲染技术中数据获取的方式，以及追踪了它们在不同变体中的性能影响时，我才终于开窍。

So this is exactly what this article does. It looks into how Client-Side Rendering, Server-Side Rendering, and React Server Components are implemented, how JavaScript and data travel through the network for each of them, and the performance implications of migrating from CSR (Client-Side Rendering) to SSR (Server-Side Rendering) to RSC (React Server Components).

所以这正是本文所做的。它深入探讨了客户端渲染、服务端渲染和 React Server Components 的实现方式，它们各自的 JavaScript 和数据如何通过网络传输，以及从 CSR (Client-Side Rendering) 迁移到 SSR (Server-Side Rendering) 再到 RSC (React Server Components) 的性能影响。

I implemented a semi-real multi-page app to measure all of this, so this will be fun! It's available on GitHub in case you want to replicate the experiments yourself.

我实现了一个半真实的 multi-page app 来测量所有这些，所以这会很有趣！它在 GitHub 上可用，以防你想自己复制实验。

I'm going to assume you've at least heard of Initial Load, Client-Side Rendering, Server-Side Rendering, the Chrome Performance tab, and how to read it. If you need a refresher, I have a few articles I recommend reading first, in this order:

我将假设你至少听说过...