React Server Components (RFC)

In an upcoming Next.js release, React and Next.js developers will be able to use Server Components inside the directory as part of the changes outlined by the Layouts RFC.

React Server Components improve the user experience of your application by pairing the best parts of server-rendering with client-side interactivity.

For example, large dependencies that previously would impact the JavaScript bundle size on the client can instead stay entirely on the server. By sending less JavaScript to the browser, the time to interactive for the page is decreased, leading to improved Core Web Vitals.

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.

The Next.js team at Vercel released the Layouts RFC a few months ago outlining the vision for the future of routing, layouts, and data fetching in the framework. These changes aren’t available yet, but we can start learning about how they will be used.

Pages and Layouts in app will be rendered as React Server Components by default. This improves performance by reducing the amount of JavaScript sent to the client for components that are not interactive. Client components will be able to be defined through either a file name extension or through a string literal in the file.