React Server Components are now fully supported in Next.js. Next.js 13 was recently released and React Server Components move out of experimental into full support. I would go beyond saying Next.js supports them to Next.js is heavily pushing for the use of React Server Components.
Next.js 13 introduced app directory architecture which is an entirely new way to architect your Next.js applications with React Server Components in mind. The default for components built under the app directory are React Server Components, you must explicitly add use client if you want to build a client-side component.
It’s okay if you have never heard of React Server Components. They only came into existence in December 2020 and so far are not widely used. Let’s look into React Server Components and why the Next.js team wants you to use them by default.
What is a React Server Component?
A React Server Component is a component that renders on the server. React Server Components leverage the server's power to provide a more predictable and performant experience for your visitors.
The most common use case for a Server Component would be to fetch data and render your component based on that data all on the server.
Things that you’ll want to consider putting in a Server Component would be:
- Fetching data (take advantage of the server's super speedy connection)
- Accessing backend resources or filesystem
- Components with large dependencies that do not need client-side interactivity
💡 React Server Components cannot include any client-side interactivity, this means your app will most likely contain a mix of server components and client-side components. This adds complexity as you’ll need to think ahead of how you want to best distribute components, but the goal is to move as much to the server where things are predictable and more performant.
Common examples of client-side only calls: useState, useEffect, onClick
Why do you want React Server Components?
The number 1 reason is Server Components contribute zero to the overall bundle size of your application. This means smaller download sizes for visitors, leading to your page becoming available faster.
This benefit can be extremely helpful if you have packages you need to use but do not need them client side. Keeping those dependencies completely server-side means reduced downloads for the client. For example, I use an npm package for this blog to convert my .mdx files to HTML. That could be a completely server-side process, removing that package from the bundle downloaded by the client.
As mentioned above, another big benefit is that your code is running on a powerful server, hopefully, closer to your data as well. Pushing compute to the server can make a big difference for your visitors on a mobile device.
How to get started with React Server Components?
If you want to build with React Server Components upgrade to Next.js 13 or use create-next-app to start a new app and build with the new app/ based architecture.
Components built with the new Next.js 13 app folder-based architecture will be React Server Components by default. The new architecture is still in beta but I expect it to become recommended practice soon. The goal of this new architecture is to reduce the amount of JavaScript sent to the client.
Don’t worry though the original pages/ based architecture that has been used in all prior versions of Next.js is still supported in version 13 as well. You can incrementally adopt the new architecture.
Top comments (0)