Componenti asincroni

Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 23 di 47.

Ecco il risultato di tutto ciò che è stato predisposto nel capitolo precedente. Un componente server può essere async:

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

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

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

Rileggilo, perché è davvero una novità. Il componente attende. Next.js lo esegue sul server, lascia che await termini e solo allora trasforma il risultato in HTML.

Confrontalo con la versione solo browser che scriveresti altrimenti:

La pagina viene visualizzata prima vuota
Una richiesta parte dopo che la pagina è stata caricata
Alcuno stato cambia e il contenuto appare: uno sfarfallio che l’utente vede ogni volta

Con un componente server asincrono non c’è un primo rendering vuoto. Non c’è nulla in cui sfarfallare per diventare, perché i dati erano già presenti quando è stato generato l’HTML. Niente useEffect, nessun indicatore di caricamento, nessuna seconda richiesta.

Due regole rendono tutto questo consentito:

Solo i componenti server possono essere async: un componente contrassegnato con 'use client' non può esserlo
I dati devono provenire da una risorsa accessibile al server: un database, un file o un modulo come lib/data.js

Sfida

Facile

lib/data.js è fornito ed è bloccato. Esporta getDishes(), che restituisce una promise per un array di oggetti { id, name }.

Rendi Page in app/page.jsx una funzione async.
Assegna await getDishes() a una variabile dishes.
All'interno di <ul id="dish-list">, visualizza un <li> per ogni piatto, con key={dish.id}, id={dish.id} e il suo name come testo.

Niente useEffect, nessun flag di caricamento, solo await.

Provalo tu

import './globals.css';

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

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