Composants asynchrones

Fait partie de la section L'essentiel de Next.js du Journey React de Coddy. Leçon 23 sur 47.

Voici la récompense pour tout ce qui a été mis en place dans le chapitre précédent. Un composant serveur peut être async :

import { getDishes } from '../lib/data';

export default async function Page() {
    const dishes = await getDishes();

    return <h1>{dishes.length} dishes</h1>;
}

Relisez cela, car c'est vraiment nouveau. Le composant attend. Next.js l'exécute sur le serveur, laisse le await se terminer, et ensuite seulement transforme le résultat en HTML.

Comparez-le à la version 100% navigateur que vous écririez autrement :

La page s'affiche d'abord vide
Une requête est envoyée après le chargement de la page
Un état bascule, et le contenu apparaît, un clignotement que l'utilisateur voit à chaque fois

Avec un composant serveur asynchrone, il n’y a pas de premier rendu vide. Rien ne peut apparaître progressivement, car les données étaient déjà présentes lors de la génération du HTML. Pas de useEffect, pas d’indicateur de chargement, pas de seconde requête.

Deux règles rendent cela légal :

Seuls les composants serveur peuvent être async : un composant marqué 'use client' ne le peut pas
Les données doivent provenir d’un emplacement auquel le serveur peut accéder : une base de données, un fichier ou un module comme lib/data.js

Défi

Facile

lib/data.js est fourni et verrouillé. Il me permet d'exporter getDishes(), qui renvoie une promesse pour un tableau d'objets { id, name }.

Faites de Page dans app/page.jsx une fonction async.
Utilisez await getDishes() dans une variable dishes.
À l'intérieur de <ul id="dish-list">, affichez un <li> par plat, avec key={dish.id}, id={dish.id} et le name du plat comme texte.

Pas de useEffect, pas de fanion de chargement, seulement await.

Essayez vous-même

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}