Premium Workshop: Inside React Server Components

Server-side rendering (SSR) is back in the spotlight. In this workshop, we’ll explore the mechanics, trade-offs, and modern techniques of SSR with React.js. We’ll start by building an SSR app from scratch, without any frameworks, just raw renderToString and hydrateRoot, to truly understand how React renders on the server and hydrates on the client. From there, we’ll upgrade to React 18’s streaming capabilities using renderToPipeableStream, implement selective hydration with Suspense, and integrate data fetching directly into the server render cycle. We’ll look at React Server Components (RSC) and show how they complement SSR. Finally, we’ll peek under the hood of the official RSC implementation to get a sense of how it actually works.

The workshop focuses on understanding how server components actually work by implementing their underlying machinery step by step, starting from basic APIs and building up to more advanced concepts.

What will attendees learn?

In this hands-on workshop, attendees will learn how  React server rendering and Server Components work by building them from the ground up, including:

• Basic server-side rendering
• Server-side rendering with data fetching
• The client side. Hydrating React components
• The anatomy of HTTP streaming
• Streaming React components using Suspense
• Recognising client boundaries and implementing a bridge solution
• Implementing server actions. The anatomy of server functions
• Exploring how frameworks like Next.js do it

Who is the workshop for?

• React developers who want to understand what happens when React runs on the server. This workshop is ideal for engineers using frameworks like Next.js who want to go beyond abstractions and gain a deeper understanding of SSR and Server Components.

What are the attendee requirements?

• A computer and a GitHub account
• A shared repository will be provided during the workshop
• Participation is optional, you can also follow along and watch the live coding session