Características de un proyecto Laravel Inertia

▶

Cuando empiezas a trabajar con Laravel y quieres una experiencia realmente fluida entre backend y frontend, inevitablemente acabas mirando Inertia.js. Y no es para menos: te permite crear una SPA sin montar una API REST completa, sin pelearte con Vue Router, ni duplicar lógica entre cliente y servidor.

La primera vez que probé Inertia y cree un nuevo proyecto en Laravel Inertia, venía de proyectos con Breeze y Blade, así que me sorprendió lo natural que se siente trabajar con Inertia… casi como si Laravel pudiera renderizar Vue de forma nativa lo cual es la pieza clave y característica principal.

En este artículo te cuento todas las características de Laravel Inertia, cómo funciona por dentro y por qué está ganando tanto terreno entre los desarrolladores.

Qué es Laravel Inertia y por qué resuelve tantos problemas

El problema clásico de las SPA con API separada

El enfoque tradicional de SPA (API + cliente JS) tiene dos efectos secundarios:

• Tienes que duplicar conceptos (rutas Laravel + rutas Vue/React).
• Pierdes funcionalidades nativas como sesiones, middlewares o validación.

Además, montar un CRUD completo termina siendo más complejo: una parte en Laravel, otra parte en el frontend… y dos mundos que hay que mantener en sincronía.

Cómo Inertia mezcla lo mejor del SSR y del SPA

Inertia simplifica todo devolviendo componentes JavaScript directamente desde los controladores de Laravel.
No necesitas una API REST para mostrar datos: Laravel te pasa props al componente y listo.

La magia ocurre porque Inertia captura las peticiones y evita recargas de página. Así tienes una experiencia SPA, pero con la simplicidad del SSR de Laravel.

Recuerdo que cuando revisé mis controladores por primera vez pensé: “esto funciona igual que Blade… solo que lo que se renderiza es un componente Vue”. Y ahí fue cuando me terminó de convencer y esto es lo bonito de Inertia, es una evolución muy suave de lo que tenemos en Laravel base, simplemente ahora devolvemos un Vue en la vista es vez de un blade y cambios mínimos para que todo funcione como lo esperado.

Características principales de Laravel Inertia (la lista completa)

Aquí sí vamos a hacer lo que los competidores no hacen: una lista clara, completa y explicada.

Renderizado con Inertia

Alerta de spoiler: Inertia sirve para renderizar componentes en Vue (o React, si así lo decides). En este caso usamos Vue. Esto es el núcleo de Inertia: simplemente renderizar componentes en lugar de usar archivos Blade.

Lo mismo ocurre en todas las vistas que renderizamos, como puedes comprobar si inspeccionas los controladores. Los nombres son bastante descriptivos y reflejan bien la operación que realizan. Básicamente, tenemos un módulo completo de autenticación: login, registro, recuperación de contraseña, etc. Nada del otro mundo.

return Inertia::render('Users/Show', [
    'user' => $user
]);

Y eso devuelve un componente Vue/React en lugar de una vista Blade.

Props: comunicación directa servidor → cliente

Laravel envía datos directamente al componente como props.
No necesitas Axios, ni fetch, ni endpoints adicionales.

Vistas controladas por controladores

Algo importante es que, en Inertia, las vistas se renderizan mediante controladores, no directamente por componentes como podrías hacer en Laravel “puro” (o Blade). Si quieres renderizar algo, por defecto lo haces mediante controladores, como lo estamos haciendo aquí.

Middleware y mensajes globales

Laravel trae un middleware recomendado: HandleInertiaRequests.

Este archivo también es importante, ya que actúa como un middleware, es decir, un intermediario. Lo utilizamos cuando queremos pasar algo a los componentes. Más adelante lo usaremos para enviar los mensajes flash, que son esos mensajes temporales que se muestran después de realizar alguna acción (por ejemplo, guardar un formulario con éxito).

Aquí es donde configuramos esos datos que queremos enviar de forma global a todas las vistas.

Enrutamiento clásico de Laravel con experiencia SPA

Todas tus rutas siguen siendo rutas de Laravel.
Inertia solo intercepta la navegación y la convierte en navegación interna sin recarga.

Modelo de usuario y autenticación

El modelo de usuario es totalmente básico, con los traits de Authenticatable, HasFactory, Notifiable, y alguno que otro más. También hay un Provider, que parece prestado, pero no hay mucho más misterio por aquí.

¿Dónde están las vistas?

Si revisamos la carpeta resources/views, verás que solo hay una vista. Hacemos una pausa aquí para explicar esto: ya te conté que usamos controladores y que renderizamos componentes Vue. Entonces, ¿dónde están las demás vistas?

Respuesta: ya te lo adelanté… ¡son componentes en Vue!

Solo tenemos una vista Blade, pero hay muchas vistas renderizadas a través de componentes Vue.

Por cada página que ves, hay un componente detrás. Y están organizados así:

