Transmettre des résultats au navigateur

Une page peut avoir besoin de données côté serveur et d’une interaction côté navigateur. L’enjeu est de ne pas transformer toute la page en composant client pour une petite partie interactive, ni de transmettre au navigateur les enregistrements complets de la base. Vous allez préparer une représentation réduite des randonnées avant de la passer en props.

Dans les deux leçons précédentes, vous avez vu que le catalogue reste rendu côté serveur et que la recherche du projet peut rester un formulaire soumis à la route. Ici, vous examinez le cas où une portion de l’interface aurait besoin d’un état dans le navigateur : le composant serveur conserve la lecture des données, puis transmet au composant client uniquement les valeurs dont son affichage a besoin.

Préparer une représentation destinée à l’affichage

Une réponse de base de données peut contenir des champs dont le navigateur n’a pas besoin : informations de gestion, données de relation, ou valeurs utilisées seulement par le serveur. Avant le passage en props, projetez chaque randonnée vers un nouvel objet qui ne contient que les champs affichés dans une carte. Cette réduction rend le contrat entre les deux composants explicite et évite de transmettre des données superflues.

type Randonnee = {
  id: string;
  nom: string;
  difficulte: string;
  distance: number;
  description: string;
  notesInternes: string;
};

type CarteRandonnee = Pick<Randonnee, 'id' | 'nom' | 'difficulte' | 'distance'>;

function preparerCartes(randonnees: Randonnee[]): CarteRandonnee[] {
  return randonnees.map(({ id, nom, difficulte, distance }) => ({
    id,
    nom,
    difficulte,
    distance
  }));
}

const randonnees: Randonnee[] = [
  {
    id: 'lac-bleu',
    nom: 'Tour du lac Bleu',
    difficulte: 'facile',
    distance: 6.5,
    description: 'Un itinéraire en boucle au bord du lac.',
    notesInternes: 'Vérifier la fermeture saisonnière du sentier.'
  }
];

const cartes = preparerCartes(randonnees);
console.log(JSON.stringify(cartes));

[{"id":"lac-bleu","nom":"Tour du lac Bleu","difficulte":"facile","distance":6.5}]

L’exemple est autonome : il montre la transformation à effectuer avant de transmettre les résultats. Le champ notesInternes n’apparaît pas dans la sortie. Dans la page du projet, la même projection peut être appliquée après l’obtention des randonnées, puis le tableau obtenu peut être fourni en props à un composant client lorsqu’une interaction locale le justifie.

Comprendre le passage et la sérialisation

Quand un composant serveur rend un composant client en lui donnant des props, Next.js doit pouvoir représenter ces valeurs dans le flux envoyé au navigateur. Les valeurs courantes de l’exemple — chaînes, nombres et tableaux d’objets simples — conviennent à ce transfert. Les fonctions, les connexions à une base ou des instances complexes ne constituent pas des données d’affichage à transmettre de cette manière.

Une prop réduite n’est pas un mécanisme de protection suffisant pour une donnée secrète : un secret ne doit jamais être inclus dans des données envoyées au navigateur. Dans le projet fil rouge, l’accès aux données reste côté serveur ; la leçon consacrée aux accès et aux secrets détaillera la séparation de configuration appropriée. Gardez également le rendu des cartes côté serveur tant qu’aucune interaction locale ne nécessite un composant client.

À retenir

• Le composant serveur garde la responsabilité de récupérer les données du catalogue.
• Avant le passage en props, construisez une représentation limitée aux champs nécessaires à l’affichage.
• Transmettez des valeurs simples et sérialisables, pas des ressources ou fonctions serveur.
• Ne placez jamais une clé, un accès à la base ou une donnée confidentielle dans les props envoyées au navigateur.
• N’ajoutez un composant client que lorsqu’une interaction dans le navigateur le justifie.

Dans la prochaine leçon, vous verrez comment isoler la configuration et les accès sensibles côté serveur.