Template rendu à
2026-09-06T03:49:54.756Z — cet horodatage se régénère à chaque navigation, tandis que l'horodatage du layout environnant resterait stable.template.tsx
template.tsx fonctionne comme layout.tsx, mais il est remonté à chaque navigation. Utilisez-le pour les effets par page (pings de vue, animations d'entrée, état frais par rendu) là où un layout stable serait incorrect.
Astuce
Contrairement à <code>layout.tsx</code> — qui conserve son état entre les navigations — <code>template.tsx</code> est instancié à nouveau à chaque rendu. C'est le bon endroit pour déclencher un effet d'entrée ou réinitialiser un compteur local sans toucher au layout global.
// src/app/examples/template-remount/template.tsx
export default function Template({ children }) {
const renderedAt = new Date().toISOString();
return (
<div>
<div>Template rendered at {renderedAt}</div>
{children}
</div>
);
}
// src/app/examples/template-remount/page.tsx
export default function Page() {
return <p>Page body — wrapped in template.tsx</p>;
}