This is written form of my talk in a JogjaJS forum, on 28 October 2023.

View this post on Instagram

A post shared by Hanief Utama (@haniefutama)

Here is the recording of me delivering the talk:

TL;DR, Only use React Server Component if you need performance/SEO optimisation and you are already in Next.js.

History of web technologies

Image of first web server

Web has been here for more than 30 years. When Sir Tim Berners-Lee proposed a system for CERN researchers to use and share documents, he not only built the specification, but also the browser and server software for demo purposes. Thus born the first web server.

2 years later, PHP was born from the hand of Rasmus Lerdorf so we can create dynamic response for web request. Only 6 months after that, Brendan Eich invented JavaScript as a way to manipulate the web page after they are loaded on the browser. Thus born dynamic web application that enables giant modern software and services like google and facebook.

Javascript is a little bit younger than PHP. It has been historically used in a different place. But, since V8 JS engine and Node.js, JavaScript has reached even wider use case. Not only it has been used in browser, but now it can be used in server environment too, like PHP.

React.js, is JavaScript library built inside Facebook/Meta. It is replacing jQuery as arguably the world’s number 1 JS library for frontend development. It has changed a lot since its conception. It has also spawned many other libraries and frameworks supporting its ecosystem.

One of the most recent and popular framework for React.js is Next.js. It aims to take React to the next level by providing technologies and optimisation so it can be used for production level app.

The most recent technology developed for React and supported by Next.js is a feature called React Server Component (RSC). It has created a lot of chatter in the web dev sphere because of its funny syntax and supposedly its transformation into PHP. The OG server scripting language.

React transformation into PHP

But what is React Server Component?

Ironically, eventhough its actually a React feature, there’s not much documentation explaining it in the React docs. Next.js has better documentation about it.

So I am now trying to make sense of it, and put it in a blog post as my own notes and hopefully can be useful for any FE dev out there.

I feel the best explanation on RSC out there is from Josh Comeau in his Making Sense of React Server Components post. I urge you to read it from there. It has cool illustration and really easy to understand break down.

JS rendering methods

To be able to understand RSC, first we have to understand React rendering methods.

What is Client Side Rendering

The OG React rendering method is of course Client Side rendering. You have to download all of JS files to be able to see the content.

This approach is simple and has been used for some time. But, this means the first paint and page interactive is quite far away from the first request. This has implication on SEO and performance. It has to wait for script download, shell render, API roundback, database query, and content render to be able to display real content on web page.

This approach is not suitable for content heavy apps such as e-commerce sites or blogs. But its still ok for non-public non-heavy-traffic app such as internal dashboard.

Server Side Rendering

To fix the SEO problem, React and framework such as Next.js added new method of rendering called Server Side Rendering. This method put the rendering of initial shell to the server, so when the initial request came it can respond with default/initial content to the browser.

Once the shell arrived at the browser, it will download the real content using a method called hydration. Hydration basically works like it is named. Imagine an empty bottle, hydration is filling the bottle with water from the tap. The container/shell already there and can be seen / interacted by user, but it needs to be filled for user to be able to drink.

Server Component

SSR is already helping with performance and SEO. But we can go further. Why should we receive initial shell on first response? Why do we not get the whole content? Especially if we have access to the underlying database in the server. We also still get a huge bundle everytime we download the JS script.

If you thought about this, then Server Component is for you.

Server Component basically enables React component to be rendered and interacting with server code via Node.js. This unlocked powerful capabilities such as direct DB access. We can also compartmentalize the code downloaded to browser since we don’t need JS to render the content. Hence the smaller bundle size. We only download what we need.

The difference between Server Component and Client Component

What’s the difference between Server and Client Component? The first thing that you notice is the “use client” directive at the top of the Client Component. That’s because in the RSC paradigm, default component type is Server Component.

Only when we need the component to be client component, we explicitly changed it to client.

The other thing that we notice is we can directly connect to the DB from the component. 🤯 That is crazy! It feels that it should be illegal.

Here are the summary of the differences:

Server Component Client Component
Render only on server Render on server and client
New kind of component The component that we already know
Default component “use client”
No state Can use state
Can import Client Component Can ONLY import Client Component

Next.js is the only framework that offer full support of RSC

RSC Meme

Strangely, even though RSC is an official React feature, since it has to have server implementation, they need to collaborate with framework teams that can support it. As of October 2023, the only framework that support it is Next.js. If you use other framework like Remix, well though luck. RSC is not for you yet.

How to use Server Components in Next.js?

  • Use Next.js version 13.4+

    You need to be on the latest version of Next.js. The RSC support doesn’t ship before version 13.4.

  • Use App Router

    You need to use the App router paradigm. You need to migrate the Pages router to App router.

  • Server Components is default.

    By default all components is Server Components. If you want to make it Client Components you need to add “use client” directive explicitly.

Pros and Cons of using RSC

Before you decide if you want to use RSC, these are some of the pros and cons of RSC:

Pros

  • Smaller bundle size
  • Faster rendering
  • Server is controllable vs different kind of browser
  • Hydrate only what is needed
  • Keep sensitive data on the server
  • Caching

Cons

  • No CSS-in-JS
  • React Context doesn’t work
  • More things to think about
  • More work on server
  • Need to control which part will hydrate

Should I use RSC?

The big question is, should I use it? This table will probably help your decision making:

Yes No
You are already deeply invested in React + Next.js  
You have control of the server  
Performance is very important to you  
Your bundle size is too big  
  Your life is complex enough already

Adding React Server Components will only make your app more complex, since you have to take care the server logic as well. I recommend only use it when you have to.

Adoption Strategy

So, with all the asterisks and headache listed above, you still decided that you want to adopt RSC. Then I recommend that you use this strategy:

  1. Add the “use client” directive to the root of your app.

    This way all your application becomes client component by default. This will prevent some headache with the mix between server and client components along the component tree.

  2. Move the directive as low as possible in the rendering tree.

    When you are ready, try move the “use client” directive one level at a time. If there’s no broken parts, continue move down. When you find a problem, try rearrange your component to separate the interactive parts. When you can’t move it further down, you found your final directive position.

  3. Adopt advanced pattern when performance issues arise.

    Only use advanced tricks when the default/standard way is not enough anymore to handle your needs. Don’t do premature optimization.

Conclusion

If you need more performance from your app, or you need to have better SEO, React Server Components is for you.

Also, you need to be already in Next.js environment, since the only frawework supporting this feature is them.