Capítulo 318 de 456

Preview Mode

Core Idea

API legada (superada pelo Draft Mode) que permite renderizar páginas estaticamente geradas em request time com conteúdo de rascunho de CMS, via cookies setados por res.setPreviewData. Mantida só por retrocompatibilidade.

Key Concepts

  • res.setPreviewData(data): seta cookies __prerender_bypass e __next_preview_data no browser, ativando preview mode nas requests seguintes.
  • context.preview/context.previewData (em getStaticProps): preview vira true e previewData recebe o mesmo objeto passado a setPreviewData, disponível pra decidir qual fonte de dado buscar.
  • Fluxo seguro via CMS: secret token + slug na query, validados na API route antes de habilitar preview e redirecionar (307) pro post.slug (nunca pro req.query.slug cru, evita open redirect).
  • maxAge/path: segundo parâmetro opcional de setPreviewData controla duração da sessão de preview e o path onde os cookies se aplicam.
  • res.clearPreviewData(): limpa os cookies manualmente; via next/link, precisa prefetch={false} pra não disparar durante prefetch.
  • Limite de previewData: 2KB, porque o dado fica armazenado em cookie.
  • Funciona com getServerSideProps e API Routes: context.preview/previewData ou req.preview/req.previewData respectivamente.
  • Cookie/chave únicos por build: tanto o bypass cookie quanto a chave privada de encriptação de previewData mudam a cada next build.
  • router.isPreview: flag exposta por next/router durante render.

Code Examples

export default async (req, res) => {
  if (req.query.secret !== 'MY_SECRET_TOKEN' || !req.query.slug) {
    return res.status(401).json({ message: 'Invalid token' })
  }
  const post = await getPostBySlug(req.query.slug)
  if (!post) {
    return res.status(401).json({ message: 'Invalid slug' })
  }
  res.setPreviewData({})
  res.redirect(post.slug)
}
  • O que demonstra: validação de secret+slug antes de ativar preview mode e redirect seguro.
setPreviewData(data, {
  maxAge: 60 * 60, // expira em 1 hora
  path: '/about',  // só se aplica a paths sob /about
})
  • O que demonstra: controle de duração e escopo dos cookies de preview.

Anti-patterns

  • Usar Preview Mode em projeto novo: é legado; usar Draft Mode (ch302) em vez disso.
  • Redirecionar direto pra req.query.slug: mesma vulnerabilidade de open redirect do Draft Mode.
  • Setar Cache-Control com Preview Mode ativo: cache não pode ser bypassed nesse caso; preferir ISR.

Key Takeaways

  1. Preview Mode é predecessor direto do Draft Mode, mesma mecânica (cookie + context.preview), API antiga.
  2. Todo projeto novo deve usar Draft Mode; Preview Mode só existe por compatibilidade com código legado.
  3. previewData tem limite de 2KB por viver em cookie.

Connects To

  • ch302 Draft Mode: sucessor direto, API recomendada atualmente para o mesmo caso de uso.
AnteriorPostCSSPróximoProduction