Next.js App Router — Server Component, Client Component e Route Handler

Aplicação de referência do App Router do Next.js: a fronteira entre o que roda no servidor e o que roda no navegador, e o Route Handler que liga os dois sem recarregar a página.

passos: 6
arquivos: 7
teste: 1
tecnologias: 5

Lógica puraTypeScriptNext.jsReactTailwindPlaywright

Planta Relações Comparar

Baixar cartão

Como funciona

6 passos

Server e Client Components lado a lado.

Esconde cada passo: lembre antes de tocar para revelar.

Vocabulário compartilhado

GET+2

01
app/page.tsx é um Server Component: await connection() impede o prerender no build, e quoteUsdBrl() precifica a cotação a cada requisição
02
app/quote_board.tsx abre com "use client" — é o único código que vira JavaScript no navegador
03
O Server Component passa a cotação inicial como prop serializável, então o Client Component nasce com estado
04
O clique chama fetch("/api/quote", { cache: "no-store" }), que bate no Route Handler da mesma aplicação
05
app/api/quote/route.ts exporta GET e responde com Response.json() e cache-control: no-store
06
O estado troca no cliente sem recarregar a página; resposta com erro mantém a última cotação e mostra um role="alert"

apps/front/next-app-router

7 arquivos

app/

page.tsxServer Component — cotação da requisição, sem fetch
quote_board.tsxClient Component — estado, clique, troca da cotação e falha
layout.tsxDocumento raiz e CSS global com Tailwind
quote_board.test.tstesteTestes E2E do Playwright

app/api/quote/

route.tsRoute Handler GET que devolve taxa e horário, sem cache

lib/

quote_fx.tsPrecificação da cotação: taxa média mais spread

./

playwright.config.tswebServer, trace no retry e projeto Chromium

Executar · só Bun

$ bun install# dependências
$ bun run build
$ bun run start
$ bun run test# testes unitários
$

Servidor em http://localhost:3000. O bun run test sobe o build sozinho; com um Chromium já instalado fora da versão do Playwright, aponte PLAYWRIGHT_CHROMIUM_PATH para ele.

Requisitos: Bun

Relações

Onde ele se encaixa

Mapa

Next App Router

Combina com2
Alternativa a1

Por que se relacionam

Combina com

Alternativa a

Astro SSR em BunIlhas no SSR versus Server Components.

Testes

E2E no navegador real com Playwright; locator por papel (getByRole) e data-testid, nenhum seletor de CSS, nenhuma espera por tempo.

O que prova
O Server Component renderiza a primeira cotação sem nenhuma chamada ao Route Handler
Duas requisições trazem cotações de momentos diferentes: nada congelado no build (sem `connection()` o teste falha)
O clique troca a cotação pelo Route Handler, sem navegação
O botão fica desabilitado enquanto a requisição está em voo — com a resposta segurada, não com espera por tempo
Com o Route Handler falhando, a última cotação válida fica na tela com o aviso

Teste rápido

Qual destes combina com Next App Router?

Próximo projeto · Infraestrutura em DockerQdrant — busca vetorial antifraude

Contatos

Next.js App Router — Server Component, Client Component e Route Handler