How to use React Server Components (RSCs)

Contrary to what the React team has been evangelizing for years, the latest version fully supports server components (called RSCs), which are React components rendered on the server and streamed to the client. They aren’t as flexible as client components because they can’t use hooks and contexts to create fully interactive elements on the screen, but they’re great if your goal is to eliminate loading spinners from your application.

This blog is built entirely using RSCs, and I’m pretty happy with it.

The developer experience is fantastic, and it’s super fast for building applications since you don't need to create hundreds of API calls and endpoints.

The only client components on this website are the <CurrentlyListening /> (displayed in the bottom-left when I’m listening to something), the writing list, and the post itself. You might say that I could have achieved the same result using Next.js or Remix before, but now I can just use vanilla React (I know the implementation of RSCs is provided by frameworks, but you get my point).

This is my <WritingList /> component—it's deadly simple. I'm just awaiting the content of getPosts and rendering it as a list.

1import fs from 'fs/promises';
2import { cache } from 'react';
3
4export const getPosts = cache(async () => {
5  const posts = await fs.readdir('./posts/');
6
7  return Promise.all(/* ... */);
8});
9
10export async function WritingList() {
11  const posts = await getPosts();
12
13  return (
14   // ...
15  );
16}

You may find the cache function very interesting. It’s a new function provided by React that is only available for use with server components, and it caches the result of a fetch or computation so that it always returns the same result unless the parameters change.

Pretty useful, huh?

Now it starts to get interesting.

1import fs from 'fs/promises';
2import { cache } from 'react';
3
4export const getPosts = cache(async () => {
5  const posts = await fs.readdir('./posts/');
6
7  return Promise.all(/* ... */);
8});
9
10export async function getPost(slug: string) {
11  const posts = await getPosts();
12
13  return posts.find((post) => post.slug === slug);
14}
15
16export default async function WritingPage({ params }: WritingPageProps) {
17  const { slug } = await params;
18
19  const post = await getPost(slug);
20
21  if (!post) {
22    notFound();
23  }
24
25  return (
26    // ...
27  );
28}

This is basically the same code as in <WritingList>, but I’m redirecting the user if nothing is found, which grants type-safety.

Remember the cache function? It allows me to call getPosts inside getPost without having to read from disk again—just cached data.

People on Twitter are complaining that RSCs make the website slower, but that isn’t true at all. The correct way to use RSCs is by wrapping them in a <Suspense /> (or by using the loading.tsx file in Next.js), so they don't block page rendering and you can get faster results when navigating through your app.