React Server Components allow developers to build apps that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering. React Server Components are still in research and development, but we can start learning today how they'll help reduce tradeoffs and create faster React applications.
React Server Components improve the user experience of your application by pairing the best parts of server-rendering with client-side interactivity.
With traditional React applications that are client-side only, developers often had to make tradeoffs between SEO and performance. Server Components enable developers to better leverage their server and achieve great performance by default.
Server-side Rendering (SSR) dynamically builds your application into HTML on the server. This creates faster load times for users by offloading work from the user's device to the server, especially those with slower internet connections or older devices. However, developers still pay the cost to download, parse, and hydrate those components after the initial HTML loads.
React Server Components, combined with Next.js server-side rendering, help eliminate the tradeoff of all-or-nothing data fetching. You can progressively show updates as your data comes in.
The Next.js team has created two demos showing how to use React Server Components with Next.js. This feature is still experimental and should not be used in production yet.