Pages: contiene las páginas completas.

Components: contiene las piezas reutilizables con las que se arman esas páginas.

La estructura está bastante bien modularizada.

Integración con autenticación y sesiones de Laravel

Lo mejor: no cambias nada.

Las sesiones, los middlewares, los guards… funcionan igual que siempre.

Cuando reconstruí mi login y registro, prácticamente reutilicé lo de Blade, solo transformándolo en componentes.

Layouts y estructura de la aplicación

También tenemos la carpeta Layouts, que contiene estructuras comunes para las páginas.

Si abrimos el archivo de arranque (app.ts o app.js), veremos cómo se inicializa la aplicación.

También tenemos el App.blade.php, que es el único archivo Blade, y lo estamos importando como plantilla principal. Inertia ya lo rastrea automáticamente, así que no debes moverlo ni cambiarle el nombre.

Inertia fomenta una estructura amplia pero muy ordenada:

• /Pages → páginas completas
• /Components → piezas reutilizables
• /Layouts → plantillas globales

Navegación con <Link> y peticiones XHR inteligentes

Inertia reemplaza la navegación por enlaces mediante:

<Link href="/posts/1">Ver post</Link>

Esto evita recargar la página y mantiene el estado del frontend.

Gestión de estado mínima sin store externo

No siempre hace falta Vuex, Pinia o Redux.

El patrón “controlador → props → componente” reduce mucho la necesidad de un store global.

Inicialización de la app con Inertia

El arranque de la app es similar al de cualquier proyecto en Vue:

Usamos createApp, aunque aquí viene personalizado.

Se indica la ruta donde están nuestras páginas.

Se define dónde se van a montar los componentes.

Se configuran plugins personalizados (como la barra de progreso de navegación):

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./pages/${name}.vue`, import.meta.glob<DefineComponent>('./pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(Oruga)
            .use(CkeditorPlugin)
            .use(ZiggyVue)
            .mount(el);

Todo esto ocurre en el archivo de arranque.

Ubicación y uso de los componentes

Como ya vimos, las páginas están en la carpeta Pages, y los elementos reutilizables están en Components. Puedes ver todo lo que se está utilizando y también puedes reutilizarlos tú mismo.

Manejo de formularios con Inertia

Una diferencia importante respecto a una aplicación Vue tradicional es el manejo de datos. Aquí no usamos axios directamente. En su lugar, usamos un mecanismo interno de Inertia llamado useForm de Inertia:

const form = useForm({
    name: '',
    email: ''
});
form.post('/users');

Este useForm lo importamos y utilizamos directamente para manejar formularios y datos de manera más limpia. Aquí definimos los datos del formulario, el envío, y cualquier otra lógica relacionada.

Ventajas reales de trabajar con Laravel Inertia

Ahorro de tiempo frente a montar API + SPA

• No duplicas rutas, no creas controladores API, no creas servicios Axios.
  Todo pasa por Laravel.
• Curva de aprendizaje mínima para desarrolladores Laravel
• Si vienes de Blade, te sientes en casa desde el primer día.
  A mí me pasó exactamente eso: comencé migrando vistas y en una tarde ya tenía el flujo montado.
• Integración nativa con Vue/React/Svelte
• Como el backend entrega props a los componentes, el frontend es extremadamente simple.

Cuándo elegir Inertia.js sobre Blade o Livewire?

Comparación breve

• Blade: perfecto para sitios tradicionales.
• Livewire: ideal cuando no quieres tocar JS pero necesitas reactividad.
• Inertia: la opción para apps modernas que combinan Laravel + Vue/React.

Casos de uso recomendados

• Dashboards
• Sistemas CRUD
• Aplicaciones con lógica compleja pero vistas dinámicas
• Proyectos donde quieres una SPA sin crear una API REST completa

Preguntas frecuentes

• ¿Inertia reemplaza a Blade?
  • No, pero en una SPA solo necesitarás un Blade.
• ¿Puedo usar Inertia sin Vue?
  • Sí, también funciona con React y Svelte.
• ¿Es buena opción para proyectos grandes?
  • Sí, porque mantiene la lógica en Laravel y el frontend modular.
• ¿Qué pasa con SEO en una SPA con Inertia?
  • Puedes habilitar SSR con Node para entregar HTML al bot.

Conclusión

Laravel Inertia combina lo mejor del servidor y del cliente sin obligarte a crear una API REST completa ni un router JS complejo.
Si ya trabajas con Laravel, usar Inertia se siente casi natural: controladores, rutas, middleware, validación… nada cambia, pero el frontend se vuelve mucho más dinámico.

En mi experiencia, la curva de aprendizaje es mínima y el desarrollo se vuelve muy ágil: un login, un CRUD o un dashboard se montan en la mitad de tiempo comparado con una SPA tradicional.

Si buscas flexibilidad, velocidad y una arquitectura limpia, Laravel Inertia es de las mejores opciones disponibles en el desarrollo web moderno.