June 12th, 2023 / By: dojo.live / Published in: Blog
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
Let’s start with Server-Side Rendering (SSR). As web applications become more complex and feature-rich, the amount of JavaScript (JS) required to build these applications has grown exponentially. This increase in JS has led to slower initial page loads and a less responsive user experience, especially on slower devices and networks. To counter this issue, SSR has emerged as an effective solution, generating HTML content on the server, and reducing the amount of JS needed to download and execute on the client. In the official documentation of Next.js (2023), we can see that: “There’s a series of steps needed before a user can interact with a page:
- 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.
Moving on to React Server Components (RSC), these allow developers to better leverage server infrastructure. According to Next.js (2023) official documentation: “For example, large dependencies that previously would impact the JavaScript bundle size on the client can instead remain entirely on the server, leading to improved performance. With React Server Components, the initial page load is faster, and the client-side JavaScript bundle size is reduced”. The base client-side runtime is cacheable and predictable in size and does not increase as your application grows. According to Next.js (2023) official documentation: “Additional JavaScript is only added as client-side interactivity is used in your application through Client Components”.
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.
As the complexity of web apps grows, so does the size of the JS bundles that power them. Large bundles can negatively impact performance, especially on slower devices and networks as they require more time to download and process. Smaller JavaScript bundles require less data to be transmitted over the network, which can lead to reduced bandwidth usage and costs. This can also lead to better responsiveness, as the browser spends less time parsing and executing code.
Seamless Integration with Client Components
Server components are components that never leave the server, so there is never any JavaScript that gets shipped to the client. According to Scott Moss (2023). Server & Client Components: “This means that server components can’t use things like hooks and client-side APIs that the browser provides. Client components are the standard React components and they have full access to browser APIs, hooks, state, and interactivity”. React
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”.
Takeaways
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.
About Encora
Fast-growing tech companies partner with Encora to outsource product development and drive growth. Contact us to learn more about our software engineering capabilities.