Libérer la puissance des composants du serveur React | Partie 1

? Salut à tous !
React.js est l'une des bibliothèques JavaScript les plus populaires pour créer des interfaces utilisateur. Bien que la communauté React soit bien documentée, il existe encore des thèmes et des concepts moins connus.
Faisons du thé ou du café, c'est parti !
Les composants React Server (RSC) sont une nouvelle fonctionnalité expérimentale introduite par l'équipe React pour optimiser les performances de rendu. Ils permettent aux développeurs de créer des parties de leur application qui sont rendues sur le serveur tout en conservant le modèle de composant React.
Il s'exécute dans un environnement distinct du client ou du serveur SSR et peut être appelé une fois au moment de la construction sur le serveur CI, ou il peut être exécuté pour chaque requête à l'aide d'un serveur Web.
Grâce à la puissance des composants React Server, nous pouvons lire le contenu des fichiers directement dans notre composant React.
Ci-dessous, vous trouverez un exemple simple, comment pouvons-nous le faire.

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

Le client ne verra que la sortie rendue du fichier. Cela signifie que le contenu est visible lors du chargement de la première page et que l'ensemble n'inclut pas les bibliothèques coûteuses (marquées, sanitize-html) nécessaires au rendu du contenu statique.

Composants serveur avec un serveur

Avec les composants serveur, nous pouvons communiquer avec la base de données, récupérer toutes les données et les utiliser dans le client. C'est que nous pouvons également le faire dans les applications Next.js, intégrer n'importe quel ORM.
Vous trouverez ci-dessous un exemple simple d'utilisation des composants serveur pour récupérer des données à partir d'une base de données.

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

Le bundler combine ensuite les données, les composants serveur rendus et les composants client dynamiques dans un bundle. Lorsque la page se charge, le navigateur ne voit pas les composants Note et Author d'origine ; seule la sortie rendue est envoyée au client. Les composants du serveur peuvent être rendus dynamiques en les récupérant à partir d'un serveur, où ils peuvent accéder aux données et les restituer à nouveau.

La puissance des composants asynchrones avec les composants serveur

Les composants serveur introduisent une nouvelle façon d'écrire des composants en utilisant async/await. Lorsque vous attendez dans un composant asynchrone, React se suspendra et attendra que la promesse soit résolue avant de reprendre le rendu. Cela fonctionne au-delà des frontières serveur/client avec la prise en charge du streaming pour Suspense.
L'exemple du composant serveur :

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

Les commentaires sont de moindre priorité, nous démarrons donc la promesse sur le serveur et l'attendons sur le client avec l'API *use *. Cela sera suspendu sur le client, sans bloquer le rendu du contenu de la note.

Dans les prochaines parties, nous discuterons du pouvoir des actions et directives du serveur (« utiliser le client », « utiliser le serveur »), et pourquoi « utiliser le serveur » n'a pas le même rôle que « utiliser le client » ?

A bientôt !

Bien que les composants serveur soient encore en phase expérimentale, ils attirent lentement l'attention en raison de leur potentiel à améliorer des applications à grande échelle. Ils éliminent le besoin d'envoyer du JavaScript inutile au client, ce qui se traduit par des temps de chargement plus rapides et une expérience utilisateur plus fluide.

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!