Komponenty asynchroniczne

Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 23 z 47.

Oto efekt wszystkiego, do czego przygotował Cię poprzedni rozdział. Komponent serwerowy może być async:

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

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

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

Przeczytaj to jeszcze raz, bo to naprawdę coś nowego. Komponent czeka. Next.js uruchamia go na serwerze, pozwala zakończyć działanie await, a dopiero potem zamienia wynik na HTML.

Porównaj to z wersją działającą wyłącznie w przeglądarce, którą w przeciwnym razie byś napisał:

Strona najpierw wyświetla się jako pusta
Żądanie jest wysyłane po załadowaniu strony
Jakiś stan ulega zmianie i pojawia się zawartość — użytkownik za każdym razem widzi migotanie

W przypadku asynchronicznego komponentu serwera nie ma pierwszego pustego renderowania. Nie ma do czego mrugnąć, ponieważ dane były już dostępne podczas generowania HTML. Bez useEffect, bez flagi ładowania i bez drugiego żądania.

Dwie zasady sprawiają, że jest to dozwolone:

Tylko komponenty serwerowe mogą być async: komponent oznaczony 'use client' nie może
Dane muszą pochodzić z miejsca, do którego serwer ma dostęp: z bazy danych, pliku lub modułu takiego jak lib/data.js

Wyzwanie

Łatwy

lib/data.js jest dostępny i zablokowany. Eksportuje getDishes(), która zwraca obietnicę zawierającą tablicę obiektów { id, name }.

Zmień Page w app/page.jsx na funkcję async.
Przypisz wynik await getDishes() do zmiennej dishes.
Wewnątrz <ul id="dish-list"> wyrenderuj jeden element <li> na danie, z key={dish.id}, id={dish.id} i jego tekstem będącym wartością name dania.

Bez useEffect, bez flagi ładowania, po prostu await.

Spróbuj swoich sił

import './globals.css';

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

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