React Server Components represent a new paradigm in web development by allowing developers to write server-rendered React code that can be dynamically updated and composed on the server side, enabling faster initial page loads, improved SEO, and a more seamless user experience. To understand most of the subjects covered in this article, it would be ideal for you to be familiar with React, Frontend Development, etc. Although we don’t write any code, you’ll be able to understand the benefits of using this experimental feature combined with SSR. Yet, there will be explanations on some of these topics, so you don’t need to be an expert to go through this article.
SSR vs React Server Components
- Data from a given page is fetched on the server.
- Server renders HTML.
- The page’s HTML, CSS, and JS are sent to the client .
- A non-interactive UI is shown using the generated HTML and CSS.
- React hydrates the UI to make it interactive.
These steps are sequential and blocking, meaning the server can only render the HTML for a page once all the data has been fetched. And, on the client, React can only hydrate the UI once the code for all components in the page has been downloaded. Streaming allows you to break down the page’s HTML into smaller chunks and progressively send those chunks from the server to the client. This enables parts of the page to be displayed sooner without waiting for all the data to load before any UI can be rendered.” This works particularly well with components, as each one of them can be considered a chunk.
In summary, React Server Components focus on server-rendering specific components within a web application, allowing for more efficient data fetching and partial updates, and reducing client-side bundle sizes while maintaining interactivity. Server-Side Rendering, on the other hand, renders the entire web application on the server, improving initial load time and SEO, but may result in a more static experience and larger client-side bundles. React Server Components continuously render in the server as the user navigates around the app, whereas Server-Side Rendering is only occurring during the initial page load. This means other than the initial components, all the other components are rendered in the browser when SSR is used, it also means that you can combine them and get the best of both worlds.
Zero Effect on Bundle Size
This has already been mentioned in this article, but I want to emphasize that React Server Components have zero effect on bundle size. So, we can have server components that import a bunch of libraries that do some kind of pre-processing on the data, and you can be confident that you are not shipping this to the client. You will have to make decisions regarding which components to put on the client and which to put on the server. The React team thinks this is a good idea because it gives us control over what we send to the client, and what we keep on the server.
Seamless Integration with Client Components
Server Components are designed to work in tandem with traditional React Client Components, allowing developers to build rich, interactive apps. This hybrid model enables the efficient use of server-side rendering for static or infrequently updating content while maintaining the flexibility and responsiveness of client-side components for dynamic, user-driven interactions.
React RFC (2023): React Server Components FAQ states that: “You can combine Server Components and SSR, where Server Components render first, with Client Components rendering into HTML for fast non-interactive display while they are hydrated. When combined in this way you still get fast startup, but you also dramatically reduce the amount of JS that needs to be downloaded on the client”.
Here are some of the main takeaways for RSC:
- Faster server rendering
- Improved developer experience
- Lower server load
- Experimental feature
I would highly encourage everyone to check out the official RFC for a deeper technical breakdown and to provide feedback, and if you’ve got time to spare, check out the video presentation as well. Server Components seem like a very interesting concept, it’s an experimental feature introduced in React 18, and it has the potential to greatly improve the performance and scalability of React applications, but they should be used with caution and tested thoroughly before being used in production.
Fast-growing tech companies partner with Encora to outsource product development and drive growth. Contact us to learn more about our software engineering capabilities.