Fluent React

Chapter 9. React Server Components

In the previous chapter, we dove into the world of React frameworks, particularly focusing on Next.js and Remix. We explored the reasons why you might choose to use a framework in the first place, including the benefits of abstraction, the conventions that speed up development, the comprehensive solutions they offer for common problems, and their overall impact on enhancing productivity.

We delved into the details of Remix and Next.js, demonstrating the common approaches each framework takes to solve similar problems by implementing our own bare-bones framework, and teased Next.js’ server-first direction, fully embracing React Server Components (RSCs).

Speaking of RSCs, they are an interesting trend in the React ecosystem designed to improve the performance, efficiency, and user experience of React applications. This advanced application architecture combines the best aspects of server rendered multipage apps (MPAs) and client-rendered SPAs, delivering a seamless user experience without compromising on performance or maintainability. In this chapter, we will discuss the core concepts, benefits, and underlying mental models and mechanisms around which RSCs work. For the latest information, always visit react.dev.

RSCs introduce a new type of component that “runs” on the server and is otherwise excluded from the client-side JavaScript bundle. These components can run during build time, allowing you to read from the filesystem, fetch static content, ...