📊 Capítulo 18: Next.js App Router & RSC

Especialização em Frontend com React

🗺️ A Divisão entre Server Components e Client Components no Next.js

flowchart TD
    subgraph SERVER ["React Server Components (RSC - Padrão do App Router)"]
        RSC1["Executa APENAS no Servidor Node.js"]
        RSC2["Acessa banco de dados diretamente sem APIs intermediárias!"]
        RSC3["ZERO JavaScript enviado para o bundle do cliente (0 KB JS Bundle!)"]
    end

    subgraph CLIENT ["Client Components ('use client')"]
        CC1["Obrigatório apenas para Interatividade e Hooks (useState, onClick)"]
        CC2["Baixa JavaScript e é hidratado no navegador"]
    end

    SERVER --> |"Injeta JSX como props"| CLIENT

    style SERVER fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style RSC1 fill:#e8f5e9,stroke:#4caf50,stroke-width:1.5px
    style RSC2 fill:#c8e6c9,stroke:#2e7d32,stroke-width:1.5px
    style RSC3 fill:#c8e6c9,stroke:#2e7d32,stroke-width:2px
    style CLIENT fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style CC1 fill:#ffebee,stroke:#d32f2f,stroke-width:1.5px

🎯 Slide 1: O Fim do getServerSideProps

• No App Router (app/), todos os componentes são Server Components por padrão.

• Você pode escrever funções async diretamente no componente e fazer consultas de banco com await db.usuarios.findMany() sem precisar de useEffect ou fetch!

🎯 Slide 2: Streaming com <Suspense> e loading.tsx

• O Next.js envia o esqueleto visual da página de forma instantânea e faz streaming do HTML das partes lentas à medida que os dados ficarem prontos via HTTP Chunked Transfer!

🎯 Slide 3: Arquivos Especiais de Convenção

• page.tsx (Tela pública da rota)
• layout.tsx (Layout compartilhado que não re-renderiza na troca de sub-rotas)
• error.tsx (Error Boundary isolado)
• not-found.tsx (Página 404 customizada)