React is one of the most popular JavaScript front-end libraries for developing web applications. Lately, React has introduced a handful of breaking changes for the React ecosystem. Overall, it strives to provide better performance right out of the box for modern web applications. React Server Components are one such feature that has become a hot topic since they were introduced. It is an experimental feature, but still, you can play around with it to grasp where React is going.
In this article, I will discuss React Server Components, show you how to implement them, and consider their pros and cons.
Introduction to React Server Components
A React Server Component (RSC) is a basic component type that retrieves data from the server and renders its content on the server side. This implies that it will be able to fetch data for rapid rendering. There is no client-side interaction in these server components. Only the rendered content will be sent to the client for display purposes. So, developers can create apps that span the server and client.
In other words, React Server Components are a combination of the robust interactivity of client-side applications with the enhanced performance of conventional server rendering.
With a server-driven mental model, the React Server Components feature aims to enhance the user experience and the performance of React applications. Furthermore, client-side JavaScript bundles may be significantly smaller as Server Components will not be included in the client bundle.
React Server Components vs. Server-Side Rendering
Conventional server-side rendering (SSR) cannot be replaced with zero-bundle-size React Server Components. SSR is an approach to rendering apps on the server side that involves delivering the HTML to the client so the browser will render it.
On the other hand, React Server Components work with SSR by using an intermediary structure to enable rendering without delivering any bundles to the client side. They are rendered on the server side in a unique format, not HTML, and streamed into the client. When combined with static site generators (SSG) like Next.js, Server Components enable scalability by adding more components, allowing the server tree and client-side tree to be combined without losing state.
SSR works on the basis of sending prebuilt HTML markup to the client, followed by hydration with JS. These pages can’t be rerendered while maintaining the client state. This prevents users from interacting with your website until the JS has loaded. In contrast, React Server Components can be called and rendered multiple times without losing the client state and have their own network data transfer protocol.
Server Components have access to back-end resources from anywhere in the component tree. When using SSR (e.g., Next.js), you have to use getServerProps() to reach the back end. However, this function can only be used on top-level pages and cannot be accomplished using random npm components.
How to Implement Server Components
Before React Server Components were introduced, there were only client components. But now, since there are two different types of components, you can differentiate between them by using server.js and client.js file suffixes (or else server.jsx and client.jsx). An absence of either identifies a component that can serve as both a server and client component.
A basic example of a React Server Component will look like the following.
import db from "database";
const Note= (props) => {
const { id } = props;
const note = db.notes.get(id);
return (
<div><h1>{note.title}</h1><p>{note.text}</p></div>
);
};
As you can see, React Server Components have the same visual appearance as a conventional React component that accepts props and has a render method. But there are some unique features of React Server Components you need to know:
- They directly access server data sources like databases, microservices, and functions. With this flexibility, we can build internal APIs that operate with different data sources and access the server from the component without exposing it explicitly to an API.
import db from "database"; const Note= (props) => { const { id } = props; const note = db.notes.get(id); return ( <NoteContent note={note} /> ); }; - React Server Components do not impact the client bundle’s size. Even more, if a third-party library is solely utilized by Server Components but not client components, it will not be added to the client bundle, since it is not required.
Consider a client component named NoteContent that uses the third-party libraries marked and sanitize-html. The dependencies will have a direct impact on increasing the client bundle size.
// NoteContent.js
// Client Component
import marked from 'marked'; // 35.9K (11.2K gzipped)
import sanitizeHtml from 'sanitize-html'; // 206K (63.3K gzipped)
function NoteContent({content}) {
const html = sanitizeHtml(marked(content));
return (/* render */);
}But the Server Components will have no impact on the bundle size.
// NoteContent.server.js
// Server Component
import marked from 'marked'; // zero bundle size
import sanitizeHtml from 'sanitize-html'; // zero bundle size
function NoteContent({content}) {
// same as before
}
While being rendered on the server side, a React Server Component behaves quite differently. The framework streams it as soon as the distilled UI state is ready. This way, the most important UI components can be easily recognized and rendered. Suspense can be utilized in the meantime to manage interactive client-side components effectively.
React Server Components can also render client components, native HTML elements, and server components.
For example, if we have a client component named EditNoteButton, we can just import it into our server component and use it, as shown in the following.
import db from "database";
import EditNoteButton from 'EditNoteButton.client';
const Note= (props) => {
const { id } = props;
const note = db.notes.get(id);
return (
<div><h1>{note.title}</h1><section>{note.body}</section>
<EditNoteButton/></div>
);
};On the other hand, client components cannot import server components. If we try to do so, it will import many dependencies into the browser bundles.
Advantages and Disadvantages
React Server Components have many advantages, but there are some limitations, too.
Advantages
- Separation of concerns between client and server logic.
- Server-only code shrinks bundle sizes and has no impact on the client bundle.
- Direct access to private and customized server-side data sources.
- Seamless integration with client components.
- Progressive hydration and streaming rendering.
- Updates at the subtree and component levels preserve the client state. Thus, client state, focus, and even active animations are not affected or reset when a Server Component tree is refetched.
- Server and client code sharing when it is appropriate.
Disadvantages
- Client-only functionality, such as state, cannot be accessed by Server Components. As a result, React Hooks used for handling state data, such as useState and useReducer, are not supported.
- React Hooks for rendering lifecycle methods like useEffect and useLayoutEffect cannot be used by React Server Components.
- Browser-only APIs cannot be used.
- Since the feature is still under development, there is no documentation. Instead, you must examine the source code of the demo application.
Github reference
Also, refer to the Zero bundle size in React Server Components demo on GitHub.
Wrap Up
Thank you for reading! As developers, it is important to know the latest features introduced to deliver the best result. React Server Components give us a new way of combining the best of both client-side and server-side rendered components in React applications.
Despite being an experimental feature, it has a lot of potential and beautiful capabilities that will certainly enhance the way modern apps work with a faster and more enhanced user experience.
The Syncfusion Essential Studio® for React suite offers over 70 high-performance, lightweight, modular, and responsive UI components in a single package. It’s the only suite you’ll ever need to construct a complete app.
If you have questions, contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!
