Comprendre le App Router de Next.js 14

Next.js 14 modifie fondamentalement la façon dont nous construisons des applications React. En standardisant sur le App Router et les React Server Components, nous obtenons à la fois les performances des sites statiques et le dynamisme des applications rendues côté serveur.

Le changement de paradigme

Avant le App Router, Next.js basait son routage sur les pages et s'appuyait sur getServerSideProps ou getStaticProps pour récupérer des données. Désormais, n'importe quel composant dans le répertoire app peut être un composant serveur.

Cela signifie que vous pouvez récupérer des données directement là où vous en avez besoin :

export default async function Page() {
  // Ce fetch s'exécute sur le serveur !
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  
  return <main>{data.title}</main>;
}

Pourquoi est-ce important ?

• Zéro JavaScript côté client : Les composants serveurs n'envoient aucun JavaScript au navigateur.
• Accès direct au Backend : Vous pouvez interagir directement avec votre base de données sans créer de route d'API.
• Amélioration progressive (Streaming) : Le support intégré du streaming signifie que vous n'avez pas à attendre que la page entière soit rendue avant que l'utilisateur puisse voir le contenu.

Restez à l'écoute pour d'autres plongées approfondies dans l'architecture et les performances.