A better learning path for React with server components

Posted on May 26, 2023

I’ve always loved sharing my knowledge. When I love a language, library or framework, more than exploring every tiny detail of it, I think about how I can help people learn it and like it as much as I do.

This is why a while ago I wrote a book in French about React, then a course about React hooks, and finally an ebook about Next.js last fall (see the books page).

But the world of programming is evolving fast, and the recent new features in React and Next.js shuffle everything. Not in a way that everything you know already is now wrong, but because you can do much more than before, and learn things completely differently.

With the recently-introduced React Server Components (RSC), it is now possible to create components that will be rendered on the server. My goal here is not to explain how to use them or what new features they bring, but to propose a new way of learning React they enable.

Here is the way we use to teach/learn React and Next.js:

  1. Start with React’s client features to build a Single Page Application: local state, effects…
  2. Continue with Next.js to create full-stack apps, with Server-Side Rendering
  3. Pursue with React Server Components to add more logic on the backend

This is how most people went from client-only React to RSC, because Next.js was created after React, and RSC only became real a few months ago.

What if we took advantage of React Server Components not only to improve how we use React, but also how we help people learn it from the beginning?

Think about it. Why not starting with React Server Components, then moving to client features?

It could look like this:

  1. Learn Next.js as a full-stack framework, using React as a rendering engine
  2. Discover React’s client features to add interactivity to your pages

In the first part of the journey, you could learn how to create React components on the server, and fetching data directly from inside the component.

export default async PostsPage() {
  const posts = await fetchPosts()

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

If you aren’t used to React Server Components, this piece of code might seem weird. But for someone who doesn’t know React yet, the logic is quite easy to understand. You fetch posts, then you display them.

Using a plain client component, you’d have to create a state with useState, then fetch the posts inside a useEffect. Explaining everything you need to understand the code would take much longer.

And don’t get me wrong: it’s important to know how to perform a request from a client component. Just, maybe a bit later, when you learn React’s client features. But you can already learn so much without hearing the word “hook”: components, JSX, conditionals & iterations, styling, routing, fetching data…

I understand this path I’m proposing can seem counter-intuitive. And to be honest, it’s still a bit early to know for sure whether it’s better than the classic way. I am glad to see that I’m not the only one thinking it might be:

@shadcn: “An interesting side effect of RSC is that React is now actually easier to teach/learn. If you’ve used React for a while, yes it requires a mental model switch. But for beginners, it makes so much sense: fetch data, render and style it - all in one place. If you need to do something in the browser, "use client". This is what made PHP so great as a first language and I think React is going to be just as easy.”

I am currently designing a workshop to help beginners learn React and Next.js, and will experiment this new path. I strongly believe it will make the learning journey way easier for people who know HTML, CSS and JavaScript.

Can’t wait to keep you posted about how it goes 😊

Cover photo by Matt Duncan.


Check my latest articles

  • 📄 Display a view counter on your blog with React Server Components (April 24, 2023)
    A short tutorial with a cool use case for React Server Components, Streaming and Suspense with Next.js: adding a view counter on a blog, calling the Plausible analytics API.
  • 📄 Using Zod & TypeScript for more than user input validation (March 8, 2023)
    If you have ever created an API or a form accepting user input, you know what data validation is, and how tedious it can be. Fortunately, libraries can help us, such as Yup or Zod. But recently, I realized that these libraries allow patterns that go much farther than input validation. In this post, I’ll show you why I now use them in most of my TypeScript projects.
  • 📄 Display your Gumroad products on your Next.js website (February 26, 2023)
    If you sell some products on Gumroad and also have a personal website, maybe you’d like to automatically list your products on this website. And if your website is based on Next.js, you can do it pretty easilly using Gumroad API.