Home >Web Front-end >JS Tutorial >A React server feature cheat sheet

A React server feature cheat sheet

Barbara Streisand
Barbara StreisandOriginal
2024-12-22 12:31:09376browse

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

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>;
}

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!

The above is the detailed content of A React server feature cheat sheet. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn