Navegación Eficiente con el Componente Link en Next.js

Excelente explicación. Resumen final: Utilizar el componente **Link** de Next para routear paginas internas de la app ya que nos ahorra peticiones extras y nos cachea la información que ya visualizamos. Sin embargo si queremos enviar al usuario a una web externa es conveniente usar la etiqueta **\**

CLASE6 01/03/2024 LINKING AND NAVIGATING

Como el routing y la navegación trabaja?

Existen cuatro formas de navegar entre rutas:

    - <Link> Component
    - <useRouter> hook (client components)
    - <redirect> function (server components)
    - Usando "History API"

LINK COMPONENT

Componente incorporado en Next, similar a <a>, es la opcion recomendada a usar, se puede usar atributos como className.

import Link from 'next/link'

export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

Este componente tiene la siguientes props

Prop	    Example	            Type	            Required
href	    href="/dashboard"   String or Object    Yes
replace	    replace={false}     Boolean	            -
scroll	    scroll={false}      Boolean	            -
prefetch    prefetch={false}    Boolean or null     -

Para saber si un link esta activo se puede usar el hook usePathnamme().
Si desea desplazarse a un id específico en la navegación, puede anexar su URL con un enlace hash # o simplemente pasar un enlace hash a la prop href. Esto es posible ya que <Link> se convierte en un elemento <a>.

    <Link href="/dashboard#settings">Settings</Link>

    // Output
    <a href="/dashboard#settings">Settings</a>

UseRouter

Permite el cambio de rutas mediante codigo desde el lado ‘use Client’.

Redirect

Usado en server components, mediante codigo y condicionales programamos que se rediriga a ciertas rutas.

• Redirect devuelve por defecto un código de estado 307 (Redirección temporal). Cuando se usa en una server action, devuelve un 303, que se usa comúnmente para redirigir a una página de éxito como resultado de una petición POST.
• Redirect genera internamente un error, por lo que debe ejecutarse fuera de los bloques try/catch.
• Redirect puede ser llamado en los Componentes Cliente durante el proceso de renderizado pero no en los manejadores de eventos. Puede utilizar el hook useRouter en su lugar.
• Redirect también acepta URLs absolutas y puede utilizarse para redirigir a enlaces externos.
• Si desea redirigir antes del proceso de renderizado, utilice next.config.js o Middleware.

History API

Existe history.pushState y history.replaceState que son metodos para actualizar la pila del historial del navegador sin recargar la pagina.

el useRouter también nos permite cambiar la ruta, ¿cual seria el caso ideal para su uso?

\*\* NAVEGACIÓN \*\* Elemento Link para una NAVEGACIÓN + fluida, para evitar recargar la página, ahorrando ancho de banda y mejorando performance bajando en número de peticiones **Anchor vs Link:** Anchor para urls externas Link para urls dentro de la aplicación

