Componentes asíncronos

Parte de la sección Esenciales de Next.js del Journey de React de Coddy — lección 23 de 47.

Aquí está la recompensa por todo lo que configuramos en el capítulo anterior. Un componente de servidor puede ser async:

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

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

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

Lee eso de nuevo, porque es realmente nuevo. El componente espera. Next.js lo ejecuta en el servidor, deja que el await termine y solo después convierte el resultado en HTML.

Compáralo con la versión solo para el navegador que de otro modo escribirías:

La página se renderiza vacía primero
Una solicitud se envía después de que la página se ha cargado
Algún estado cambia y el contenido aparece, un parpadeo que el usuario ve cada vez

Con un componente de servidor async no hay un primer renderizado vacío. No hay nada sobre lo que parpadear, porque los datos ya estaban allí cuando se construyó el HTML. Sin useEffect, sin indicador de carga, sin segunda petición.

Dos reglas hacen que esto sea legal:

Solo los componentes de server pueden ser async: un componente marcado con 'use client' no puede serlo
Los datos tienen que venir de algún lugar al que el servidor pueda acceder: una base de datos, un archivo o un módulo como lib/data.js

Desafío

Fácil

Se proporciona y está bloqueado lib/data.js. Exporta getDishes(), que devuelve una promesa para un array de objetos { id, name }.

Haz que Page en app/page.jsx sea una función async.
Aplica await getDishes() en una variable dishes.
Dentro de <ul id="dish-list">, renderiza un <li> por cada dish, con key={dish.id}, id={dish.id} y el name del plato como su texto.

Sin useEffect, sin banderas de carga, solo await.

Pruébalo tú mismo

import './globals.css';

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

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