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 componente de servidor assíncrono, não há uma primeira renderização vazia. Não há nada para piscar para dentro, porque os dados já estavam disponíveis quando o HTML foi construído. Nada de useEffect, nenhuma flag de carregamento, nenhuma segunda requisição.

Duas regras tornam isso válido:

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

Desafio

Fácil

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

Faça Page em app/page.jsx ser uma função async.
Atribua await getDishes() a 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.

Nenhum useEffect, nenhuma 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>
    );
}