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: React 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. Bundle size: 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. Data fetching: 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. Server-side rendering ( SSR ): To address these challenges, React introduced a feature called ( ) in . 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. React Server Components RSC December 2020 RSC 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 to the browser. They can use APIs and access backend resources directly. They cannot use state or effects. They can return other server components, shared components, or HTML elements. HTML Node.js 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 . 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. React Flight DOM Client Renderer 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 To use RSC in your React applications, you need to follow some steps: Install or later. RSC are only available in React 18 or later versions. React 18 Install . This is a Webpack plugin that enables RSC support in your Webpack configuration. React Flight DOM Webpack Plugin Install . This is a custom React renderer that enables RSC support on the server-side. React Flight DOM Server Renderer Install . This is a custom React renderer that enables RSC support on the client-side. React Flight DOM Client Renderer Write your server components with extension. You can use any Node.js API or library in your server components. .server.js Write your client components with extension. You can use any browser API or library in your client components. .client.js Write your shared components with extension. You can use any platform-agnostic API or library in your shared components. .js 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. RSC are still in research and development and not ready for production use yet. However, they offer a promising direction for improving the performance and simplicity of React applications in the future. If you want to learn more about RSC, you can check out these resources: – The official blog post that introduces RSC and explains their motivation and design. Introducin g Zero-Bundle-Size React Server Components – The official GitHub repository that contains a demo application that uses RSC and shows how they work. React Server Com p onents Demo – The official RFC that describes the technical details of RSC and invites feedback from the React community. React Server Com p onents RFC 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 The title image was generated by the artificial intelligence tool Leonardo.ai using the prompt "A retro steampunk computer with source code text on its screen."

Hot off the press! This story contains factual information about a recent event.

This story will praise and/or roast a product, company, service, game, or anything else people like to review on the Internet.

Building Highly Performant Applications With React Server Components

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Getting Started with React Server Components: A Step-by-Step Tutorial

10 Top Advantages of Node.js in eCommerce Industry

10 Reasons to Choose Sencha Ext JS for Your Data Driven Web Applications

10 JavaScript Apps to Power your Business

10 Cool Data Table Libraries with Advanced Features

The Most Progressive Web Apps of 2022

Getting Started with React Server Components: A Step-by-Step Tutorial

10 Top Advantages of Node.js in eCommerce Industry

10 Reasons to Choose Sencha Ext JS for Your Data Driven Web Applications

10 JavaScript Apps to Power your Business

10 Cool Data Table Libraries with Advanced Features

The Most Progressive Web Apps of 2022

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps