React Server Components

React is used to build your user interface. By default, all components are server components. That means that the component is rendered on the server as HTML and then streamed to the client. These do not include any client-side interactivity.

export default function MyServerComponent() {
  return <div>Hello, from the server!</div>;
}

When a user needs to interact with your component: clicking a button, setting state, etc, then you must use a client component. Mark the client component with the "use client" directive. This will be hydrated by React in the browser.

"use client";

export default function MyClientComponent() {
  return <button>Click me</button>;
}

Fetching and displaying data

React Server Components run on the server, they can easily fetch data and make it part of the payload that’s sent to the client.

src/app/pages/todos/TodoPage.tsx

export async function Todos({ appContext }) {
  const todos = await db.todo.findMany({ where: { userId: appContext.user.id } });
  return (
    <ol>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ol>
  );
}

export async function TodoPage({ appContext }) {
  return (
    <div>
      <h1>Todos</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <Todos appContext={appContext} />
      </Suspense>
    </div>
  );
}

The TodoPage component is a server component. It it rendered by a route, so it receives the appContext object. We pass this to the Todos component, which is also a server component, and renders the todos.

Suspense

When a server component is async, you’ll able to wrap it in a Suspense boundary. This will allow you to show a loading state while the data is being fetched.

Server Functions

Allow you to execute code on the server from a client component.

@/pages/todos/functions.tsx

"use server";

export async function addTodo(formData: FormData, { appContext }: RouteOptions) {
  const title = formData.get("title");
  await db.todo.create({ data: { title, userId: appContext.user.id } });
}

The addTodo function is a server function. It is executed on the server when the form is submitted from a client side component. The form data is sent to the server and the function is executed. The result is sent back to the client, parsed by React, and the view is updated with the new todo.

@/pages/todos/AddTodo.tsx

"use client";

import { addTodo } from "./functions";

export default function AddTodo() {
  return (
    <form action={addTodo}>
      <input type="text" name="title" />
      <button type="submit">Add</button>
    </form>
  );
}

Context

Context is a way to share data globally between server components on a per-request basis. The context is populated by middleware, and is available to all React Server Components Pages and Server Functions.