Due fetch contemporanei

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

Di solito una pagina ha bisogno di più di una cosa. Il modo più ovvio per scriverlo è anche quello più lento:

const dishes = await getDishes();   // 60ms
const drinks = await getDrinks();   // 60ms, inizia solo ora
// totale: 120ms

await significa fermati qui. Il secondo caricamento non inizia nemmeno finché il primo non è terminato, anche se non aveva bisogno del risultato del primo.

Avviali entrambi, poi attendi il completamento di entrambi:

const [dishes, drinks] = await Promise.all([
    getDishes(),
    getDrinks(),
]);
// totale: 60ms

Il trucco sta nei tempi. Chiamare getDishes() senza await avvia il lavoro e restituisce subito una promise, quindi quando Promise.all inizia ad aspettare, entrambi i caricamenti sono già in corso. Si risolve in un array di risultati, nell’ordine in cui li hai elencati.

La regola pratica:

Un caricamento ha bisogno del risultato dell'altro → await in sequenza, non c'è alternativa
Sono indipendenti → Promise.all

Due caricamenti sono una piccola vittoria. Cinque fanno la differenza tra una pagina che sembra istantanea e una che non lo è.

Sfida

Facile

app/page.jsx carica i piatti e le bevande uno dopo l'altro. Non hanno nulla a che fare l'uno con l'altro, quindi eseguili insieme.

Sostituisci i due await sequenziali con un unico await Promise.all([...]), destrutturato in dishes e drinks.

lib/data.js è bloccato e controlla se i due caricamenti si sono mai sovrapposti. #report deve finire per mostrare Ran together invece di Ran one at a time.

Provalo tu

import './globals.css';

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

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