Comprender la diferencia entre un archivo template y un archivo layout en Next.js es fundamental para controlar el comportamiento de montaje de los componentes cuando el usuario cambia de ruta. Aunque ambos archivos comparten la misma estructura, su ciclo de vida es completamente distinto, y elegir uno u otro puede definir si tus animaciones funcionan, si tus métricas se envían correctamente o si el estado se preserva entre páginas.
¿Qué hace especial al layout en Next.js?
El layout es un archivo que envuelve a las páginas dentro de un segmento de ruta. Su característica principal es que no se vuelve a remontar cuando el usuario cambia de página dentro del mismo grupo de rutas. Esto significa que React reutiliza el componente tal como fue montado la primera vez [01:30].
Para comprobarlo de forma práctica, se puede convertir el layout en un componente cliente con la directiva "use client" y agregar un console.log dentro del componente:
jsx
"use client";
export default function HomeLayout({ children }) {
console.log("home layout");
return (
<div>
{children}
</div>
);
}
Al alternar entre la página principal y una página de prueba, el console.log solo aparece una vez en la consola del navegador [02:15]. No importa cuántas veces se alterne entre rutas: el layout conserva su estado y sus componentes montados. Esto otorga una ventaja de rendimiento importante porque evita renderizados innecesarios.
¿Qué es un template y en qué se diferencia del layout?
Un template tiene exactamente la misma estructura que un layout, pero con una diferencia crítica: sí se remonta cada vez que el usuario cambia de segmento de ruta [03:05]. Para usar un template basta con renombrar el archivo de layout a template.
jsx
"use client";
export default function HomeTemplate({ children }) {
console.log("home layout");
return (
<div>
{children}
</div>
);
}
Ahora, al alternar entre páginas, el console.log se dispara en cada navegación [03:30]. Esto confirma que el template se desmonta y se monta de nuevo, y con él todos sus componentes hijos también se remontan.
¿Cuándo conviene usar un template en lugar de un layout?
El remontado del template abre casos de uso muy concretos:
- Animaciones de entrada: si necesitas que un componente ejecute una animación cada vez que el usuario llega a una nueva página, el layout convencional no lo permitirá porque no se remonta. El template sí lo hace [03:55].
- Envío de métricas por navegación: usando un
useEffect dentro del template, puedes disparar lógica cada vez que el usuario cambia de ruta. Esto es ideal para herramientas como Google Analytics o cualquier sistema de métricas personalizado [04:20].
jsx
"use client";
import { useEffect } from "react";
export default function HomeTemplate({ children }) {
useEffect(() => {
console.log("envío de métricas");
}, []);
return (
<div>
{children}
</div>
);
}
Si este mismo useEffect estuviera dentro de un layout, solo se ejecutaría una única vez, cuando el usuario entra por primera vez a la página. Con el template, se ejecuta en cada cambio de ruta.
¿Qué papel juega el route grouping en este comportamiento?
El ejemplo práctico utiliza un route grouping llamado (home) que agrupa varias páginas bajo el mismo layout o template [01:00]. Cuando las páginas comparten el mismo grupo, la navegación entre ellas es rápida porque Next.js solo intercambia el contenido hijo. El route grouping no afecta la URL final, pero sí determina qué layout o template envuelve a las páginas.
La decisión entre layout y template se reduce a una pregunta: ¿necesitas que el estado se preserve entre navegaciones o necesitas que el componente se reinicie? Si la respuesta es preservar, usa layout. Si necesitas reiniciar, ejecutar efectos o lanzar animaciones en cada cambio de ruta, usa template.
¿Has encontrado algún otro caso de uso interesante para los templates? Comparte tu experiencia en los comentarios.
