Composants client vs serveur dans Next.js-js tutoriel-php.cn

Composants client vs serveur dans Next.js

DDD

Libérer： 2024-09-13 06:23:35

original

531 Les gens l'ont consulté

Client vs Server Components in Next.js

Dans cette version de Next.js, nous explorerons ce que sont les composants client et serveur, leurs différences, quand les utiliser, et fournirons des exemples pratiques pour vous aider à les implémenter dans votre projets.

Que sont les composants client et serveur dans Next.js ?

Dans Next.js, il existe une distinction claire entre les Composants client et les Composants serveur. Cette séparation vous permet de prendre de meilleures décisions sur où et comment traiter le code, ce qui a un impact direct sur les performances et l'expérience utilisateur.

Composants clients

Les

Composants clients s'exécutent dans le navigateur, permettant l'interactivité et l'accès aux API du navigateur comme une fenêtre ou un document. Ils sont idéaux pour gérer l'interface dynamique de votre application et répondre aux actions des utilisateurs.

Caractéristiques clés :

Exécuter dans le navigateur (client).
Avoir accès à des hooks comme useState ou useEffect.
Utilisé pour gérer les interactions dynamiques telles que les formulaires ou les boutons.
Indispensable lorsque vous devez répondre rapidement aux actions des utilisateurs.

Exemple de composant client :

'use client'; // Indicates that this component runs on the client

import { useState } from 'react';

export default function ClientComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Client-side Counter</h1>
      <p>The count value is: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Copier après la connexion

Cet exemple classique est un compteur qui permet à l'utilisateur d'interagir directement avec la page. Le « client d'utilisation » ; La directive indique à Next.js que ce composant doit être exécuté dans le navigateur.

Composants du serveur

Les

Composants serveur sont une nouvelle fonctionnalité de l'architecture Next.js. Ces composants sont traités sur le serveur et envoient le HTML déjà rendu au navigateur. Cela réduit la quantité de JavaScript qui atteint le client, accélérant ainsi le chargement initial de la page.

Caractéristiques clés :

Rendu sur le serveur.
Ne pas avoir accès aux API du navigateur comme window ou document, ni aux hooks React comme useState.
Peut interagir directement avec des bases de données ou des API externes.
Optimisez les performances en envoyant du HTML au lieu de JavaScript au client.

Exemple de composant serveur :

export default async function ServerComponent() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());

  return (
    <div>
      <h1>Data from the Server</h1>
      <p>{data.message}</p>
    </div>
  );
}

Copier après la connexion

Dans cet exemple, le composant est rendu sur le serveur, récupère les données d'une API, puis renvoie le code HTML rendu. Cela signifie que la logique de récupération des données n'atteint pas le client, ce qui améliore les performances.

Nouvelles fonctionnalités dans Next.js

Next.js affine la manière dont les composants serveur et client interagissent. Voici quelques-unes des améliorations les plus notables :

1. Composants du serveur par défaut

Les composants sont désormais des Composants du serveur par défaut. Cela signifie que votre application s'optimise automatiquement en envoyant moins de JavaScript au navigateur, sauf si vous avez explicitement besoin d'un Composant client.

2. Streaming optimisé

Le streaming permet aux composants de se charger par parties. Ceci est utile pour les pages volumineuses ou contenant beaucoup de données, car les sections de la page peuvent se charger au fur et à mesure qu'elles sont prêtes, sans attendre que tout le contenu soit disponible.

3. Contrôle granulaire

Next.js permet de décider plus facilement si un composant s'exécutera sur le serveur ou sur le client, vous donnant ainsi plus de contrôle sur la façon d'optimiser votre application.

4. Hydratation améliorée

Hydratation est le processus qui transforme le HTML statique envoyé depuis le serveur en une page interactive sur le client. Avec Next.js, l'hydratation est plus efficace et sélective, n'ayant lieu que là où c'est absolument nécessaire.

Quand utiliser les composants client ou serveur

Utilisez les composants clients lorsque :

Interactivité utilisateur : lorsque vous devez gérer des interactions telles que des formulaires ou des boutons qui répondent en temps réel.
Gestion des états : Idéal pour gérer les états locaux qui changent de manière dynamique, comme un panier d'achat.
Animations et effets visuels : lorsque vous comptez sur des animations ou des effets qui se mettent à jour en fonction de l'interaction de l'utilisateur.

Utilisez les composants du serveur lorsque :

Requêtes de base de données : lorsque vous devez récupérer des données d'une base de données avant d'afficher le contenu.
Contenu statique : Idéal lorsque le contenu ne change pas fréquemment et ne nécessite pas d'interactivité.
Amélioration du référencement : le contenu rendu par le serveur est plus accessible aux moteurs de recherche, améliorant ainsi le référencement.

Exemple de combinaison de composants client et serveur :

// ServerComponent.tsx
export default async function ServerComponent() {
  const data = await fetch('https://api.example.com/products').then(res => res.json());

  return (
    <div>
      <h1>Product List (Server-rendered)</h1>
      <ul>
        {data.map((product: any) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

// ClientComponent.tsx
'use client';

import { useState } from 'react';

export default function ClientComponent() {
  const [search, setSearch] = useState('');

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

Copier après la connexion

Dans cet exemple, le serveur restitue la liste des produits et l'envoie au client, tandis que le composant de recherche est interactif et géré côté client.