Hands-on with React Server Components

React remains a flagship among front-end JavaScript frameworks, and the React team continues to pursue avenues to keep it relevant. One of the more important developments on the roadmap is React Server Components. 

React Server Components provide a means of offloading the work behind a component to the server. This avoids having to ship bundled JavaScript and having to serve secondary API requests to hydrate the component.

React Server Components are a preview feature that can be enabled in React 18. 

[ Also on InfoWorld: Hands-on with the Svelte JavaScript framework ]

Why use React Server Components

Before we look at how React Server Components will work, let’s think about why.  First, it’s useful to note that React Server Components are distinct from server-side rendering (SSR). As the RFC from the React team states,

[SSR and Server Components are] complementary. SSR is primarily a technique to quickly display a non-interactive version of client components. You still need to pay the cost of downloading, parsing, and executing those Client Components after the initial HTML is loaded.

So in contrast to SSR, where we are aiming to render out an initial version of a component which then behaves as a normal client-side animal, React Server Components intend to fully replace the client-side functionality with work done on the server. This has two main benefits:

1. Bundled JavaScript doesn’t need to be shipped over the wire to the client. The JavaScript is imported and executed, and the results are consumed, on the server.
2. Initial Ajax/API requests are not required to hydrate the component. The component can interact directly with back-end services to fulfill these needs.  This makes for a less chatty client and avoids the “waterfall of requests” sometimes seen as the browser fulfills interrelated data fetches.

Limitations of React Server Components

For more information check this popular resource.

Article source: https://article-realm.com/article/Computers/Software/25000-Hands-on-with-React-Server-Components.html