Grundlagen der React Server-Funktion

• Serverkomponente (React Server Component, RSC): Eine Komponente, die auf dem Server ausgeführt wird und auf dem Client genauso gerendert wird wie SSR.
• Serverfunktion (auch bekannt als Serveraktionen): Eine Funktion, die nur auf den Servern ausgeführt wird und die Informationen an den Client sendet.

Richtlinien

• ?Client verwenden“: Wenn Sie eine Umgebung mit aktivierter ?Serverkomponente“ verwenden, sollten Sie ?Client verwenden“ oben in der Datei markieren, um ihn als Client-Komponente zu kennzeichnen.
• ?Server verwenden“: Wenn Sie erw?gen, die Informationen auf dem Server zu ?ndern, sollten Sie oben im Funktionsk?rper in der Serverkomponente oder -datei die Direktive ?Server verwenden“ markieren, um nur auf dem Server zu arbeiten.

Serverkomponente

• RSC ist weder zustandsbehaftet noch lebenszyklusorientiert. Sie k?nnen keine Hook-Funktionen (useState, useEffect usw.) auf der Serverkomponente verwenden.
• RSC kann eine asynchrone Funktion haben.
• RSC kann Serverfunktionen haben. Sie müssen jedoch oben im Funktionsk?rper ?Server verwenden“ markieren.
• RSC kann sowohl in der Serverkomponente als auch in der Clientkomponente untergeordnete Elemente haben.
• RSC kann keine Browser-API ausführen.
• Ihr RSC kann Requisiten jeglicher Art an RSC weitergeben. Au?erdem kann der Props-Typ mit Einschr?nkung an die Client-Komponente übergeben werden. Sehen Sie sich die Tabelle mit den Direktiventypen unten an.

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

Serverfunktion

• Bei der Definition muss die Direktive ?Server verwenden“ im Funktionsk?rper oder in der Datei vorhanden sein.
• Sie k?nnen beliebige Serverfunktionen auf dem Funktionsk?rper ausführen.
• Sie k?nnen die Browser-API nicht auf dem Funktionsk?rper ausführen.
• Sie k?nnen Serverfunktionen sowohl auf dem Server als auch auf dem Client aufrufen.
• Sie k?nnen den Wert mit Einschr?nkungen zurückgeben. Sehen Sie sich die Tabelle mit den Direktiventypen unten an.

Serverfunktion in der Serverkomponente deklarieren

import Button from './Button';

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

    await db.notes.create();
  }

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

Serverfunktion in der separaten Datei deklarieren

"use server";

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

Verwendung der Serverfunktion in der Client-Komponente

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

Vergleich von Handle-Werttypen in Anweisungen

• Client verwenden: übergeben des Requisitentyps von der Serverkomponente an die Clientkomponente.
• Server verwenden: Der Rückgabetyp der Serverfunktionen

• Die anderen Typen und Instanzen sind nicht verfügbar.

Viel Spa? beim Reagieren!

Das obige ist der detaillierte Inhalt vonEin Spickzettel für React-Serverfunktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!