El middleware de HTTP y el middleware de Inertia ¿compiten en funcionalidad o se usan para cosas distintas?
No, el middleware de HTTP y el middleware de Inertia no compiten; más bien, trabajan juntos en diferentes niveles de la pila para lograr un objetivo común. Cada uno tiene un propósito distinto y complementario.
Middleware de HTTP (Middleware de Servidor)
El middleware de HTTP opera en el lado del servidor y es el que maneja la solicitud y la respuesta HTTP. Piensa en él como una serie de puertas de seguridad y servicios por los que pasa una solicitud antes de llegar a tu controlador (la lógica de la aplicación).
Funciones comunes:
Autenticación: Verificar que el usuario esté autenticado y tenga una sesión activa.
Autorización: Comprobar si el usuario tiene permiso para acceder a una ruta o recurso específico.
Manejo de CORS (Cross-Origin Resource Sharing): Permitir o denegar solicitudes de dominios diferentes.
Gestión de sesiones: Leer, escribir y mantener el estado de la sesión del usuario.
Sanitización de entrada: Limpiar o validar los datos antes de que lleguen a la aplicación.
Ejemplo en Laravel: Un middleware Auth se asegura de que un usuario haya iniciado sesión antes de acceder a la página de su perfil.
Route::middleware('auth')->group(function () {
Route::get('/profile', [ProfileController::class, 'show']);
});
Middleware de Inertia (Middleware de Aplicación)
El middleware de Inertia opera en un nivel más alto, dentro de la lógica de tu aplicación (también en el lado del servidor), pero su propósito es específico para Inertia. Es el que se encarga de procesar las solicitudes de Inertia y de adjuntar la información necesaria para que el frontend sepa qué hacer.
Funciones comunes:
Determinar si la solicitud es de Inertia: Comprobar si la cabecera
X-Inertiaestá presente.Compartir datos (props) con la aplicación de frontend: Adjuntar información, como la URL actual, el nombre de la versión, o los errores de validación, que la aplicación de Inertia.js necesita.
Manejar redirecciones: Convertir una redirección HTTP normal en una respuesta de Inertia que la aplicación de frontend pueda manejar sin recargar la página.
Ejemplo en Laravel: El middleware de Inertia adjunta automáticamente los mensajes de flash a la página.
// En un controlador después de un formulario
return redirect()->back()->with('success', 'Post guardado.');
// El middleware de Inertia adjunta el mensaje 'success' a las props
// de la página, para que el componente de Vue o React lo pueda leer.
Resumen: Cómo se complementan
Imagina que tienes una solicitud para ver tu perfil de usuario.
Middleware de HTTP: La solicitud llega al servidor. El middleware de HTTP (
auth) la intercepta y verifica si tienes una sesión válida. Si no, te redirige a la página de inicio de sesión. Si la tienes, la solicitud sigue su camino.Middleware de Inertia: Una vez que la solicitud ha pasado por la capa de HTTP, llega al middleware de Inertia. Este middleware ve que es una solicitud de Inertia y adjunta datos como tu nombre de usuario y los errores de validación a las
propsde la página.Controlador: Finalmente, la solicitud llega a tu controlador, que obtiene tus datos de la base de datos y los envía de vuelta.
En pocas palabras, el middleware de HTTP maneja las reglas generales del servidor (seguridad, autenticación, etc.), mientras que el middleware de Inertia se encarga de la comunicación entre tu servidor y tu aplicación de frontend, asegurando que todos los datos y la información de la página viajen de manera correcta.
Ver una solicitud de Inertia en el navegador ayuda a entender la magia que hay detrás. A diferencia de una solicitud HTTP normal, que pide un documento HTML completo, una solicitud de Inertia es una solicitud AJAX que pide datos en formato JSON.
Vamos a ver un ejemplo paso a paso usando las herramientas de desarrollador de tu navegador (como Chrome DevTools).
Escenario
Imagina que tienes una página de blog y haces clic en un enlace para ir a un post específico.
http://tu-app.test/blog → http://tu-app.test/blog/mi-primer-post
1. El Click en el Navegador
Cuando haces clic en el <Link> de Inertia en tu componente de React, Inertia intercepta el clic. Esto es lo primero que hace, antes de que el navegador tenga la oportunidad de hacer una navegación completa.
2. La Solicitud
En lugar de una navegación HTTP estándar, Inertia realiza una solicitud AJAX (una petición GET o POST a la nueva URL). La clave aquí son las cabeceras HTTP especiales que Inertia agrega a la solicitud.
Si abres la pestaña Network en las herramientas de desarrollador de tu navegador y examinas la solicitud, verás algo como esto:
Request URL: http://tu-app.test/blog/mi-primer-post
Request Method: GET
Status Code: 200 OK
Y lo más importante, las cabeceras de la solicitud (Request Headers):
Accept: text/html, application/xhtml+xml
X-Inertia: true
X-Inertia-Version: 123
X-Requested-With: XMLHttpRequest
X-Inertia: true: Esta cabecera es la más importante. Le dice al servidor de Laravel: "¡Hola! No soy un navegador normal, soy una solicitud de Inertia. Por favor, no me envíes un documento HTML completo. Solo necesito los datos de la página en formato JSON".X-Inertia-Version: Se usa para el control de versiones. Si el frontend y el backend tienen versiones diferentes, Inertia sabe que debe hacer una recarga completa para evitar errores.X-Requested-With: XMLHttpRequest: Esta cabecera es común en todas las solicitudes AJAX y también ayuda a identificar la solicitud.
3. La Respuesta del Servidor
Cuando el servidor de Laravel recibe esta solicitud con la cabecera X-Inertia, el middleware de Inertia lo detecta y no renderiza una vista de Blade completa. En su lugar, envía una respuesta JSON.
Si examinas la respuesta (Response) en las herramientas de desarrollador, verás el siguiente JSON:
{
"component": "Blog/PostShow",
"props": {
"post": {
"id": 1,
"title": "Mi primer post en el blog",
"content": "Este es el contenido completo del post...",
"author": { "name": "Jane Doe" }
},
"flash": {
"success": null
},
"auth": {
"user": { "name": "John Doe" }
}
},
"url": "/blog/mi-primer-post",
"version": "123"
}
Este es el paquete de datos que el servidor le envía al frontend de Inertia. Contiene todo lo que necesitas para renderizar la nueva página:
component: El nombre del componente de React que debe renderizarse (Blog/PostShow).props: El objeto que contiene los datos que necesita el componente (el post, el usuario autenticado, etc.).url: La URL a la que se redirigió el usuario.version: La versión de la aplicación.
4. La Reacción del Frontend
El cliente de Inertia.js en tu navegador recibe este JSON y hace dos cosas:
Actualiza el DOM: Sin recargar la página, Inertia usa la información del JSON para cambiar el componente actual (
Blog/Index) por el nuevo (Blog/PostShow) y le pasa los datos (props).Actualiza el historial del navegador: Por último, Inertia actualiza la URL en la barra de direcciones del navegador. Esto hace que la navegación se sienta natural, como si hubieras visitado una página nueva, pero sin una recarga completa.
En resumen, la clave de Inertia es que la comunicación entre el frontend y el backend se reduce a un intercambio de datos JSON y no de HTML. Esto permite la eficiencia de una SPA con la simplicidad de un monolito.
Artículo relacionado: La navegación con React e Inertia