Overview of React Server Components and Client Components
We will review all the concepts about React Server Components and Client Components in React to understand each better and how they work.
It is essential to know this since React Server Components are a current trend in the React ecosystem. As developers, it is convenient that we are aware of the most important innovations to have a good context and develop the best possible applications.
We should not put aside as many people do and close ourselves to new ideas that can improve our development.
We will look at the Client and Server Components separately and then combine the concepts.
Client Components
Client components are the components you always knew. They are rendered to the client. A prerender can be done on the server of the initial HTML to improve the time of the first loads.
The process would be as follows:
Initial HTML prerendering
The client receives that HTML and the JavaScript bundle.
The React component tree is hydrated with the JavaScript received so that our application is interactive.
Server Components
They are components rendered on the server and sent to the client already generated. Like Client Components, they can prerender their previous HTML on the server; React's rendering is also done on the server.
With the rendering of the components on the server, we get several advantages over the Client Components:
We reduce the JavaScript bundle sent to the client since it will not be necessary to send JavaScript to hydrate the components in the client, so if we use external libraries, all that JavaScript will not be sent.
We can access backend resources to get our data directly from the servers. We will not have to make round trips between the client and the server to obtain data. In turn, if the infrastructure is well designed, access to that data will be more accessible, thereby reducing latency times.
Next.js is an excellent option if you want to use React Server Components since, in its latest version, the Vercel team confirmed that they are ready for production projects.
With the Next.js framework, when you create a component, it is a Server Component by default; if you want it to be a Client Component, you must add the "use client" directive at the beginning of the file. In the official Next.js documentation, they have incorporated a table that summarizes very well the cases in which one type of component or another must be used:
Conclusion
In our applications, we can have two worlds of React rendering that finally join the client. Both Server Components and Client Components are React components, with the difference that each is rendered in different places. Taking advantage of this new approach's benefits, we can avoid sending significant JavaScript in many applications and make our data requests to the servers much more efficient, achieving a great user experience in our applications.
Here, I share 2 helpful resources that also talk about this topic. I highly recommend them if you want to continue delving into the topics:
https://github.com/reactwg/server-components/discussions/4
https://nextjs.org/docs/getting-started/react-essentials
I hope you enjoyed the article.
Join my weekly newsletter, where I share articles to help you become a better front-end developer. You'll receive them directly to your inbox.
If you have any questions, feel free to contact me on LinkedIn, Edi Rodriguez, or leave a comment in the post.
See you in the next post.
Have a great day!