Un aide-mémoire sur les fonctionnalités du serveur React

Bases des fonctionnalités de React Server

• Composant serveur (React Server Component, RSC) : un composant qui s'exécute sur le serveur et s'affiche au client de la même manière que SSR.
• Fonction serveur (alias Actions serveur) : une fonction qui s'exécute uniquement sur les serveurs et envoie les informations au client.

Directives

• 'use client' : si vous utilisez un environnement activé pour le "composant serveur", vous devez marquer use client en haut du fichier pour le marquer comme composant client.
• 'use server' : si vous envisagez de muter les informations sur le serveur, vous devez marquer la directive use server en haut du corps de la fonction dans le composant ou le fichier serveur pour fonctionner uniquement sur le serveur.

Composant serveur

• RSC n'est ni avec état ni cycle de vie. Vous ne pouvez utiliser aucune fonction hook (useState, useEffect, etc.) sur le composant serveur.
• RSC peut avoir une fonction asynchrone.
• RSC peut avoir des fonctions de serveur. mais vous devez marquer « utiliser le serveur » en haut du corps de la fonction.
• RSC peut avoir des enfants à la fois dans le composant serveur et dans le composant client.
• RSC ne peut exécuter aucune API de navigateur.
• Votre RSC peut transmettre des accessoires de tout type à RSC. peut également transmettre le type d'accessoires avec une limitation au composant client. Consultez le tableau des types de directives ci-dessous.

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

Fonction serveur

• lors de la définition, vous devez avoir la directive 'use server' dans le corps ou le fichier de la fonction.
• Vous pouvez exécuter n'importe quelle fonctionnalité du serveur sur le corps de la fonction.
• Vous ne pouvez pas exécuter l'API du navigateur sur le corps de la fonction.
• Vous pouvez appeler des fonctions serveur à la fois sur le serveur et sur le client.
• Vous pouvez renvoyer une valeur avec des limitations. Consultez le tableau des types de directives ci-dessous.

Déclaration de la fonction serveur dans le composant serveur

import Button from './Button';

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

    await db.notes.create();
  }

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

Déclaration de la fonction serveur dans le fichier séparé

"use server";

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

Utilisation de la fonction serveur dans le composant client

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

Comparaison des types de valeurs de handle dans les directives

• utiliser le client : transmettre le type d'accessoire du composant serveur au composant client.
• utiliser le serveur : le type de retour des fonctions serveur

• Les autres types et instances ne sont pas disponibles.

Heureux de réagir !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!