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 async, il n'y a pas de premier rendu vide. Il n'y a rien à clignoter, car les données étaient déjà là lorsque l'HTML a été généré. Pas de useEffect, pas de fanion de chargement, pas de seconde requête.

Deux règles rendent cela légal :

Seuls les composants server peuvent être async : un composant marqué 'use client' ne le peut pas
Les données doivent provenir d'un endroit 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>
    );
}