Aquí dejo información complementaria que puede aportar mayor profundidad y contexto a las notas que ya tienes: ### 1. Integración con React Server Components En Next.js 13, los componentes dentro del directorio **app** son *Server Components* por defecto. Esto significa que, salvo que los marques explícitamente como componentes del cliente (usando `"use client";`), se renderizarán en el servidor. Esta característica permite optimizar la carga inicial y reducir la cantidad de JavaScript enviado al cliente, lo que mejora el rendimiento y la seguridad de la aplicación. citeturn0search7 ### 2. Persistencia de estado vs. reinicio de componentes Una de las grandes ventajas de usar **layouts** (en contraste con los **templates**) es que el layout persiste entre las transiciones de página. * **Layout**: Mantiene el estado y evita la re-montaje completa del componente compartido. Esto es especialmente útil para elementos como barras de navegación o contadores que deben conservarse al navegar por diferentes páginas. * **Template**: Se reinicia en cada navegación, lo que es útil cuando se requiere limpiar el estado o forzar la re-ejecución de efectos secundarios (como animaciones o lógica de formularios). Esta diferencia te permite elegir la estrategia adecuada según las necesidades de la interfaz. citeturn0search2 ### 3. Enrutamiento anidado y grupos de rutas Next.js 13 ha mejorado notablemente la manera de organizar la estructura de rutas: * **Layouts anidados**: Permiten definir estructuras compartidas para secciones específicas (por ejemplo, una sección de tienda con su propio menú lateral) sin afectar el layout global. * **Grupos de rutas**: Mediante el uso de nombres entre paréntesis en el sistema de archivos (por ejemplo, `(custom)`), puedes aislar ciertas rutas y sus layouts. Esto es muy útil cuando deseas aplicar un diseño completamente distinto (como para páginas de administración o páginas de contenido especial) sin interferir con el diseño principal de la aplicación. citeturn0search6 ### 4. Gestión de metadatos y SEO Next.js 13 incorpora una API de **Metadata** que te permite definir elementos del `<head>` (títulos, descripciones, metaetiquetas, etc.) de manera centralizada en los layouts o páginas. Esto no solo mejora el SEO, sino que también permite definir plantillas para títulos que se combinan con títulos específicos de cada página, tal como se mostró en algunos aportes de la comunidad. Ejemplo: export const metadata = { title: { template: "%s | Mi Sitio", default: "Mi Sitio" }, description: "Descripción general de mi aplicación", }; De esta manera, cada página que defina su propio título se integrará automáticamente en la plantilla definida en el root layout. citeturn0search4 ### 5. Estados de carga y manejo de errores Next.js 13 facilita la gestión de estados de carga y errores mediante archivos especiales: * **loading.js**: Permite definir interfaces de carga personalizadas para rutas específicas o para la aplicación completa, lo que mejora la experiencia del usuario mientras se obtienen datos. * **error.js**: Permite definir interfaces de error (similares a las Error Boundaries en React) para manejar de manera elegante los errores que puedan ocurrir durante el renderizado o la obtención de datos. Esta estructura modular hace posible un manejo más fino de las diferentes situaciones en la aplicación. citeturn0search1 ### 6. Mezcla de componentes del lado del servidor y del cliente Aunque la mayoría de los componentes en el directorio **app** son *Server Components*, es muy común que ciertas partes de la UI requieran interactividad en el cliente. * Para ello, puedes convertir un componente en cliente agregando la directiva `"use client";` al inicio del archivo. * Un ejemplo típico es la creación de un componente de navegación que utilice el hook `useSelectedLayoutSegment` para resaltar la ruta activa, sin comprometer el rendimiento global de la aplicación. Esto permite optimizar el uso de recursos: el contenido estático se renderiza en el servidor y la interactividad se añade solo donde es estrictamente necesaria. citeturn0search10 ### 7. Revalidación y optimización de caché Next.js 13 introduce mejoras en la obtención y el manejo de datos: * La nueva estrategia de **caché** permite que, al navegar entre rutas que comparten el mismo layout, solo se vuelvan a renderizar las partes que realmente cambiaron. * La revalidación de datos y la deduplicación de solicitudes (cuando se solicita la misma información en diferentes rutas) ayudan a mejorar la eficiencia de la aplicación, reduciendo llamadas innecesarias al servidor. Esta optimización es fundamental en aplicaciones con gran cantidad de datos dinámicos o en aquellas que se benefician del renderizado incremental. citeturn0search5 ### Conclusión La estructura de layouts en Next.js 13 no solo mejora la organización y reutilización del código, sino que también aporta ventajas en rendimiento, SEO y experiencia de usuario. Aprovechar la persistencia de estado en layouts, la flexibilidad de los grupos de rutas, la integración de React Server Components y las nuevas APIs de metadatos y manejo de errores, te permite construir aplicaciones escalables y altamente optimizadas. Cada uno de estos aspectos es valioso para mantener una aplicación consistente y eficiente, al mismo tiempo que simplifica el proceso de desarrollo y facilita la implementación de cambios y mejoras.