NextJs 13 React Server Components are here

React Server Components is an entirely new feature in Next.js 13.4. Developers now have more leeway and control over the server-side rendering process because they can incorporate complicated server-side functionality into their React components.

This article will explain React Server Components, how they function, and how you may include them in your Next.js apps.

What are React Server Components?

Next.js 13.4 supports writing server-side code within React components with the help of a new feature called "React Server Components." They are an enhancement and expansion of Next.js's existing server components capability.

Thanks to React Server Components, developers no longer have to create separate scripts for server-side tasks like database queries. The less information that must be sent back and forth between the client and the server, the better the performance and the quicker the page will load.

How do React Server Components work?

Using React Server Components, developers may create server-side functionality in their React components. We may minimize the information sent to the client's device by processing this logic on the server during server-side rendering.

How do I use Server Components?

Starting in Next.js 13.4, a server component will default in the App Router. Components in the pages directory continue to operate conventionally.

Because of this, we may incorporate server-side code inside a React component. The server handles the rendering for this part, so the browser merely receives the HTML code.

The following example shows a server-side component that displays all user data.

async function getData() {
  const res = await fetch("<https://jsonplaceholder.typicode.com/users>");

  return res.json();
}

export default async function UsersPage() {
  const data = await getData();

  return (
    <main>
      {data.map((user) => {
        return (
          <div key={user.id}>
            <div>{user.name}</div>
            <div>{user.email}</div>
          </div>
        );
      })}
    </main>
  );
}

When to use Client Components?

Client components should be used whenever possible to facilitate user interaction. Select a client component if you need a button to do some action.

You can use the following table as a quick reference for when to utilize each type:

A 'use client' directive must be appended to the file to use client components. Your component will then be sent to the end user, where the javascript can be run.

'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Conclusion

Next.js 13.4 supports React Server Components, a fantastic new feature that streamlines the integration of server-side logic into React applications. Better performance and quicker load times can be achieved due to developers having more say over rendering that occurs on the server.

Check out the Next.js docs to learn more about React Server Components.