What are Server Components in React and Next.js?
Today, I will show you what Server Components are in React and Next.js.
The framework most used and recommended by the React documentation has implemented the React Server Components in its latest version by default. Therefore, React developers must be up to date. Furthermore, Server Components are a change in the mental model in the React world that is revolutionizing the ecosystem and bringing many advantages, so we must delve into them.
Most guides talk about the usual paradigms in React instead of delving into the latest relevant trends, such as React Server Components, that allow us to keep improving our Front-End applications and take our knowledge further, continuously improving.
React Server Components are superior to other approaches
If you're wondering why to use React Server Components and why they're a superior approach in most applications to the one applied above, here are 5 features and benefits:
- The initial page load is faster
- The client-side JavaScript bundle size is reduced
- Server Components allow developers to leverage server infrastructure better
- React Server Components introduce a new mental model for building hybrid applications that leverage the server and the client
- Keep significant dependencies that previously would impact the client JavaScript bundle size on the server, leading to improved performance
Let's understand what they are and how they work in React applications. Let's dive in.
What are React Server Components?
Server Components are standard React Components as we already know them with the particularity that they can access databases and handle sensitive information because they run entirely on the server.
Server Components allow you to render components on the server. In Next.js, all components inside the app folder are Server Components by default.
React renders Server Components on the server side, keeping large dependencies entirely on the server, improving the app performance.
You can choose where to render your components at the component level with Next.js.
You can do the app with Server Components and use Client Components when needed to achieve better performance. Next.js docs have a summary table to know when it is better to use either one or another:
React Server Components are revolutionizing the React ecosystem. Here, I share 4 helpful resources that also talk about this topic, and I recommend you check them out to learn more about React Server Components:
Adrian Bogdan course: https://payhip.com/b/cbqne
Next.js Documentation: https://nextjs.org/docs/getting-started/react-essentials
Dan Abramov post: https://github.com/reactwg/server-components/discussions/4
Adhithi Ravichandran article: https://adhithiravi.medium.com/what-are-server-components-and-client-components-in-react-18-and-next-js-13-6f869c0c66b0
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!