Inertia 3 con Laravel 13: crea una SPA sin construir una API

Inertia 3.0.0 salió el 26 de marzo de 2026 y los starter kits oficiales de Laravel 13 ya lo incluyen para React, Vue y Svelte: renderizas componentes desde el controlador, sin API ni endpoints JSON. Esta guía te enseña a montar una SPA con Inertia 3 y Laravel 13 desde cero, con formularios, actualizaciones optimistas y SSR.

Qué es Inertia y por qué encaja con Laravel 13

La SPA server-driven: el controlador decide la página

Inertia es una librería que une Laravel con un framework de frontend como React, Vue o Svelte sin construir una API separada. El controlador devuelve dos cosas: las props, es decir, los datos que la página necesita, y el nombre del componente JavaScript que debe renderizarlos. El frontend pinta ese componente y, cuando el usuario navega a otra ruta, Inertia intercambia solo la parte de la página que cambia, sin recargar el documento completo. El resultado es la experiencia de una SPA con el flujo de trabajo clásico de Laravel: rutas, controladores y Blade como punto de entrada.

Inertia frente a Livewire y a una API + SPA clásica

La diferencia con una SPA clásica es que no escribes endpoints JSON ni gestionas autenticación de API: las rutas Laravel devuelven páginas directamente. La diferencia con Livewire es la otra cara de la moneda: Livewire mantiene el estado y la lógica interactiva en el servidor con PHP, mientras que Inertia entrega la interactividad al cliente con JavaScript. Si tu equipo domina React o Vue y quieres una UI muy dinámica, Inertia encaja; si prefieres no escribir JavaScript, Livewire sigue siendo la vía.

Qué trae Inertia 3 (marzo de 2026)

Adiós a Axios: cliente XHR integrado y bundle más pequeño

La versión 3 elimina la dependencia de Axios y usa un cliente XHR propio integrado en la librería. Eso se traduce en un bundle más pequeño y una pieza menos que mantener, porque el cliente de peticiones ahora forma parte del propio paquete de Inertia. Para la mayoría de aplicaciones no notarás ninguna diferencia al migrar, salvo en el tamaño final de los archivos que llegan al navegador.

SSR en desarrollo sin servidor Node aparte

El renderizado del lado del servidor era históricamente la parte más incómoda de Inertia: había que levantar un servidor Node.js aparte para poder probarlo. En Inertia 3, el SSR funciona en desarrollo sin ese paso adicional, lo que simplifica el flujo diario. Configuras el renderizador una vez y tanto en local como en producción las páginas se sirven renderizadas cuando hace falta.

El hook useHttp para peticiones standalone

useHttp cubre un hueco que Inertia tenía desde hacía tiempo: las peticiones HTTP que no disparan una navegación, como guardar un archivo, validar un email o consultar un endpoint. Devuelve estado reactivo con processing, errors, progress e isDirty, con la misma experiencia de desarrollo que useForm, e integra validación en tiempo real con Precognition 2.x si lo combinas con el paquete de Laravel.

Actualizaciones optimistas en router, useForm y useHttp

Las actualizaciones optimistas llegan a los tres puntos de entrada: router, useForm y useHttp. La interfaz refleja el cambio al instante, antes de que el servidor confirme la petición, y si la respuesta falla, el estado se revierte automáticamente al valor anterior. Es la técnica que hace que una aplicación se sienta instantánea incluso en conexiones lentas.

El plugin @inertiajs/vite y Vite 8

El nuevo plugin @inertiajs/vite sustituye a la configuración manual anterior: gestiona la resolución de páginas y la configuración de SSR automáticamente, y añade soporte para Vite 8. En el archivo vite.config.js ya no tienes que indicar a mano dónde viven los componentes ni cómo se llama el archivo de entrada del servidor; el plugin lo deduce de la estructura del proyecto.

Empezar con el starter kit oficial de Laravel 13

laravel new con React, Vue o Svelte

La forma más rápida de tener Inertia 3 funcionando es usar los starter kits oficiales de Laravel 13, que incluyen React, Vue y Svelte ya configurados con Inertia 3. Por ejemplo, el kit de Svelte combina Svelte 5, TypeScript, Inertia 3 y shadcn-svelte, con todo el código viviendo en tu aplicación. Para este tutorial elegimos React, la opción más extendida:

composer create-project laravel/laravel mi-app
cd mi-app
composer require laravel/breeze --dev
php artisan breeze:install react --ssr
npm install
npm run dev

Breeze instala el starter kit con Inertia 3 y deja preparado el SSR. En cuestión de minutos tienes una aplicación con login, registro y un panel de ejemplo funcionando sobre React, sin haber escrito una sola ruta de API.

Estructura del proyecto generado

