Maison > interface Web > js tutoriel > Composants du serveur React (RSC) : une analyse approfondie avec des exemples

Composants du serveur React (RSC) : une analyse approfondie avec des exemples

Barbara Streisand
Libérer: 2024-12-31 11:29:10
original
1084 Les gens l'ont consulté

Les composants serveur React (RSC) constituent une évolution significative de l'architecture de React, conçus pour améliorer les performances, l'expérience des développeurs et l'expérience utilisateur dans les applications rendues par le serveur. Cet article explore ce qu'est le RSC, en quoi il diffère du rendu côté serveur (SSR) et les avantages qu'il offre avec des exemples et des diagrammes visuels pour améliorer la compréhension.


Que sont les composants du serveur React (RSC) ?

Les composants du serveur React sont une fonctionnalité qui permet aux composants d'être rendus sur le serveur et envoyés au client sous forme d'arborescence React sérialisée. Contrairement au rendu traditionnel côté client, où tous les composants et la logique sont traités sur le client, RSC déplace une partie importante de ce travail vers le serveur, réduisant ainsi la taille du bundle et améliorant les performances.

Caractéristiques clés du RSC

  1. Composants rendus par le serveur : les composants sont exécutés sur le serveur et diffusés vers le client.
  2. Taille du bundle améliorée : pas besoin d'envoyer le code JavaScript des composants rendus par le serveur au client.
  3. Intégration transparente : RSC s'intègre de manière transparente aux paradigmes côté client et SSR.
  4. Rendu en cascade zéro : le contenu rendu par le serveur minimise les allers-retours pour la récupération des données.

En quoi le RSC diffère-t-il du SSR ?

Feature SSR (Server-Side Rendering) RSC (React Server Components)
Execution Environment Both server and client handle logic and rendering. Only the server renders specified components.
Bundle Size Ships JavaScript for rendering logic to the client. Does not ship server component logic to the client.
Interactivity Requires hydration for interactivity on the client. Combines server-rendered components with client-side interactivity.
Performance Full page rendering on the server. Streams component-level updates for faster rendering.
Fonctionnalité SSR (rendu côté serveur) RSC (composants du serveur React)
ête> Environnement d'exécution Le serveur et le client gèrent la logique et le rendu. Seul le serveur restitue les composants spécifiés. Taille du paquet Expédie JavaScript pour le rendu de la logique au client. N'envoie pas la logique des composants du serveur au client. Interactivité Nécessite une hydratation pour l'interactivité sur le client. Combine des composants rendus par le serveur avec une interactivité côté client. Performances Rendu pleine page sur le serveur. Diffuse les mises à jour au niveau des composants pour un rendu plus rapide.

Avantages du RSC par rapport au SSR

  1. Charge de travail réduite du client :
    • RSC minimise la quantité de JavaScript envoyée au client, améliorant ainsi les performances.
  2. Meilleur fractionnement du code :
    • Les composants peuvent être répartis entre le serveur et le client, réduisant ainsi les transferts de données inutiles.
  3. Délai d'interactivité amélioré :
    • RSC permet au contenu critique de se charger plus rapidement puisque les composants du serveur ne nécessitent pas d'hydratation.

Comment fonctionne RSC

Étape 1 : Rendu du serveur

Les composants désignés comme composants serveur s'exécutent sur le serveur, récupérant les données et générant l'arborescence React.

Étape 2 : Diffusion vers le client

Le serveur diffuse les composants React sérialisés vers le client, où ils s'intègrent aux composants React existants côté client.

Étape 3 : Rendu client

Les composants clients interactifs hydratent et prennent le relais selon les besoins.


Exemple de code : RSC contre SSR

Mise en œuvre RSC

// ServerComponent.server.js
export default function ServerComponent() {
  const data = fetchDataFromDatabase(); // Server-only logic
  return <div>Data from server: {data}</div>;
}

// ClientComponent.client.js
export default function ClientComponent() {
  return <button onClick={() => alert('Clicked!')}>Click Me</button>;
}

// App.js
import ServerComponent from './ServerComponent.server';
import ClientComponent from './ClientComponent.client';

export default function App() {
  return (
    <div>
      <ServerComponent />
      <ClientComponent />
    </div>
  );
}
Copier après la connexion

Dans cet exemple, ServerComponent gère la logique du serveur, tandis que ClientComponent reste interactif sur le client.

Mise en œuvre de la RSS

export default function SSRComponent({ data }) {
  return (
    <div>
      <div>Data: {data}</div>
      <button onClick={() => alert('Clicked!')}>Click Me</button>
    </div>
  );
}

// Server-side Rendering
const serverData = fetchDataFromDatabase();
const html = renderToString(<SSRComponent data={serverData} />);
Copier après la connexion

Dans SSR, toute la logique de rendu, y compris les composants interactifs, doit être gérée lors du rendu côté serveur.


Diagramme de comparaison des performances

Voici un schéma simplifié comparant RSC et SSR :

Flux de travail RSC :

  1. Le serveur traite les composants du serveur et diffuse les résultats.
  2. Le client traite uniquement les composants interactifs.

Flux de travail SSR :

  1. Le serveur génère l'intégralité du HTML et du JavaScript de la page.
  2. Le client hydrate la page entière pour l'interactivité.

React Server Components (RSC): A Deep Dive with Examples


Optimisation du rendu dans RSC

Les

Les composants du serveur React exploitent le streaming pour restituer le contenu progressivement. Cela garantit que le contenu le plus critique est peint immédiatement, tandis que les parties moins critiques arrivent dès qu'elles sont prêtes.

Comment RSC accélère le rendu

  • Les composants du serveur sont pré-récupérés et diffusés directement.
  • L'interactivité côté client se charge séparément, évitant ainsi le besoin d'une hydratation sur une page entière.
  • La taille réduite du bundle améliore le temps d'interactivité pour les utilisateurs.

Conclusion

Les composants React Server offrent une approche révolutionnaire pour optimiser les performances des applications React. En déchargeant la logique de rendu sur le serveur, en réduisant les bundles côté client et en tirant parti du streaming, RSC améliore à la fois l'expérience des développeurs et des utilisateurs.

Si vous souhaitez faire évoluer efficacement vos applications React tout en améliorant les performances, l'exploration de RSC est indispensable.

Que pensez-vous du RSC ? Faites-le moi savoir dans les commentaires ci-dessous ! ?

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal