Die Leistungsfähigkeit der React-Server-Komponenten freischalten | Teil 1

? Hallo zusammen!
React.js ist eine der beliebtesten JavaScript-Bibliotheken zum Erstellen von Benutzeroberflächen. Obwohl die React-Community gut dokumentiert ist, gibt es noch einige weniger bekannte Themen und Konzepte.
Lass uns Tee oder Kaffee kochen, los geht's!
React Server Components (RSC) sind eine neue experimentelle Funktion, die vom React-Team eingeführt wurde, um die Rendering-Leistung zu optimieren. Sie ermöglichen es Entwicklern, Teile ihrer App zu erstellen, die auf dem Server gerendert werden, und gleichzeitig das React-Komponentenmodell beizubehalten.
Es wird in einer vom Client oder SSR-Server getrennten Umgebung ausgeführt und kann einmal zur Erstellungszeit auf dem CI-Server aufgerufen werden, oder sie können für jede Anforderung über einen Webserver ausgeführt werden.
Mit der Leistungsfähigkeit der React Server-Komponenten können wir Dateiinhalte direkt in unserer React-Komponente lesen.
Unten finden Sie ein einfaches Beispiel, wie wir das machen können.

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

Der Client sieht nur die gerenderte Ausgabe der Datei. Dies bedeutet, dass der Inhalt beim Laden der ersten Seite sichtbar ist und das Paket nicht die teuren Bibliotheken (markiert, sanitize-html) enthält, die zum Rendern des statischen Inhalts erforderlich sind.

Serverkomponenten mit einem Server

Mit Serverkomponenten können wir mit der Datenbank kommunizieren, beliebige Daten abrufen und im Client verwenden. Wir können es auch in Next.js-Anwendungen tun und beliebige ORMs integrieren.
Unten finden Sie ein einfaches Beispiel für die Verwendung von Serverkomponenten zum Abrufen von Daten aus der Datenbank.

import db from './database';

async function Note({id}) {
  // NOTE: loads *during* render.
  const note = await db.notes.get(id);
  return (
    <div>
      <Author>



<p>In database file there can be implementation of data query from database.<br>
For example:<br>
</p>

<pre class="brush:php;toolbar:false">const db = {
  notes: {
    get: async (id) => {
      return dbClient.query('SELECT * FROM notes WHERE id = ?', [id]);
    }
  },
  authors: {
    get: async (id) => {
      return dbClient.query('SELECT * FROM authors WHERE id = ?', [id]);
    }
  }
};

Der Bundler kombiniert dann die Daten, gerenderten Serverkomponenten und dynamischen Clientkomponenten zu einem Bundle. Wenn die Seite geladen wird, sieht der Browser die ursprünglichen Komponenten „Notiz“ und „Autor“ nicht; Nur die gerenderte Ausgabe wird an den Client gesendet. Serverkomponenten können dynamisch gemacht werden, indem sie erneut von einem Server abgerufen werden, wo sie auf die Daten zugreifen und erneut rendern können.

Die Leistungsfähigkeit von Async Components mit Server Components

Serverkomponenten führen eine neue Möglichkeit zum Schreiben von Komponenten mithilfe von async/await ein. Wenn Sie in einer asynchronen Komponente warten, hält React an und wartet auf die Auflösung des Versprechens, bevor das Rendern fortgesetzt wird. Dies funktioniert über Server-/Client-Grenzen hinweg mit Streaming-Unterstützung für Suspense.
Das Beispiel der Serverkomponente:

// Server Component
import db from './database';

async function Page({id}) {
  // Will suspend the Server Component.
  const note = await db.notes.get(id);

  // NOTE: not awaited, will start here and await on the client. 
  const commentsPromise = db.comments.get(note.id);
  return (
    <div>
      {note}
      <Suspense fallback={<p>Loading Comments...</p>}>
        <Comments commentsPromise={commentsPromise} />
      </Suspense>
    </div>
  );
}

// Client Component
"use client";
import {use} from 'react';

function Comments({commentsPromise}) {
  // NOTE: this will resume the promise from the server.
  // It will suspend until the data is available.
  const comments = use(commentsPromise);
  return comments.map(commment => <p>{comment}</p>);
}

Die Kommentare haben eine niedrigere Priorität, daher starten wir das Versprechen auf dem Server und warten auf dem Client mit der *use * API darauf. Dadurch wird der Client angehalten, ohne dass die Wiedergabe des Notizinhalts blockiert wird.

In den nächsten Teilen besprechen wir die Leistung von Serveraktionen und -anweisungen („Client verwenden“, „Server verwenden“) und warum „Server verwenden“ nicht dieselbe Rolle hat wie „Client verwenden“?

Bis bald!

Während sich Serverkomponenten noch in der experimentellen Phase befinden, gewinnen sie aufgrund ihres Potenzials zur Verbesserung groß angelegter Anwendungen langsam an Aufmerksamkeit. Sie machen das Senden unnötigen JavaScripts an den Client überflüssig, was zu schnelleren Ladezeiten und einem reibungsloseren Benutzererlebnis führt.

Das obige ist der detaillierte Inhalt vonDie Leistungsfähigkeit der React-Server-Komponenten freischalten | Teil 1. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!