Next 13 – Server and Client Components

With the Next 13, the team made major changes to the way components were rendered.
Not that it’s brand new, but they seem to have simplified it and changed the default.

So let’s take a closer look at how rendering works in the next 13.

What is Server vs Client?

We first need to find out what is seen as a server and a client.

  • Server: A real server that hosts your code can receive a request, do some calculations and, once complete, send back a response.
  • Customer: The user’s device browser sends a request to the server and does some calculations in the browser to render the correct layout.

As you can see, the tipping point is where the calculations take place.

So what did the ecosystem really look like before the next 13?

In general, with React, everything happens on the client side. Then solve this by breaking your React components into pages that can be partially rendered on the server.
However, this generated HTML on the server, which had to be re-hydrated on the client, meaning we needed additional JavaScript.

With the introduction of a clear distinction between server- and client-side components, React can render on the server or on the client.

The new default in all of this is server-side rendering.

Server Side: Static or Dynamic Rendering

With this addition of being server side first, we get two more options.
Either we render statically or dynamically.

Let us see in detail what this means.

  • steady: Both server and client components can be prerendered on the server at build time. It will cache the result and reuse that cache on the following requests. (equivalent to SSG and ISR in pre-13 words)
  • dynamic: Server and client components are rendered on request and will not be cached. (Equivalent to SSR Pre-13 Terms)

How to create client component?

You may wonder, if these server components are the new default, how do I use the client components?

And NeXT makes it super simple by adding a directive at the top of your file.

'use client';

export default function YourPage() {
  //Client-side code
enter fullscreen mode

exit fullscreen mode

Yes, that instruction will handle everything!

When to use which one?

It can seem difficult to know which one to use at which stage, so let’s take a look at Next’s instructable on it.

Let’s break it down with what you might need.

  • fetching data? -> Server Components
  • Access Backend Resources -> Server Components
  • Keep sensitive information on Server -> Server Components
  • Minimize Javascript Code -> Server Components

  • Add interactivity (click/change listeners) -> Client Components

  • Use State or Lifecycle Effects -> Client Components

  • Browser API only -> Client Components

  • Custom hooks that require any of the above -> Client Components

You might think, well, but of course they need to mix and match, and in fact they do.

The advice given by NeXT is that we opt to build components server-side where possible and remove those that require client-side rendering.

This way, our server components only need to render that specific small component on the client.
But more on this later when we try them.

Thanks for reading, and let’s join!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Leave a Comment