Componentes Assíncronos

Parte da seção Essenciais do Next.js do Journey de React da Coddy — lição 23 de 47.

Aqui está a recompensa por tudo o que o último capítulo preparou. Um componente do servidor pode ser async:

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

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

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

Leia isso novamente, porque é genuinamente novo. O componente espera. O Next.js o executa no servidor, deixa o await terminar e só então transforma o resultado em HTML.

Compare com a versão exclusiva para o navegador que você escreveria de outra forma:

A página é renderizada vazia primeiro
Uma requisição é enviada após a página ter carregado
Algum estado muda e o conteúdo aparece, um flicker que o usuário vê todas as vezes

Com um Server Component assíncrono, não há uma primeira renderização vazia. Não há nada para piscar, porque os dados já estavam lá quando o HTML foi construído. Sem useEffect, sem sinalizador de carregamento, sem segunda requisição.

Duas regras tornam isso legal:

Apenas componentes do server podem ser async: um componente marcado com 'use client' não pode
Os dados precisam vir de algum lugar que o servidor consiga alcançar: um banco de dados, um arquivo ou um módulo como lib/data.js

Desafio

Fácil

O arquivo lib/data.js é fornecido e está bloqueado. Ele exporta getDishes(), que retorna uma promise para uma array de objetos { id, name }.

Torne Page em app/page.jsx uma função async.
Faça await getDishes() em uma variável dishes.
Dentro de <ul id="dish-list">, renderize um <li> por prato, com key={dish.id}, id={dish.id} e o name do prato como seu texto.

Sem useEffect, sem flag de carregamento, apenas await.

Experimente você mesmo

import './globals.css';

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

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