React Server Component Examples

A collection of examples demonstrating different strategies for using React Server Components.

Get startedView on GitHub
page.tsx
loading.tsx
export default function Page {
  return (
    <h1>Server-side rendering</h1>
    <Suspense fallback={<h1>Loading...</h1>}>
      <DataTable dataPromise={fetchData()} />
    </Suspense>
  )
}

Home

Introduction

React Server Components are a new technology that allow you to run React on both the client and the server. This is a huge step forward when it comes to creating performant sites and applications for your users. Because the technology is so new, there are not many examples out there showing how to use it in practice, hence this site.

Most of these examples were made to support a series of blog posts I wrote on React Server Components. Some examples link to the original blog post that they were created for. At the moment (July 2024), one needs to use a framework to take advantage of these things. All of these examples use Next.js as the framework of choice.

Intro to React Server Components

Until now, React has been a client-side technology. This means that when you build a React application, the code that you write is executed in the browser. This is great for interactivity and responsiveness, but it can also mean loading megabytes of JS to the client.

React Server Components are a new technology that allows you to run React on the server as well as the client. This means that you can render your React components on the server and send the resulting HTML to the browser.

This has a number of benefits. By rendering your components on the server, you can reduce the amount of work that the browser has to do, as well as the amount of code it must download to do it. This can lead to faster load times and a smoother user experience. It can also make your application more accessible, as the HTML that is sent to the browser is fully rendered and can be read by screen readers and other assistive technologies.

RSCs look almost exactly the same as client side components, but with a few differences: they can't use hooks, they can't use client-side only APIs, and they can't use client-side only libraries (like window or document). They can, however, use data from the server, which is a huge advantage.

Learn More

RSCs will change the way most React devs work, and there's quite a lot to understand before you can use them fully. Here are some articles that I've written that might help you understand some of the benefits and pitfalls of using RSCs:

I'd also strongly recommend the following content from other authors:

Next
Examples Gallery