template.js

Un archivo template (plantilla) es similar a un layout en el sentido de que envuelve un layout o página. A diferencia de los layouts que persisten entre rutas y mantienen el estado, las plantillas reciben una clave única, lo que significa que los componentes hijos del lado del cliente (Client Components) reinician su estado durante la navegación.

Son útiles cuando necesitas:

• Resincronizar useEffect durante la navegación.
• Reiniciar el estado de un componente hijo del lado del cliente (Client Component) durante la navegación. Por ejemplo, un campo de entrada.
• Cambiar el comportamiento predeterminado del framework. Por ejemplo, los límites de Suspense dentro de layouts solo muestran un fallback en la primera carga, mientras que las plantillas lo muestran en cada navegación.

Convención

Una plantilla puede definirse exportando un componente React por defecto desde un archivo template.js. El componente debe aceptar una prop children.

export default function Template({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>
}

En términos de anidación, template.js se renderiza entre un layout y sus hijos. Aquí hay una salida simplificada:

<Layout>
  {/* Nota que la plantilla recibe una clave única. */}
  <Template key={routeParam}>{children}</Template>
</Layout>

Props

children (requerido)

La plantilla acepta una prop children.

<Layout>
  {/* Nota que la plantilla recibe automáticamente una clave única. */}
  <Template key={routeParam}>{children}</Template>
</Layout>

Comportamiento

• Componentes del servidor (Server Components): Por defecto, las plantillas son componentes del servidor.
• Remontaje en navegación: Las plantillas reciben automáticamente una clave única. Navegar a una nueva ruta hace que la plantilla y sus hijos se remonten.
• Reinicio de estado: Cualquier componente del lado del cliente (Client Component) dentro de la plantilla reiniciará su estado durante la navegación.
• Re-ejecución de efectos: Efectos como useEffect se resincronizarán cuando el componente se remonte.
• Reinicio del DOM: Los elementos DOM dentro de la plantilla se recrean completamente.

Historial de versiones