Comprendre le rendu serveur par défaut

Une page peut afficher des informations sans que le navigateur ait besoin de les calculer ou de les récupérer après son chargement. Dans l’App Router, Next.js traite les composants comme des composants serveur par défaut : leur rendu est préparé sur le serveur, puis transmis au navigateur. Vous obtenez ainsi une première page contenant déjà le contenu à afficher.

Vous avez déjà repéré le rôle des fichiers conventionnels et l’organisation du dossier app dans la leçon précédente. Ici, concentrez-vous sur le lieu d’exécution du composant, et non sur la création des routes ou la composition complète du catalogue, qui seront abordées ensuite.

Un composant exécuté sur le serveur

Dans une application App Router, vous n’avez pas à ajouter une déclaration spéciale pour obtenir ce comportement : le serveur est le choix par défaut. Le composant peut produire son rendu sans envoyer au navigateur le code nécessaire à son exécution comme composant interactif. C’est un choix adapté à un contenu de catalogue tel qu’un nom d’itinéraire ou une description.

Voici un exemple minimal à placer temporairement dans app/page.tsx. Il s’agit d’un composant serveur par défaut : il renvoie un titre et un texte, sans demander d’interaction au navigateur. Ce fichier complet permet de vérifier le principe sans ajouter de données ni de structure au projet fil rouge.

export default function Page() {
  return (
    <main>
      <h1>Catalogue de randonnées</h1>
      <p>Découvrez des itinéraires à parcourir.</p>
    </main>
  );
}

La page affiche le titre « Catalogue de randonnées » et le texte « Découvrez des itinéraires à parcourir. » dans le navigateur.

Au chargement, Next.js exécute ce composant sur le serveur et prépare le rendu correspondant. Le navigateur reçoit de quoi afficher le titre et le paragraphe ; il n’a pas besoin d’exécuter ce composant pour obtenir ce contenu. Cet exemple sert uniquement à visualiser le principe : la page d’accueil complète du catalogue sera construite dans la prochaine leçon.

Contenu rendu et interaction

Un texte fixe ou des informations à consulter peuvent être rendus côté serveur. Une action qui doit réagir immédiatement à un geste, par exemple un bouton qui modifie un compteur dans la page, demande au contraire du code exécuté dans le navigateur. Le rendu serveur ne signifie donc pas que toute interaction est impossible ; il indique où le composant s’exécute par défaut.

Pour le catalogue, les pages de présentation d’itinéraires peuvent s’appuyer sur ce comportement par défaut lorsqu’elles affichent des informations à consulter. Vous n’avez pas besoin de transformer chaque composant en composant interactif. Cela évite d’envoyer inutilement du code d’interface au navigateur pour du contenu qui n’en a pas besoin.

À retenir

• Dans l’App Router, les composants sont serveur par défaut.
• Next.js prépare leur rendu côté serveur avant de l’envoyer au navigateur.
• Le contenu peut s’afficher sans que le navigateur exécute le composant.
• Une interaction qui réagit à l’utilisateur peut nécessiter du code exécuté côté navigateur.

Dans la prochaine leçon, vous construirez la page d’accueil du catalogue et y afficherez une liste d’itinéraires.