React Server Components
Published: 2023-07-10 03:42:28

Today I'll be talking about a fundamental part of our lessons this quarter: React server components, or "RSCs". RSCs are files that allow an app to be rendered through the collaboration of a JavaScript server and the browser (AKA the client). By having components be rendered in a server instead of just the browser, this allows for faster loading times, code that's easier to read and less JavaScript for the browser to process.

This is what an RSC looks like:

```
import { createServerComponent } from 'react-server-components';

function UserProfileServer({ userId }) {
  // Fetch user profile data for the given userId from an API
  const user = fetchUserProfile(userId);

  return (
    <div>
      <h2>User Profile</h2>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
      <p>Location: {user.location}</p>
    </div>
  );
}

export default createServerComponent(UserProfileServer);
```

This file, _UserProfileServer.js_, is an RSC that fetches and renders a user's profile based on the provided _userId_. It's a simple example of how you can use React Server Components to perform server-side rendering of user profiles, improving the initial load times of a web application.

Now that you know what an RSC is and what it looks like, let's build one ourselves.


## Working a Simple Component

Before an RSC project can be started, the latest version of React must be installed. Also, right now RSCs can only be used if you have the App Router extension installed with React. To make a program that uses RSCs, the developers of React, Next.js, recommend starting your project by running "npx create-next-app@latest" in your terminal. This will bring up a few prompts, one of which will ask if you want to install App Router. Make sure to select "Yes".

```
> npx create-next-app@latest
Need to install the following packages:
  create-next-app@13.5.5
Ok to proceed? (y) y
✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
```

Now let's think about a simple program to demonstrate how to use React Server Components. For this exercise imagine you're working on a blog website with a list of articles.

We'd start by creating a server component that fetches and renders a list of articles on the server:

```
// BlogServerComponent.js
import React from 'react';

function BlogServerComponent() {
  const articles = fetchArticlesFromServer();

  return (
    <ul>
      {articles.map((article) => (
        <li key={article.id}>{article.title}</li>
      ))}
    </ul>
  );
}

export default BlogServerComponent;
```

Now we'd create what would be the regular client-side component, so the server component can be imported and used:

```
// BlogClientComponent.js
import React from 'react';
import BlogServerComponent from './BlogServerComponent';

function BlogClientComponent() {
  return (
    <div>
      <h1>Latest Articles</h1>
      <BlogServerComponent />
    </div>
  );
}

export default BlogClientComponent;
```

This setup allows your client component to trigger a request to the server, which will fetch and render the article list. This offloads the work from the client, resulting in faster initial page loads.

## Conclusion

One thing I personally like RSCs is because they feel easier to maintain, as it separates back-end logic from the UI. This makes it more flexible and maintainable. If two people are working on the same project, one can easily work on the front-end without being coupled to what's going on in the back-end, and vice versa. I am looking forward to using React and it's server components in future projects, and hopefully now you will too.