A brief look at the NextJs 13 server components

DanielNovember 14, 2022November 25, 2022

A Server Component is a component that is rendered on the server. This comes with a decreased overall bundle size of our NextJs applications. The smaller download sizes for the visitors, make the page available much faster.

The React Server Components were introduced, quite recently, in December 2020.

With the introduction of the /app folder in NextJs 13 any component that is placed in this folder will become by default a server component unless you add the use client directive.

Alongside smaller bundle size another big benefit of Server Components is that your code is running on a powerful server. So we are also removing the processing burden from our visitor's devices.

When to use the Server Components?

Maybe the most common use case for a Server Component would be to do data fetching and render the component based on that data. All on the server. With this, we can take advantage of the server's super speedy connection. And we can even have the data on that same server so can eliminate the round trip to the server and back. Plus this will allow us to protect the connection credentials.

Things that you’ll want to consider putting in a Server Component:

• data fetching
• components with large module dependencies (that don't need client-side interactivity)
• manipulating backend resources and filesystems

How to use Server Components with Client Components?

Keep in mind that you cannot import a server component into a client component. Wrote this short article about how to use a NextJS server component in a client component

And as a closing thought rememer that Server Components are not the same as Server Side Redering. We may explore the differences in another article.