Délimiter les composants client

Un champ de recherche peut réagir immédiatement à chaque saisie, mais cette réactivité ne doit pas entraîner le chargement des randonnées dans le navigateur. Dans cette leçon, vous délimitez le code qui nécessite un état interactif et vous gardez la page du catalogue responsable de l’affichage des données côté serveur.

La page du catalogue est déjà un composant serveur : elle récupère les randonnées puis rend les cartes ou l’état vide. Comme vu dans « Repérer les composants serveur dans l’App Router », vous n’ajoutez pas de directive pour obtenir ce comportement par défaut.

Choisir où placer l’interactivité

La directive use client marque la frontière d’un module dont le code doit pouvoir s’exécuter dans le navigateur. Elle doit apparaître au début du fichier, avant les imports. Un composant client peut utiliser l’état React pour suivre ce que la personne saisit ; une page serveur ne peut pas appeler ce mécanisme d’état local.

Pour une recherche saisie au fil des caractères, le composant client peut garder la valeur du champ et mettre à jour son affichage. Il ne récupère pas lui-même le catalogue : la page serveur reste chargée des données. Ici, le code montre la frontière et le champ interactif, pas encore le raccordement des résultats à une route.

'use client';

import { useState } from 'react';

export function RechercheLocale() {
  const [recherche, setRecherche] = useState('');

  return (
    <label>
      Rechercher une randonnée
      <input
        className="rando-champ"
        value={recherche}
        onChange={(event) => setRecherche(event.target.value)}
      />
    </label>
  );
}

À chaque saisie, setRecherche actualise l’état et React réaffiche le composant avec la nouvelle valeur. Ce champ illustre une interaction locale ; à lui seul, il ne filtre pas les données du catalogue et ne remplace pas la recherche par paramètres d’URL prévue dans le projet.

Garder une frontière nette

Un composant serveur peut inclure un composant client dans son rendu. La frontière ne signifie donc pas que toute la page devient interactive : elle limite au composant concerné le code qui s’exécute côté navigateur. Dans le catalogue, le chargement et l’affichage des randonnées restent côté serveur ; seule une interaction qui réclame réellement un état local a besoin de cette frontière.

Cette séparation réduit aussi le risque de déplacer par inadvertance une logique d’accès aux données dans le navigateur. Ne placez ni requête à la base ni clé d’accès dans un composant client. La protection des secrets sera traitée dans une leçon dédiée ; retenez ici que l’interactivité et l’accès aux données n’ont pas à être dans le même composant.

À retenir

• Une page de l’App Router reste serveur par défaut ; n’ajoutez pas « use client » à la page catalogue pour un champ interactif.
• Placez « use client » au début du module qui a besoin d’état ou d’interactions navigateur.
• L’état local d’un champ sert à suivre la saisie ; il ne charge pas les données du catalogue.
• Conservez le chargement des randonnées côté serveur et ne mettez pas d’accès aux données dans un composant client.

La prochaine leçon précisera comment transmettre des résultats calculés côté serveur à un composant client, sans lui transférer plus de données que nécessaire.