El objetivo de este capítulo es proporcionar una visión general de alto nivel de las diferentes partes del framework, su orden de ejecución y cómo trabajan juntas.

Servidor

En el servidor, se ejecutan los siguientes pasos para cada solicitud inicial a tu aplicación:

Paso 1: Configurar el Servidor Nitro y los Plugins de Nitro (Una vez)

Nuxt está impulsado por Nitro, un motor de servidor moderno.

Cuando Nitro se inicia, inicializa y ejecuta los plugins en el directorio /server/plugins. Estos plugins pueden:

• Capturar y manejar errores a nivel de aplicación.
• Registrar hooks que se ejecutan cuando Nitro se apaga.
• Registrar hooks para eventos del ciclo de vida de las solicitudes, como modificar respuestas.

Paso 2: Middleware del Servidor Nitro

Después de inicializar el servidor Nitro, el middleware en server/middleware/ se ejecuta para cada solicitud. El middleware puede usarse para tareas como autenticación, registro o transformación de solicitudes.

Paso 3: Inicializar Nuxt y Ejecutar Plugins de la Aplicación Nuxt

Primero se crean las instancias de Vue y Nuxt. Luego, Nuxt ejecuta sus plugins del servidor. Esto incluye:

• Plugins integrados, como Vue Router y unhead.
• Plugins personalizados ubicados en el directorio plugins/, incluidos aquellos sin sufijo (por ejemplo, myPlugin.ts) y aquellos con el sufijo .server (por ejemplo, myServerPlugin.server.ts).

Los plugins se ejecutan en un orden específico y pueden tener dependencias entre sí. Para más detalles, incluido el orden de ejecución y el paralelismo, consulta la documentación de Plugins.

Paso 4: Validación de Rutas

Después de inicializar los plugins y antes de ejecutar el middleware, Nuxt llama al método validate si está definido en la función definePageMeta. El método validate, que puede ser sincrónico o asincrónico, se usa a menudo para validar parámetros de rutas dinámicas.

• La función validate debe devolver true si los parámetros son válidos.
• Si la validación falla, debe devolver false o un objeto que contenga un statusCode y/o statusMessage para terminar la solicitud.

Para más información, consulta la documentación de Validación de Rutas.

Paso 5: Ejecutar Middleware de la Aplicación Nuxt

El middleware te permite ejecutar código antes de navegar a una ruta particular. A menudo se usa para tareas como autenticación, redirección o registro.

En Nuxt, hay tres tipos de middleware:

• Middleware de ruta global
• Middleware de ruta nombrado
• Middleware de ruta anónimo (o en línea)

Nuxt ejecuta automáticamente el middleware global la primera vez que se ingresa a la aplicación y cada vez antes de la navegación de rutas. El middleware nombrado y anónimo se ejecuta solo en las rutas especificadas en la propiedad middleware del meta de la página (ruta) definido en los componentes de página correspondientes.

Para detalles sobre cada tipo y ejemplos, consulta la documentación de Middleware.

Cualquier redirección en el servidor resultará en un encabezado Location: siendo enviado al navegador; el navegador luego hace una nueva solicitud a esta nueva ubicación. Todo el estado de la aplicación se restablecerá cuando esto suceda, a menos que se persista en una cookie.

Paso 6: Renderizar Página y Componentes

Nuxt renderiza la página y sus componentes y obtiene cualquier dato requerido con useFetch y useAsyncData durante este paso. Dado que no hay actualizaciones dinámicas y no ocurren operaciones DOM en el servidor, los hooks del ciclo de vida de Vue como onBeforeMount, onMounted y hooks posteriores NO se ejecutan durante SSR.

Por defecto, Vue pausa el seguimiento de dependencias durante SSR para un mejor rendimiento.

Paso 7: Generar Salida HTML

Después de que se obtienen todos los datos requeridos y se renderizan los componentes, Nuxt combina los componentes renderizados con configuraciones de unhead para generar un documento HTML completo. Este HTML, junto con los datos asociados, se envía de vuelta al cliente para completar el proceso SSR.

Cliente (navegador)

Esta parte del ciclo de vida se ejecuta completamente en el navegador, sin importar qué modo de Nuxt hayas elegido.

Paso 1: Inicializar Nuxt y Ejecutar Plugins de la Aplicación Nuxt

Este paso es similar a la ejecución del lado del servidor e incluye tanto plugins integrados como personalizados.

Los plugins personalizados en el directorio plugins/, como aquellos sin sufijo (por ejemplo, myPlugin.ts) y con el sufijo .client (por ejemplo, myClientPlugin.client.ts), se ejecutan en el lado del cliente.

Paso 2: Validación de Rutas

Este paso es el mismo que la ejecución del lado del servidor e incluye el método validate si está definido en la función definePageMeta.

Paso 3: Ejecutar Middleware de la Aplicación Nuxt

El middleware de Nuxt se ejecuta tanto en el servidor como en el cliente. Si deseas que cierto código se ejecute en entornos específicos, considera dividirlo usando import.meta.client para el cliente y import.meta.server para el servidor.

Paso 4: Montar la Aplicación Vue e Hidratación

Llamar a app.mount('#__nuxt') monta la aplicación Vue en el DOM. Si la aplicación usa el modo SSR o SSG, Vue realiza un paso de hidratación para hacer que la aplicación del lado del cliente sea interactiva. Durante la hidratación, Vue recrea la aplicación (excluyendo Componentes del Servidor), empareja cada componente con sus nodos DOM correspondientes y adjunta los escuchadores de eventos DOM.

Para asegurar una hidratación adecuada, es importante mantener la consistencia entre los datos en el servidor y el cliente. Para solicitudes de API, se recomienda usar useAsyncData, useFetch u otros composables compatibles con SSR. Estos métodos aseguran que los datos obtenidos en el lado del servidor se reutilicen durante la hidratación, evitando solicitudes repetidas. Cualquier nueva solicitud solo debe activarse después de la hidratación, evitando errores de hidratación.

Paso 5: Ciclo de Vida de Vue

A diferencia del servidor, el navegador ejecuta el ciclo de vida completo de Vue.