Next.js Draft Mode: Burlamento de Cache Seguro para Redatores

Construir páginas super rápidas exige Cache (SSG e ISR). Mas o cache gera um problema clássico de experiência do usuário para a equipe de redação: como visualizar uma alteração no texto ou imagem antes dela ir ao ar para o público, sem ter que aguardar a revalidação do cache ou um deploy inteiro?

A solução definitiva na nossa arquitetura é o Next.js Draft Mode.

1. O Problema do Cache vs Redatores

Quando usamos a Vercel, o frontend busca os dados do Supabase ou de um Headless CMS no build time ou via ISR (revalidação em background). Para 99% dos usuários, isso entrega a página em milissegundos.

Mas se um redator altera um título de "Rascunho", ele não quer esperar minutos. Ele precisa visualizar imediatamente como aquilo ficou no layout real da página.

O que NÃO fazer:

• Criar um subdomínio inteiro apenas para testes (ex: preview.site.com). Isso gasta infraestrutura dupla.
• Desligar o cache e forçar SSR (Server-Side Rendering) em tudo só por causa dos redatores. Isso destrói a performance.

2. A Solução: Draft Mode (/api/draft)

O Next.js Draft Mode permite que você, ao acessar uma rota específica com uma senha (token), receba um Cookie no navegador. Enquanto esse cookie existir, o Next.js desliga magicamente o cache estático apenas para aquele usuário específico.

O Fluxo Obrigatório

1. Criação da Rota de Entrada (app/api/draft/route.ts): Esta rota deve receber um parâmetro (geralmente um secret configurado no seu CMS) e um slug (qual página redirecionar). Se o secret for válido, você chama a função draftMode().enable() e redireciona o usuário para a página.

2. Detecção na Página (Server Component): Nas suas páginas (ex: app/blog/[slug]/page.tsx), você verifica se o usuário está em Draft Mode chamando const { isEnabled } = draftMode().

3. Busca de Dados Diferenciada: Se isEnabled for verdadeiro, você ignora o cache padrão e faz a requisição diretamente ao banco buscando o registro no status "Rascunho". Se for falso, continua puxando a versão em "Publicado" em alta velocidade.

3. Segurança e Encerramento

Nunca deixe o Draft Mode ativado perpetuamente.

1. O cookie expira naturalmente quando o navegador é fechado.
2. Contudo, é obrigatório criar uma rota de saída (app/api/disable-draft/route.ts) que execute draftMode().disable() para que o redator possa voltar a ver a página da mesma forma que os usuários normais veem.

[!IMPORTANT] Sempre que arquitetar uma solução de conteúdo dinâmico (Blog, Catálogo de Produtos, Páginas de Pouso) com alto nível de cache na Vercel, o Draft Mode é inegociável. Ele garante a velocidade máxima para o cliente final e a agilidade total para o time de marketing.