React Server Components and Next.js App Router: A Deep Dive
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:
- Stateless React components designed to run on the server
- Facilitate a seamless code transition experience, also referred to as “knitting,” between server and client components
- Incorporate data fetching as an integral part of the component tree, allowing for top-level await and server-side data serialization
- RSCs share similarities with Astro components in their server-only mental model
- RSC protocol enables the server to expose a special endpoint for the client to request parts of the component tree, allowing for SPA-like routing with MPA-like architecture
- Adoption of RSCs depends on frameworks implementing the feature
- The React team believes RSCs will eventually be widely adopted and change the ecosystem
- Introduce async/await as the primary way to do data fetching from Server Components
- Plan to support client-side data loading with the “use()” hook unwrapping Promises
- React Server Components act as a spec for components working across compatible React frameworks, including Next.js
How is the Next.js App Router related to Server Components?
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:
- Components in the app directory are React Server Components by default, promoting automatic adoption and improved performance
- React Server Components provide benefits such as leveraging server infrastructure and keeping large dependencies server-side, leading to better performance and reduced client-side bundle size
- Next.js App Router combines server rendering and client-side interactivity, progressively enhancing the application for a seamless user experience
- Client Components can be added to introduce client-side interactivity, similar to the functionality in Next.js 12 and earlier versions
- “use client” directive used to mark components as Client Components
- Components without the “use client” directive automatically rendered as Server Components if not imported by another Client Component
- Server and Client Components can be interleaved in the same component tree, with React handling the merging of both environments
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.
- Combines build-time, server, and client rendering to create a more flexible approach to web development
- 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)
- Challenges traditional terminology (SPA, MPA, SSR, SSG) as the landscape of web development converges towards hybrid rendering
- Emphasizes the need for new terminology to better describe modern web development practices
- 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
- Provides benefits of SPAs (no server needed) while avoiding issues with static rendering (navigation without page reloads)
- React Server Components and Next.js App Router demonstrate the potential of hybrid rendering in action
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:
- React.dev new docs: how to start a new project
- New React docs pretend SPAs don’t exist anymore
- Dan Abramov on possible futures for CRA - “client-only doesn’t make sense. way too limiting”
- “petition to retire terms: SPA, MPA, SSR, SSG. they represent the previous generation of tools”
- “most modern React frameworks don’t require a Node.js server anymore. they just let you add one if you need it.”
- Next.js example - purely client-side SPA (no Node.js server, 100% static bundle)
- How to start a React Project in 2023
- Rethinking React best practices