Capítulo 136 de 456

template.js

Core Idea

template.js é como um layout, mas recebe uma key única a cada navegação, então Client Components filhos resetam estado; útil para resincronizar useEffect ou resetar inputs entre navegações no mesmo segmento.

Key Concepts

  • children prop (required): único prop aceito pelo template.
  • Posição na hierarquia: renderiza entre layout.js e error.js; envolve error.js, loading.js, not-found.js e page.js, mas não envolve o layout.js do mesmo segmento.
  • Remount por key: o template recebe uma key baseada no segmento (incluindo dynamic params); muda de key e remonta quando aquele nível de segmento muda. Navegação em segmentos mais fundos não remonta templates de nível superior. Search params não disparam remount.
  • Suspense em template vs layout: diferente de layouts (Suspense só mostra fallback no primeiro load), templates mostram o fallback em toda navegação.

Code Examples

export default function Template({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>
}
  • O que demonstra: assinatura mínima de um template (Server Component por padrão).
<Layout>
  {/* Note que o template recebe uma key única */}
  <Template key={routeParam}>{children}</Template>
</Layout>
  • O que demonstra: posição do template entre layout e children, com key responsável pelo remount.

Anti-patterns

  • Esperar que template.js preserve estado entre navegações no mesmo segmento: é justamente o oposto de layout.js — o objetivo é resetar.
  • Colocar lógica pesada de estado compartilhado em template.js: qualquer Client Component dentro dele perde estado a cada navegação do segmento correspondente.

Key Takeaways

  1. Use template.js para resetar formulários, inputs ou reexecutar useEffect a cada navegação.
  2. O remount acontece por nível de segmento: só o template do segmento que mudou remonta, não os ancestrais.
  3. Templates são Server Components por padrão, mas o efeito de reset vale para os Client Components que eles envolvem.

Connects To

  • layout.js: comportamento oposto (persiste estado); template.js resolve o caso em que você não quer essa persistência.
  • loading.js / error.js: envolvidos por template.js na hierarquia de componentes.
AnteriorsrcPróximounauthorized.js