What Are React Server Components?
Tags: react, frontend, javascript, webdev
Published: 2021-01-07 11:00:16

---
title: What Are React Server Components?
published: true
tags: react, frontend, javascript, webdev
canonical_url: https://kinga.codes/what-are-react-server-components
cover_image: https://kinga.codes/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1610201617246%2FixSHugTTT8.png%3Fw%3D1600%26h%3D840%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=3840&q=75
---

At the end of 2020 the React team shared with us their upcoming feature, called _React Server Components_. This feature is still in research and development, it should not be used in production yet, but we can play around with it. You can find a talk and a demo shared by them [here](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html).

![server-components](https://www.frontendlove.blog/static/cf6ce0cd56b56cc30c2582c8f5c9b2ee/42cbc/image-1.png "server-components")

<figcaption>Created with <a href="https://sketch.io/sketchpad" target="_blank">Sketchpad</a></figcaption>

_React Server Components_ are normal React components (with some limitations, i.e. they can not use state or effects), that execute on the server. The main pain points that _Server Components_ try to improve are **performance** and **data fetching**.

You might wonder how are these different from Server-Side Rendering (SSR), but actually they are complementary. SSR produces an HTML, but we still need to download all the JavaScript code. _Server Components_ use a different format, which will be then translated to HTML. This format allows to refetch our components. The state of _Client Components_ (regular components) will be preserved on refetch.

### About Performance

Almost every React application uses some third-party packages, resulting in increased bundle size and reduced performance. Of course, there are some ways to improve these problems client-side: we can include only part of the packages in our bundles or we can implement the features ourselves instead, but it might be time-consuming.

_Server Components_ allow us to import third-party libraries on the server, without increasing our application’s bundle size. So we can say that _Server Components_ are **Zero-Bundle-Size Components**. Components that are non-interactive and only render static content could be easily migrated to the server.

### About Data Fetching

Another benefit is that _Server Components_ have **full access to the backend**. We all know that endpoints are not always designed with the UI in mind, and we have to do additional processing on the client. By using _Server Components_ we can move the complexity to the server (but also reduce it by taking advantage of direct backend access), leaving our client-side components cleaner.

We could mention many other benefits, like automatic code splitting, UX improvements, etc., but I recommend you read the [RFC](https://github.com/josephsavona/rfcs/blob/server-components/text/0000-server-components.md) for an in-depth explanation. For now, let’s see an example, so we can better understand how these components work.

### Before we begin...

Two new concepts will be introduced besides _Server Components_. Our regular React components will be called _Client Components_, but nothing changes in how we define them. Some components do not use state, effects or backend resources, they just transform some data, we will call them _Shared Components_.

As a convention, they will have suffixes that show their type:

- Component.client.js (or .jsx, .tsx) - client component
- Component.server.js - server component
- Component.js - shared component

_Shared Components_, as the name suggests, can be imported both client and server-side. _Server Components_ can import _Server_ or _Client Components_, but _Client Components_ can not import _Server Components_.

### How to Migrate Components to the Server?

Let’s say we have a component similar to the one below:

```jsx
// Article.js
import { fetch } from 'react-fetch';
import { format } from 'date-fns';

import ArticleHeader from './ArticleHeader';
import ArticleDeatails from './ArticleDetails';

export default function Article({ artileId }) => {
  const article = fetch(`my-api/articles/${articleId}`);
  const postedAt = format(article.created_at, 'mm/dd/yy');

  return (
    <>
      <ArticleHeader postedAt={postedAt} />
      <ArticleDetails article={article} />
    </>
  );
}
```

We can see it fetches the current article from our API, it transforms the article’s date with the help of a third-party library, then renders two components (header and details). We could move _Article_ to the server, as it does not have any interaction, it only reads some data, transforms it, and renders two other components. We will ignore the other two components now, let’s say we want to keep them on the client. As we know, our server component can still import them. So the only thing we need in this case, is to add the _server_ and _client_ suffixes:

```jsx
// Article.server.js
import { fetch } from 'react-fetch';
import { format } from 'date-fns';

import ArticleHeader from './ArticleHeader.client';
import ArticleDeatails from './ArticleDetails.client';

export default function Article({ artileId }) => {
  const article = fetch(`my-api/articles/${articleId}`);
  const postedAt = format(article.created_at, 'mm/dd/yy');

  return (
    <>
      <ArticleHeader postedAt={postedAt} />
      <ArticleDetails article={article} />
    </>
  );
}
```

Easy, right? Of course, our applications might have more complex components and we need to think about how to better structure them in order to fully enjoy the benefits of _Server Components_. We can combine _Server Components_ with SSR to have an even better performance. This is a really exciting feature, which could bring many benefits for us, developers, but most importantly for our users.

Thank you for reading this article, I hope I made you curious and you try it out yourself. You can find the official demo [here](http://github.com/reactjs/server-components-demo).