A React server feature cheat sheet

React Server feature basics

• Server Component (React Server Component, RSC): A component that runs on the server and renders to the client as the same as SSR.
• Server Function (a.k.a. Server Actions): A function that runs on the servers only and sends the information to the client.

Directives

• 'use client': If you are using a "server component" enabled environment, you should mark use client at the top of the file to mark it as a client component.
• 'use server': If you have a consideration of mutating the information on the server, you should mark use server directive at the top of the function body in the server component or file to operate only on the server.

Server Component

• RSC is no stateful nor lifecycle. You can't use any hook functions (useState, useEffect, etc.) on the server component.
• RSC can have an async function.
• RSC can have server functions. but you must mark 'use server' in the top of the function body.
• RSC can have children in both the server component and the client component.
• RSC cannot run any browser API.
• Your RSC can pass props of any type to RSC. also can pass props type with limitation to the client component. Check the directive types table below.

import marked from 'marked'; // Not included in bundle
import sanitizeHtml from 'sanitize-html'; // Not included in bundle

async function Page({page}) {
  // NOTE: loads *during* render, when the app is built.
  const content = await file.readFile(`${page}.md`);

  return <div>{sanitizeHtml(marked(content))}</div>;
}

Server Function

• when definition, you must have the 'use server' directive in the function body or file.
• You can run any server features on the function body.
• You cannot run the browser API on the function body.
• You can call server functions on both the server and client.
• You can return value with limitations. Check the directive types table below.

Declaring server function in the server component

import Button from './Button';

function EmptyNote () {
  async function createNoteAction() {
    // Server Function
    'use server';

    await db.notes.create();
  }

  return <Button onClick={createNoteAction}/>;
}

Declaring server function in the separate file

"use server";

export async function updateName(name) {
  if (!name) {
    return {error: 'Name is required'};
  }
  await db.users.updateName(name);
}

Using server function in the client component

"use client";

import {updateName} from './actions';

function UpdateName() {
  return (
    <form action={updateName}>
      <input type="text" name="name" />
    </form>
  )
}

Comparison of handle value types in directives

• use client: passing prop type from server component to client component.
• use server: The return type of Server functions

Type	use client	use server	Notes
string	✅	✅	both string value and iterables are supported.
number	✅	✅
bigint	✅	✅
boolean	✅	✅
undefined	✅	✅
null	✅	✅
Array	✅	✅	Only available in the item of serializable list.
Map	✅	✅	Only available in the item of serializable list.
Set	✅	✅	Only available in the item of serializable list.
TypedArray	✅	✅
ArrayBuffer	✅	✅
Date	✅	✅
object	✅	✅	Support only plain object(object initializers or JSON), null prototype not supported.
Promises	✅	✅	Only available in the serializable list.
ReactNode	✅	❌	Only Server Component can send it to Client Component via props.
FormData	❌	✅	Only server functions can return FormData instance.
symbol	⚠️	⚠️	Only symbols registered in the global Symbol registry via Symbol.for
function	⚠️	⚠️	Only server functions allowed.
class	❌	❌	Any instance objects are not serializable.

• The other types and instances are not available.

Happy react'ing!