Composants serveur et client dans Next.js Quand et comment les utiliser

Next.js 13 a introduit les composants React Server, donnant aux développeurs le pouvoir de choisir où et comment afficher les composants, soit sur le serveur pour les performances, soit sur le client pour l'interactivité. Cette flexibilité nous permet de créer des applications combinant vitesse et capacités dynamiques.

Dans cet article, nous explorerons non seulement les bases, mais nous découvrirons également comment utiliser les composants serveur au sein des composants clients, un besoin courant lors de la création d'applications dynamiques et efficaces.

Comprendre les composants du serveur

Les composants du serveur sont entièrement rendus sur le serveur et ne nécessitent aucun JavaScript côté client. Ils sont parfaits pour le contenu statique comme les en-têtes, les pieds de page ou même les composants basés sur les données qui ne nécessitent pas d'interaction de l'utilisateur.

Exemple : composant de serveur simple

// app/components/Header.js
export default function Header() {
  return (
    <header>
      <h1>My Static Header</h1>
    </header>
  );
}

Ce composant est rendu sur le serveur et n'implique aucune interaction côté client, ce qui signifie qu'il se charge plus rapidement avec moins de JavaScript.

Avantages des composants serveur

• Charge utile JavaScript réduite : les composants du serveur réduisent la quantité de JavaScript envoyée au navigateur.
• Récupération de données améliorée : les composants du serveur peuvent récupérer les données plus près de la base de données, réduisant ainsi la latence du réseau.

Récupération de données dans un composant serveur

