Hi, I'm Rodo 👋

I'm a Software Engineer

Rodolfo Guluarte Hale

Hi, I'm Rodo 👋

I'm a Software Engineer

React Server Components and Next.js App Router: A Deep Dive

5 minutes
May 18, 2023

In recent times, there have been numerous discussions within the React community concerning the state of Server Components, the Next.js App Router, and the future of tooling and rendering approaches. This article aims to provide a concise summary of these concepts and discussions.

What are React Server Components (RSC)?

React Server Components (RSC) are stateless React components designed to run on the server. They facilitate a seamless code transition experience, also referred to as “knitting,” between server and client components. Here are some key points about RSC:

Next.js 13+ introduced the App Router with new features, conventions, and support for React Server Components. Components in the app directory are React Server Components by default, promoting automatic adoption and improved performance. Here are some key points about the Next.js App Router:

What RSC implementations are available (outside of Next.js)?

There are several implementations of RSC available outside of Next.js. These include a simple implementation from Ben Holmes & Dan Abramov, Vite + RSC exploration from Fatih Aygun, Webpack RSC exploration from Hendrik Liebau, and an official demo without a framework (without SSR).

Why a Production Framework (like Next.js or Remix) instead of Create React App?

Create React App (CRA) offers a limited, client-only development experience, which is too limiting for many modern web applications. Modern frameworks, such as Next.js and Gatsby, already offer the ability to start 100% static + client, with HTML generation, file-based routing, SPA navigations, and real client code. These frameworks also allow developers to easily utilize server-side rendering for dynamic routes, such as reading from a database instead of a file, without rewriting the whole application.

What examples of RSC + Next App Router do you recommend?

There are several examples of

RSC + Next App Router that you might find helpful:

Are we moving towards more “hybrid” rendering?

Yes, we are moving towards a more flexible approach to web development that combines build-time, server, and client rendering. This approach focuses on delivering an optimal result in the end: if a page can be served statically, it will be; otherwise, a dynamic strategy will be chosen instead (e.g., ISR and/or SSR, CSR + Streaming for subsequent navigations). This represents a mental shift in how developers approach web development, moving from a client-only starting point to a more versatile combination of rendering strategies.

As the landscape of RSC and App Router begins to settle, we will be aiming to follow along and update our guidance on Server Components over on Patterns.dev. For now, I hope you find the above notes helpful.

References: