Si hablamos de React (y otros frameworks JS), Laravel y cómo conectarlos sin construir una API RESTful completa, Inertia.js es una pieza clave de la conversación.
¿Qué es Inertia.js?
Inertia.js se describe a sí mismo como el "Glue that connects modern single-page apps to classic server-side routing." (El pegamento que conecta las aplicaciones modernas de una sola página con el enrutamiento clásico del lado del servidor).
En esencia, Inertia te permite construir Single Page Applications (SPAs) utilizando frameworks de JavaScript de frontend (como React, Vue o Svelte), mientras mantienes el enrutamiento y los controladores de tu framework backend tradicional (como Laravel).
La Gran Idea de Inertia: "Monolitos de SPA"
Tradicionalmente, tienes dos caminos principales:
- Monolito Tradicional: Laravel se encarga de las rutas, las vistas Blade, la lógica de backend y el renderizado del HTML. El JavaScript es para interactividad menor.
- SPA + API RESTful: Laravel es solo la API, y React/Next.js es un frontend completamente separado que consume esa API. Esto requiere construir y mantener dos bases de código de enrutamiento y a menudo duplica la lógica de validación.
Inertia.js ofrece una tercera vía:
- Tu Backend (Laravel) maneja las rutas y los controladores como siempre. Cuando haces clic en un enlace de Inertia, Laravel recibe la solicitud de la misma manera que lo haría una solicitud web tradicional.
- En lugar de devolver HTML (una vista Blade), Laravel devuelve un JSON especial que contiene los datos (props) necesarios para la página y el nombre del componente de React que debe renderizar esos datos.
- El cliente (Inertia.js en tu frontend React) intercepta estas respuestas JSON. En lugar de recargar la página, Inertia hace una "hidratación" de React (o Vue/Svelte), intercambiando el componente actual por el nuevo y pasándole los datos.
- No hay API RESTful separada: No tienes que diseñar y mantener endpoints
api/v1/users,api/v1/products, etc. Simplemente trabajas con tus rutas web tradicionales de Laravel.
¿Cómo se relaciona con los temas que hemos visto?
- React/Next.js: Inertia se usa con React (o Vue/Svelte). Puedes construir tus componentes React como lo harías normalmente. Si usas Next.js como el framework de tu SPA, Inertia se encarga de la conexión entre el enrutamiento del lado del servidor de Laravel y los componentes de React de Next.js.
- SSR: Inertia soporta el Server-Side Rendering (SSR) opcionalmente. Si lo habilitas, Laravel (con la ayuda de un pequeño servidor Node.js) puede prerrenderizar tus componentes de React a HTML en el servidor, tal como lo haría Next.js internamente. Esto mejora el SEO y el rendimiento inicial.
- Autenticación (Sanctum/Sesiones): Para la autenticación, Inertia se apoya en el sistema de sesiones de Laravel. Dado que es un "monolito de SPA", puedes usar la autenticación basada en sesiones y cookies de Laravel de la manera tradicional (como si fuera una aplicación Blade), lo cual es ideal en la mayoría de los casos y evita la complejidad de los tokens de API para autenticación de usuario en SPA.
Ventajas de Usar Inertia.js:
- Desarrollo Rápido: No necesitas construir y documentar una API RESTful separada. Simplemente devuelves props desde tus controladores de Laravel.
- Código Backend Familiar: Puedes usar todas las características de Laravel que ya conoces y amas (rutas, controladores, validación de formularios, middleware, Eloquent) sin cambios significativos en tu forma de pensar.
- Mantenimiento Simplificado: Menos duplicación de lógica (ej. validación) entre frontend y backend.
- SEO y Rendimiento (con SSR): Puedes obtener los beneficios de SSR para tus SPAs, lo cual es excelente para el SEO y la primera carga de la página.
- Flujo de Trabajo Web Tradicional: Se siente como construir una aplicación web tradicional, pero con los beneficios de una SPA.
Desventajas / Consideraciones:
- Acoplamiento: Tu frontend y backend están más acoplados que en una arquitectura SPA + API RESTful pura. Si necesitas que tu API sea consumida por muchas aplicaciones diferentes (móviles, IoT, otros frontends no JS), Inertia no es la solución ideal para la API pública.
- No es para todas las API: Si tu objetivo principal es construir una API pública robusta y bien documentada, Laravel con Sanctum (para API tokens) o Passport (para OAuth) sigue siendo el camino.
- Curva de Aprendizaje Inicial: Aunque simplifica mucho, hay que entender la filosofía de Inertia y cómo se manejan los props y los datos.
En resumen, Inertia.js es una excelente opción si quieres los beneficios de una SPA (React, transiciones rápidas sin recargas de página) pero prefieres seguir manejando tu enrutamiento, validación y lógica principal en Laravel, evitando la complejidad de construir una API RESTful completa y separada. Es ideal para paneles de administración, aplicaciones internas o cualquier SPA donde el backend principal sea un monolito de Laravel.
En el futuro, las apps de React deberán ser acompañadas por un framework como Inertia, Next.js, o alguna herramienta de compilación como Vite, porque no se podrá seguir usando npx create-react-app.
Fuentes: Sunsetting Create React App.
Comentarios