Building Highly Performant Applications With React Server Components

React is a popular library for building user interfaces on the web. It allows developers to create reusable components that can render dynamic data and handle user interactions. However, as web applications grow in complexity and size, developers face some challenges with React, such as:

• Bundle size: React applications often rely on many third-party libraries and code-splitting techniques to reduce the initial loading time and improve the user experience. However, this also means that the browser has to download, parse, and execute a lot of JavaScript code before rendering the application.

• Data fetching: React applications typically fetch data from various sources, such as APIs, databases, or local storage. This requires writing complex logic to manage the state of the data, handle errors, and cache responses, and update the UI accordingly. Moreover, data fetching can introduce latency and inconsistency issues between the server and the client.

• Server-side rendering (SSR): SSR is a technique that renders React components on the server and sends the resulting HTML to the browser. This can improve the performance and SEO of React applications, especially for users with slow or unreliable internet connections. However, SSR also adds some overhead and complexity to the development process, such as maintaining two different environments, synchronizing the state between the server and the client, and dealing with hydration issues.

To address these challenges, React introduced a feature called React Server Components (RSC) in December 2020. RSC is a type of React component that can run on the server and stream HTML to the browser. Unlike SSR, RSC does not require the sending of any JavaScript code to the browser, which reduces the bundle size and improves the performance of React applications. RSC also enables direct access to backend resources from the server, which simplifies data fetching and eliminates the need for client-side state management. Furthermore, RSC can seamlessly integrate with existing client-side React components, which preserves the rich interactivity and flexibility of React.

In this article, we will explore how RSC work, what benefits they offer, and how to use them in your React applications.

Client, Server, and Shared Components

RSC feature allows writing components as server and client components. React differentiates server and client using the file extensions.

Let’s see how:

• File extension with .server.js is a server component
• File extension with .client.js is a client component
• File extension with .js is a shared component

• Server components are rendered on the server and stream HTML to the browser. They can use Node.js APIs and access backend resources directly. They cannot use state or effects. They can return other server components, shared components, or HTML elements.

• Client components, on the other hand, are rendered on the browser and handle user interactions. They can use browser APIs and fetch data from external sources. They can use state and effects. They can return other client components or HTML elements.

• Shared components are rendered on both the server and the browser. They can use platform-agnostic APIs that work on both environments. They can use state and effects only if they are wrapped by a client component. They can return other shared components or HTML elements.

The server component is rendered in a special format

When a server component is rendered on the server, it is not converted into an HTML string like SSR. Instead, it is serialized into a special JSON-like format that contains information about the component’s type, props, children, and references. This format is called Server Component Transport Format (SCTF)

The SCTF is designed to be compact and efficient for streaming over the network. It also supports features such as lazy loading, code splitting, hydration hints, error boundaries, and suspense boundaries.

The SCTF is sent to the browser as a stream of chunks that are parsed and rendered incrementally by a custom React renderer called React Flight DOM Client Renderer. This renderer can handle both server components and client components in the same tree. It also supports features such as event delegation, focus management, accessibility, and concurrent mode.

Zero Bundle Size Server Components

One of the main benefits of RSC is that they do not add any JavaScript code to your bundle size. This means that you can write as many server components as you want without worrying about the impact on your performance budget.

Server components are only executed on the server and never sent to the browser. The browser only receives the SCTF and the HTML that is generated by the server components. The browser does not need to know anything about the implementation details of the server components, such as their imports, dependencies, or logic.

This also means that you can use any Node.js library or API in your server components without having to install or configure any bundler or transpiler. You can also use modern JavaScript features such as ES modules, optional chaining, nullish coalescing, etc. without worrying about browser compatibility.

Backend Access

Another benefit of RSC is that it can access backend resources directly from the server. This simplifies data fetching and eliminates the need for client-side state management.

Server components can use any Node.js API or library to fetch data from various sources, such as databases, file systems, caches, etc. They can also use GraphQL queries or REST endpoints to communicate with other services or APIs. Server components can pass the fetched data as props to other components in the tree, either server components or shared components.

This means that you do not need to write any code to fetch data on the client side, such as using hooks, custom hooks, reducers, actions, sagas, thunks, etc. You also do not need to worry about caching, invalidating, updating, or synchronizing the data between the server and the client.

How to use React Server Components

• Install React 18 or later. RSC are only available in React 18 or later versions.

• Install React Flight DOM Webpack Plugin. This is a Webpack plugin that enables RSC support in your Webpack configuration.

• Install React Flight DOM Server Renderer. This is a custom React renderer that enables RSC support on the server-side.

• Install React Flight DOM Client Renderer. This is a custom React renderer that enables RSC support on the client-side.

• Write your server components with .server.js extension. You can use any Node.js API or library in your server components.

• Write your client components with .client.js extension. You can use any browser API or library in your client components.

• Write your shared components with .js extension. You can use any platform-agnostic API or library in your shared components.

• Import and use your server components from your client components or shared components. You can use dynamic imports or static imports to import your server components.

• Import and use your client components from your shared components. You can use dynamic imports or static imports to import your client components.

• Import and use your shared components from your server components or client components. You can use static imports to import your shared components.

• Render your root component on the server using React Flight DOM Server Renderer. You can use any Node.js framework or library to render your root component on the server and stream the SCTF to the browser.

• Render your root component on the client using React Flight DOM Client Renderer. You can use any browser framework or library to render your root component on the client and parse and render the SCTF from the server.

Conclusion

React Server Components are a feature that allows developers to build highly performant React applications with zero bundle size and direct backend access. RSC are rendered on the server and stream HTML to the browser without sending any JavaScript code. RSC can also access backend resources directly from the server without requiring any client-side state management. RSC can seamlessly integrate with existing client-side React components and preserve the rich interactivity and flexibility of React.

If you want to learn more about RSC, you can check out these resources:

• Introducing  Zero-Bundle-Size React Server Components – The official blog post that introduces RSC and explains their motivation and design.
• React Server Components Demo – The official GitHub repository that contains a demo application that uses RSC and shows how they work.
• React Server Components RFC – The official RFC that describes the technical details of RSC and invites feedback from the React community.

Sources

• https://medium.com/swlh/an-introduction-to-react-server-components-a4e7a13a1574

• https://nextjs.org/docs/advanced-features/react-18/server-components

• https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html

• https://zhuanlan.zhihu.com/p/340816128

• https://www.freecodecamp.org/news/what-are-react-server-components/

• https://www.plasmic.app/blog/how-react-server-components-work