Composants Serveur et Client

Pour comprendre le fonctionnement des Composants Serveur et Client, il est utile de connaître deux concepts fondamentaux du web :

• Les environnements où votre code d'application peut s'exécuter : le serveur et le client.
• La frontière réseau qui sépare le code serveur et client.

Environnements Serveur et Client

Dans le contexte des applications web :

• Le client fait référence au navigateur sur l'appareil d'un utilisateur qui envoie une requête à un serveur pour votre code d'application. Il transforme ensuite la réponse reçue du serveur en une interface avec laquelle l'utilisateur peut interagir.
• Le serveur fait référence à l'ordinateur dans un centre de données qui stocke votre code d'application, reçoit les requêtes d'un client, effectue des calculs et renvoie une réponse appropriée.

Chaque environnement a son propre ensemble de capacités et de contraintes. Par exemple, en déplaçant le rendu et la récupération de données vers le serveur, vous pouvez réduire la quantité de code envoyée au client, ce qui peut améliorer les performances de votre application. Mais, comme vous l'avez appris précédemment, pour rendre votre interface interactive, vous devez mettre à jour le DOM côté client.

Par conséquent, le code que vous écrivez pour le serveur et le client n'est pas toujours le même. Certaines opérations (comme la récupération de données ou la gestion de l'état utilisateur) sont mieux adaptées à un environnement qu'à l'autre.

Frontière Réseau

La Frontière Réseau est une ligne conceptuelle qui sépare les différents environnements.

Dans React, vous choisissez où placer la frontière réseau dans votre arborescence de composants. Par exemple, vous pouvez récupérer des données et rendre les publications d'un utilisateur sur le serveur (en utilisant des Composants Serveur), puis rendre le bouton interactif LikeButton pour chaque publication côté client (en utilisant des Composants Client).

De même, vous pouvez créer un composant Nav qui est rendu sur le serveur et partagé entre les pages, mais si vous souhaitez afficher un état actif pour les liens, vous pouvez rendre la liste des Links côté client.

En arrière-plan, les composants sont divisés en deux graphes de modules. Le graphe de modules serveur (ou arbre) contient tous les Composants Serveur qui sont rendus sur le serveur, et le graphe de modules client (ou arbre) contient tous les Composants Client.

Après le rendu des Composants Serveur, un format de données spécial appelé React Server Component Payload (RSC) est envoyé au client. Le payload RSC contient :

1. Le résultat rendu des Composants Serveur.
2. Des espaces réservés (ou trous) pour indiquer où les Composants Client doivent être rendus et des références à leurs fichiers JavaScript.

React utilise ces informations pour consolider les Composants Serveur et Client et mettre à jour le DOM côté client.

Voyons comment cela fonctionne.

Utilisation des Composants Client

Comme vous l'avez appris dans le chapitre précédent, Next.js utilise par défaut les Composants Serveur - cela améliore les performances de votre application et signifie que vous n'avez pas à prendre de mesures supplémentaires pour les adopter.

En revenant à l'erreur dans votre navigateur, Next.js vous avertit que vous essayez d'utiliser useState dans un Composant Serveur. Vous pouvez résoudre ce problème en déplaçant le bouton interactif "Like" vers un Composant Client.

Créez un nouveau fichier appelé like-button.js dans le dossier app qui exporte un composant LikeButton :

export default function LikeButton() {}

Déplacez l'élément <button> et la fonction handleClick() de page.js vers votre nouveau composant LikeButton :

export default function LikeButton() {
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return <button onClick={handleClick}>Like ({likes})</button>;
}

Ensuite, déplacez l'état likes et l'import :

import { useState } from 'react';
 
export default function LikeButton() {
  const [likes, setLikes] = useState(0);
 
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return <button onClick={handleClick}>Like ({likes})</button>;
}

Maintenant, pour faire du LikeButton un Composant Client, ajoutez la directive React 'use client' en haut du fichier. Cela indique à React de rendre le composant côté client.

'use client';
 
import { useState } from 'react';
 
export default function LikeButton() {
  const [likes, setLikes] = useState(0);
 
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return <button onClick={handleClick}>Like ({likes})</button>;
}

De retour dans votre fichier page.js, importez le composant LikeButton dans votre page :

import LikeButton from './like-button';
 
function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>;
}
 
export default function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
      <LikeButton />
    </div>
  );
}

Enregistrez les deux fichiers et visualisez votre application dans le navigateur. Maintenant qu'il n'y a plus d'erreurs, une fois que vous apportez des modifications et enregistrez, vous devriez remarquer que le navigateur se met automatiquement à jour pour refléter le changement.

Cette fonctionnalité s'appelle Fast Refresh. Elle vous donne un retour instantané sur toutes les modifications que vous apportez et est préconfigurée avec Next.js.

Résumé

Pour résumer, vous avez appris les environnements serveur et client et quand utiliser chacun d'eux. Vous avez également appris que Next.js utilise par défaut les Composants Serveur React pour améliorer les performances, et comment vous pouvez opter pour des Composants Client pour rendre de petites parties de votre interface interactive.

Lecture complémentaire

Il y a beaucoup plus à apprendre sur les Composants Serveur et Client. Voici quelques ressources supplémentaires :

• Documentation des Composants Serveur
• Documentation des Composants Client
• Modèles de Composition
• La directive "use client"
• La directive "use server"