// app/components/PostList.js
export default async function PostList() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return (
    <ul>
      {posts.slice(0, 5).map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Ce composant PostList récupère les données sur le serveur et envoie le HTML pré-rendu au client, garantissant des temps de chargement plus rapides.

Quand utiliser les composants clients

Les composants clients sont essentiels lorsque vous avez besoin d'interactivité, comme les entrées de formulaire, les écouteurs d'événements ou le contenu dynamique. Ces composants utilisent JavaScript sur le client pour gérer les interactions des utilisateurs.

Exemple : composant client pour l'interactivité

// app/components/SearchBar.js
'use client';  // This makes the component a client component

import { useState } from 'react';

export default function SearchBar() {
  const [searchTerm, setSearchTerm] = useState('');

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search..."
      />
      <p>Searching for: {searchTerm}</p>
    </div>
  );
}

La SearchBar est interactive, elle doit donc être un composant client. Vous pouvez utiliser le hook useState et d'autres hooks React uniquement dans les composants clients.

Vous pourriez avoir un cas d'utilisation pour combiner des composants serveur et client, alors parlons de la façon de procéder ensuite :

Combinaison de composants serveur et client

L'un des principaux atouts de Next.js 13 est la possibilité de combiner des composants serveur et client. Une bonne pratique consiste à utiliser les composants serveur par défaut et à pousser les composants clients aussi profondément que possible dans votre arborescence de composants.

Exemple : combinaison de composants serveur et client

// app/layout.js
import SearchBar from './components/SearchBar';

export default function Layout({ children }) {
  return (
    <div>
      <header>My Blog</header>
      <SearchBar />  {/* Client component for interactivity */}
      {children}
    </div>
  );
}

Le composant SearchBar gère l'interactivité côté client, tandis que le reste de la mise en page est rendu par le serveur, offrant un équilibre entre performances et interactivité.

À l'inverse, vous pourriez avoir un cas d'utilisation pour utiliser un composant serveur à l'intérieur d'un composant client. Voyons comment procéder.

Comment utiliser les composants serveur dans les composants clients

Il est important de comprendre que les composants serveur peuvent être imbriqués dans les composants clients, mais pas importés directement dans ceux-ci. Pour inclure un composant serveur dans un composant client, vous le transmettez en tant qu'enfant ou accessoire pour éviter de briser la frontière entre les deux.

Exemple : Passer d'un composant serveur à un composant client

Voici un exemple concret où un composant serveur est transmis en tant qu'enfant à un composant client :

// app/components/Header.js
export default function Header() {
  return (
    <header>
      <h1>My Static Header</h1>
    </header>
  );
}

Dans l'exemple ci-dessus :

• Profile est un composant serveur, récupérant des données ou affichant du contenu statique.
• Dashboard est un composant client gérant les interactions (afficher/masquer le profil).
• Le composant serveur Profile est transmis en tant qu'enfant au composant client Dashboard.

Ce modèle vous permet d'utiliser les avantages du rendu serveur (moins de JavaScript, performances améliorées) tout en ayant toujours une interactivité côté client.

Bibliothèques tierces et composants clients

De nombreuses bibliothèques tierces telles que les fournisseurs d'authentification ou les composants d'interface utilisateur s'appuient sur des hooks React, qui ne peuvent être utilisés que dans les composants clients. Voici comment contourner cette limitation en encapsulant des bibliothèques tierces dans des composants clients :

Exemple : utilisation d'un carrousel tiers

// app/components/PostList.js
export default async function PostList() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return (
    <ul>
      {posts.slice(0, 5).map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

En enveloppant le carrousel tiers React-Slick dans un composant client, nous pouvons l'utiliser dans la page rendue par le serveur tout en accédant aux fonctionnalités côté client telles que l'interactivité.

Gestion des accessoires entre les composants serveur et client

Lors de la transmission de données entre les composants serveur et client, les accessoires doivent être sérialisables (par exemple, des chaînes, des nombres, des booléens). Les objets complexes comme les fonctions ou les instances de classes ne peuvent pas être transmis.

Exemple : transmission de données du serveur au client

// app/components/SearchBar.js
'use client';  // This makes the component a client component

import { useState } from 'react';

export default function SearchBar() {
  const [searchTerm, setSearchTerm] = useState('');

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search..."
      />
      <p>Searching for: {searchTerm}</p>
    </div>
  );
}

Le composant client UserCard peut désormais restituer dynamiquement les données transmises par le composant serveur tout en garantissant que tout reste sérialisable et traverse ainsi la frontière serveur-client sans problème.

Cela dit, il serait intéressant de conclure ceci avec les meilleures pratiques. Passons à cela ensuite :

Meilleures pratiques pour la composition des composants serveur et client

Voici quelques conseils pour composer efficacement les composants serveur et client :

1. Par défaut sur les composants du serveur : utilisez les composants du serveur autant que possible pour le contenu statique ou basé sur les données afin de réduire la charge JavaScript et d'améliorer les performances.

2. Utiliser les composants clients pour l'interactivité : utilisez uniquement les composants clients lorsqu'une interaction utilisateur ou des API spécifiques au navigateur sont nécessaires.

3. Déplacer les composants clients vers le bas de l'arborescence : poussez les composants clients aussi profondément que possible dans l'arborescence des composants. Cela permet de rendre une plus grande partie de votre application sur le serveur, améliorant ainsi les performances.

4. Passer les composants du serveur en tant qu'enfants : Si un composant serveur doit être utilisé dans un composant client, transmettez-le en tant qu'enfant ou accessoire au lieu de l'importer directement.

Dernier mot : trouver l’équilibre entre performance et interactivité

Avec Next.js 13, vous avez la flexibilité de restituer les composants à la fois sur le serveur et sur le client. En utilisant par défaut les composants serveur pour le contenu statique et les composants client pour l'interactivité, et en gérant soigneusement la frontière entre les deux, vous pouvez créer des applications à la fois rapides et dynamiques.

En suivant les modèles et les exemples présentés ici (par exemple en passant des composants serveur en composants clients et en les combinant judicieusement), vous serez en mesure d'exploiter toute la puissance de Next.js 13 pour créer des applications Web interactives et hautement performantes.

Bon codage
Je m'appelle Michael.

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!