The Startup
Published in

The Startup

An Introduction to React Server Components

Advantages of new React feature: React server components

In this article, we will see some key points of React Server Components.

On December 21 2020, reactjs.org posted a blog on react server component as Introducing Zero-Bundle-Size React Server Components.

React Server Components are an experimental feature and not for production use.

As the main use case of the server component is to move the non-user interactive component from client to server components. And this approach is mainly focussed on

  1. Good user experience
  2. Cheap Maintenance and
  3. Fast Performance

Client, Server and Shared Components

Server Components feature allows writing components as server and client components, React differentiate server and client using the file extensions, Let’s see how

  1. File extension with .server.js is a server component
  2. File extension with .client.js is a client component
  3. File extension with .js are shared components, shared components act as client and server component based on where they are imported. For example, if a shared component is imported into the client component, the shared component acts as a client component, like so if the shared component imported into server component, the shared components acts as a server component.

The server component is rendered into a special format

As we know Server-Side Rendering (SSR) Framework like NEXT.js will generate static HTML in build time or on each client request but in the case of React server component, it is different.

As we see in the demo app, the server component is rendered in a special format which can be read by the client. We can see the special format in the below image

Zero Bundle Size Server Components

Now, this the buzz word in react community, What is it? Let see

As the server components are rendered in the special format and sent to the client only when required, so it is not added to the bundle. That means not added to the build.

It also adds the advantage of not loading large libraries to the client browser.

In the below screenshots, we can see how server components bring advantage for zero bundle size.

Client Component

The above code is the client component, which imports the marked and sanitize-html dependencies, Which are in large size, those also download to client browser which slows the app loading and also waste the network bandwidth.

Server component solves this problem as we see below, the existing component is updated as a server component, so the user viewable code only sent to the client in a special format without marked and sanitize-html dependency code, so this reduces the app bundle size and avoids unwanted code downloaded to the client browser.

Server Component

We can move non-user intractable code to the server components to Improve the app performance.

Backend Access

As we see the app runs on the backend server, it has access to the database, so it makes it easy to use SQL to query data.

React also ships a package to access PostgreSQL database using react-pg.

As we can see a select query added directly in the NoteList.server.js component in the demo app

Server Component with SQL

This also denotes that the usage of Redux or Relay will be reduced, as the state management system is mostly used for remote data management.

React also ship some other packages like react-fetch and react-fs.

react-fs allow fetching data from files as below, fs denoted file system.

Component uses react-fs

Server components let you only load the code that is necessary, And the major advantages are Zero bundle size and Backend access.

--

--

--

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +756K followers.

Recommended from Medium

Grid Editing Made Simple with Chrome DevTools

Electron app Database with Dexie.js ( indexedDB ) and web worker

Ruby Explained: Each, Select, Map

Developer Story: DB Migrations in NodeJS (PostgreSQL Edition)

React Animations in Depth

Error: Objects are not valid as a React child (found: object with keys {}).

Forever Thankful on FB —Using React to bring the Thankful Reaction back to Facebook 🌸

Normalized GraphQL Caching in Swift

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nilanth

Nilanth

Full Stack Developer | Let’s make the web. Faster 🚀 | Tweet me @Nilanth | nilanth.vercel.app

More from Medium

Easy Custom API Hook — React

Implementing Google Fonts into your React project using Styled Components

React Components

Learn how powerful NextJS is and how it can improve your web development