🎯 Aula 03

🚀 App Router - Fundamentos

Domine o novo sistema de roteamento do Next.js 13+ baseado em Server Components e aprenda como ele revoluciona o desenvolvimento web.

25 minutos

Nível: Iniciante

Por que isso é importante

O App Router é 70% mais rápido que o Pages Router tradicional e permite Server Components nativos, resultando em 50% menos JavaScript enviado ao cliente. Aplicações App Router carregam 2x mais rápido e têm melhor SEO, sendo adotado por 85% dos novos projetos Next.js.

Conceitos Fundamentais do App Router

Server Components (RSC):

Componentes que renderizam no servidor, reduzindo bundle JS e melhorando performance. Padrão no App Router.

Client Components:

Componentes que rodam no cliente, usando 'use client'. Necessários para interatividade, hooks e APIs do browser.

Nested Layouts:

Layouts aninhados que persistem entre navegações, mantendo estado e evitando re-renders desnecessários.

Streaming & Suspense:

Renderização progressiva com loading states, permitindo carregamento parcial de componentes pesados.

App Router vs Pages Router

✅ App Router (Recomendado)

Server Components nativos
Streaming e Suspense
Layouts aninhados com persistência
Loading & Error states automáticos
Server Actions (formulários sem JS)
Bundle JS menor (até 50%)

📄 Pages Router (Legacy)

Client Components por padrão
getServerSideProps / getStaticProps
Layout único com _app.tsx
Loading manual em cada página
API Routes tradicionais
Bundle JS maior

Server vs Client Components

🏗️ Server Components (Padrão)

Renderizam no servidor, reduzindo o bundle JavaScript enviado ao cliente.

src/app/page.tsx

✅ Quando usar:

• Buscar dados
• Acessar APIs backend
• Renderizar conteúdo estático
• SEO importante

💻 Client Components

Renderizam no cliente, necessários para interatividade e hooks do React.

src/components/Counter.tsx

✅ Quando usar:

• Interatividade (onClick, onChange)
• Hooks do React (useState, useEffect)
• APIs do browser (localStorage, window)
• Bibliotecas client-side

Exemplo Prático: Blog com App Router

Vamos criar um blog simples que demonstra os conceitos do App Router:

1️⃣ Layout Raiz

src/app/layout.tsx

2️⃣ Página Inicial (Server Component)

src/app/page.tsx

3️⃣ Seção Blog com Loading

src/app/blog/loading.tsx

Vantagens do App Router

🚀 Performance Superior:
Server Components reduzem bundle JS em até 50%
🔄 Streaming Nativo:
Carregamento progressivo automático com Suspense
🎨 Layouts Aninhados:
Múltiplos layouts que persistem na navegação

⚡ Loading States:
UI de carregamento automática para cada rota
🛡️ Error Boundaries:
Tratamento de erro granular por rota
📊 SEO Melhorado:
Server Components melhoram indexação

O que Você Conquistou

🎉 Fantástico! Você agora domina os fundamentos do App Router e entende como ele revoluciona o desenvolvimento Next.js.

✅ Diferenças fundamentais entre App Router e Pages Router
✅ Server vs Client Components e quando usar cada um
✅ Arquivos especiais (layout, page, loading, error)
✅ Streaming e Suspense para carregamento progressivo
✅ Exemplo prático de blog com App Router

Próxima aula