Lección 15. Templates.

Los templates son archivos similares a los layout, donde estos envuelven a los nodos de una page o de una agrupación.

Pero con algunas diferencias de comportamiento.

Documentación oficial:

https://nextjs.org/docs/app/api-reference/file-conventions/template

A diferencia de un layout.tsx que:

Permite compartir estado entre diferentes children y nodos.

Un template.tsx:

Almacena un estado independiente por cada children y nodo.

Comportamiento de un template.tsx._

• Componentes del servidor: De forma predeterminada, las plantillas son componentes del servidor.

• Volver a montar en la navegación: las plantillas reciben una clave única automáticamente. Navegar a una nueva ruta hace que la plantilla y sus elementos secundarios se vuelvan a montar.

• Restablecimiento de estado: cualquier componente de cliente dentro de la plantilla restablecerá su estado en la navegación.

• Repetición de efectos: Los efectos se volverán a sincronizar a medida que se vuelva a montar el componente.

• Restablecimiento del DOM: Los elementos del DOM dentro de la plantilla se recrean por completo.

Ejemplo práctico._

Veamos un ejemplo practico de la diferencia entre un layout.tsx y un template.tsx.

Practica con layout.tsx._

Supongamos que tenemos una estructura similar a:

|-.next/
|-node-modules/
|-public/
|-src/
  |-app/
    |-layout.tsx
    |-page.tsx
    |-(cuenta)/
      |-layout.tsx
      |-login/
        |-page.tsx
      |-register/
        |-page.tsx
      |-password/
        |-page.tsx
|- ...Otros archivos...

Donde tenemos una agrupación de rutas:

/login

/register

/password

Los cuales se envuelven dentro de un layout.tsx, con el siguiente código:

"use client";

import { useState } from "react";
import Link from "next/link";

export default function LayoutDash ({
  children,
}: {
  children: React.ReactNode;
}) {
  const [input, setInput] = useState("")

  return (
    <>
      <Link href="/login">Login</Link>
      <Link href="/password">Password</Link>
      <Link href="/register">Register</Link>
      <h1>Rutas relativas a la cuenta de usuario</h1>
      {children}
      <input type="text" value={input} onChange={e => setInput(e.target.value)}/>
    </>
  );
}

El cual:

1. Es un componente de Cliente.

2. Contiene un estado (useState) para utilizarse y visualizarse en el input, cambiando cada que se ejecuta el evento onChange.

3. Contiene componentes Link, para el direccionamiento de la aplicación.

4. Este layout.tsx es el encargado de envolver los page de "/login", "/register" y "/password".

Y Dentro de cada page.tsx de cada ruta, contiene un componente simple como:

/login:

export default function Login () {
  return (
    <h1>Login</h1>
  );
}

/register:

export default function Register () {
  return (
    <h1>Register</h1>
  );
}

/password:

export default function Password () {
  return (
    <h1>Password</h1>
  );
}

Con este código, si colocamos algún dato dentro del input que contiene almacena el state, y redirigimos a alguna de las rutas hermanas anidadas podremos visualizar que:

El state se mantiene.

Esto sucede debido a que:

Los estados en layout.tsx son compartidos entre conjuntos de rutas agrupadas, de modo que "/login", "/register" y "/password" comparten el mismo estado.

Nota: Recuerda realizar la redirección desde los enlaces Link, ya que si realizamos las redirecciones desde la URL directamente, obligamos a la aplicación a recargar toda la lógica.

Practica con template.tsx._

Teníamos la siguiente estructura de proyecto:

|-.next/
|-node-modules/
|-public/
|-src/
  |-app/
    |-layout.tsx
    |-page.tsx
    |-(cuenta)/
      |-layout.tsx
      |-login/
        |-page.tsx
      |-register/
        |-page.tsx
      |-password/
        |-page.tsx
|- ...Otros archivos...

Donde:

El layout.tsx compartia un solo estado entre las 3 pages agrupadas.

Para hacer un cambio de comportamiento entre un layout y un template es tan simple como:

Hacer un cambio de nombre de "layout.tsx" a "template.tsx".

Quedando, nuestra estructura como la siguiente:

|-.next/
|-node-modules/
|-public/
|-src/
  |-app/
    |-layout.tsx
    |-page.tsx
    |-(cuenta)/
      |-template.tsx
      |-login/
        |-page.tsx
      |-register/
        |-page.tsx
      |-password/
        |-page.tsx
|- ...Otros archivos...

De esta manera:

Cada page.tsx tiene un state independiente a su ruta hermana agrupada.