El proyecto generado separa claramente las dos mitades. En el backend, los controladores devuelven páginas con Inertia::render y las rutas se definen en routes/web.php como siempre. En el frontend, la carpeta resources/js contiene los componentes: app.tsx como punto de entrada, pages/ con una carpeta por página y los componentes de layout compartidos. El archivo vite.config.js incluye el plugin @inertiajs/vite y la configuración de SSR.

Tu primera página Inertia: controlador, props y componente

Inertia::render desde el controlador

Una página Inertia se construye en el controlador indicando el componente y los datos. Por ejemplo, un listado de artículos:

use Inertia\Inertia;

public function index()
{
    return Inertia::render('Articles/Index', [
        'articles' => Article::published()->latest()->get(),
    ]);
}

En el frontend, el componente Articles/Index recibe las props y las pinta con React. Inertia se encarga de convertir los datos de PHP en JSON y de pasárselos al componente en cada visita.

Navegación entre páginas sin recarga

Los enlaces se crean con el componente Link de Inertia en lugar de una etiqueta a normal:

import { Link } from '@inertiajs/react';

<Link href="/articles/1">Leer artículo</Link>

Cuando el usuario pulsa el enlace, Inertia intercepta la petición, solicita solo los datos de la nueva página al servidor y actualiza el contenido sin recargar el navegador. El historial, el scroll y el foco se comportan como en una navegación tradicional, así que no pierdes nada del comportamiento que los usuarios esperan.

Formularios con useForm y validación

Errores de validación del lado del servidor

Para formularios, Inertia ofrece el hook useForm. Envías los datos con el método post y, si el servidor devuelve errores de validación de Laravel, llegan automáticamente en la prop errors:

const { data, setData, post, errors, processing } = useForm({
    title: '',
    body: '',
});

function submit(e) {
    e.preventDefault();
    post('/articles');
}

El formulario mantiene su estado entre envíos, muestra los errores campo a campo y desactiva el botón mientras processing sea true. Toda la lógica de validación sigue viviendo en las Form Requests de Laravel, como en una aplicación clásica.

Peticiones standalone con useHttp y progreso de subida

Para acciones que no navegan, como subir una imagen o comprobar disponibilidad, useHttp hace la petición y expone el progreso. En una subida de archivos, la propiedad progress te permite pintar una barra de avance real:

const upload = useHttp();

function handleUpload(e) {
    upload.post('/uploads', {
        file: e.target.files[0],
        forceFormData: true,
    });
}

{upload.progress && <progress value={upload.progress.percentage} max="100" />}

La petición se lanza sin cambiar de página y el componente reacciona a processing, errors y progress de forma declarativa.

Actualizaciones optimistas en la práctica

El caso más claro de actualización optimista es marcar un artículo como favorito. Con useForm o router puedes aplicar el cambio en la interfaz antes de que el servidor responda y revertirlo si falla:

router.put(`/articles/${article.id}/favorite`, {}, {
    optimistic: {
        favorite: !article.favorite,
    },
    onError: () => {
        // Inertia revierte automáticamente el valor anterior
    },
});

El usuario ve el corazón relleno al instante; si la petición falla, Inertia restaura el estado original sin código adicional. Es la diferencia entre una app que se siente reactiva y una que parece que espera permiso del servidor para cada interacción.

SSR en producción con Inertia 3

El renderizado del lado del servidor mejora el SEO y la primera impresión: el HTML llega completo al navegador y luego React lo hidrata. Con Inertia 3, el flujo en producción se reduce a instalar el paquete del servidor, compilar el archivo de entrada de SSR y arrancar el proceso con un gestor de procesos:

npm run build
node bootstrap/ssr/ssr.mjs

El plugin @inertiajs/vite genera y configura este archivo automáticamente. En producción conviene supervisar el proceso de SSR con systemd o un gestor equivalente para que se reinicie si se cae, igual que harías con un worker de colas.

Inertia 3 vs Livewire 4: cuándo elegir cada uno

La decisión entre Inertia 3 y Livewire 4 es sobre todo de equipo y de producto. Livewire mantiene toda la lógica en PHP y el estado en el servidor: perfecto si tu equipo es de backend y las interacciones son moderadas. Inertia exige un frontend JavaScript, pero da control total sobre la UI con React, Vue o Svelte, ideal para interfaces muy dinámicas, animaciones y componentes reutilizables. Los starter kits de Laravel 13 incluyen ambos, así que puedes probar los dos en minutos y decidir con datos, no con opiniones.

Conclusión

Inertia 3 con Laravel 13 te da una SPA moderna con React, Vue o Svelte sin mantener una API separada: el controlador sigue decidiendo qué página se renderiza, y useHttp, las actualizaciones optimistas y el SSR resuelto en desarrollo eliminan las fricciones clásicas de la librería. Arranca con un starter kit oficial y, si quieres comparar con la alternativa server-driven, echa un vistazo a la guía de Livewire 4 que ya publicamos en el blog.