Inertia.js

 Inertia.js es una librería que actúa como un "puente" o "pegamento" entre tu aplicación Laravel (backend) y un framework frontend moderno como React, Vue.js o Svelte.

Su propósito principal es permitirte construir aplicaciones de una sola página (SPA) completas y modernas, sin la necesidad de crear una API separada y sin la complejidad que esto conlleva. Inertia permite que los desarrolladores de backend sigan usando las herramientas que ya conocen y aman de Laravel (como enrutamiento, controladores, autenticación, validación, y el ORM Eloquent), mientras obtienen una experiencia de usuario fluida y rápida en el frontend.

¿Por qué usar Inertia en Laravel?

Tradicionalmente, para crear una SPA tenías que separar tu proyecto en dos:

  1. Un backend que exponía una API (generalmente con datos en JSON).

  2. Un frontend (ej. con React o Vue) que consumía esa API y manejaba su propio enrutamiento (ej. con Vue Router).

Este enfoque, aunque poderoso, añade una gran complejidad. Inertia elimina esa capa extra, permitiéndote:

  • Mantener el enrutamiento en el servidor: Sigues usando el enrutador de Laravel y sus controladores. No necesitas un enrutador del lado del cliente, lo que simplifica el proyecto.

  • Usar la autenticación y autorización de Laravel: Puedes seguir usando el sistema de autenticación basado en sesiones de Laravel, sin necesidad de implementar sistemas complejos como OAuth o JWT.

  • Evitar la duplicación de lógica: La validación, autorización y otras reglas de negocio se definen una sola vez en el backend, como siempre has hecho en Laravel.

¿Para qué sirve Inertia?

Sirve para agilizar y modernizar el desarrollo web con Laravel, ofreciendo una serie de beneficios clave:

  • Experiencia de Usuario (UX) Superior: Consigues la velocidad y fluidez de una SPA (navegación sin recargas completas de página), pero con la simplicidad de una aplicación tradicional renderizada en el servidor.

  • Mayor Velocidad de Desarrollo: Al eliminar la complejidad de crear y mantener una API separada, los equipos pueden desarrollar y lanzar funcionalidades mucho más rápido.

  • Depuración Simplificada: Al no tener dos proyectos y dos conjuntos de lógica separados, el proceso de depuración se vuelve más directo y sencillo.

  • Rendimiento Mejorado: La última versión, Inertia 2.0, incluye características como:

    • deferred props: Permite cargar datos no críticos después de que la página se haya renderizado, mejorando el tiempo de carga inicial (TTFB).

    • prefetching: Precarga los datos de las páginas a las que el usuario probablemente navegará (ej. al pasar el ratón por encima de un enlace), haciendo que la navegación sea casi instantánea.

    • polling: Mantiene la interfaz de usuario sincronizada con el estado del servidor actualizando los datos en segundo plano.

En resumen, Inertia se utiliza en Laravel para unificar el desarrollo full-stack, permitiendo crear aplicaciones modernas y rápidas con la potencia de Laravel en el backend y la interactividad de React, Vue o Svelte en el frontend, todo con una fracción de la complejidad de los enfoques tradicionales.

Es una herramienta tan valiosa que es la base de los stacks oficiales de Laravel Breeze y Jetstream para quienes eligen React o Vue

Comentarios

Publicar un comentario

Entradas más populares de este blog

Tareas con Laravel + Inertia + Jetstream

  Tareas con Laravel + Inertia + Jetstream 📋 Descripción del Proyecto Aplicación ultra simple de tareas: ✅ Agregar una tarea ✅ Ver una tarea guardada ✅ Almacenar en arreglo (sesión) ❌ Sin listas largas, sin editar, sin eliminar 🚀 1. INSTALACIÓN (PASO A PASO) 1.1 Crear proyecto bash # Crear proyecto Laravel 10 (compatible con PHP 8.0+) composer create-project laravel/laravel:^10.0 tareas-app composer create-project laravel/laravel tareas-app cd tareas-app 1.2 Instalar Jetstream con Inertia bash # Instalar Jetstream composer require laravel/jetstream # Instalar Jetstream con Inertia (sin equipos) php artisan jetstream:install inertia 1.3 Instalar dependencias frontend bash # Instalar paquetes NPM npm install # Compilar assets npm run build 1.4 Configurar entorno bash # Crear archivo .env cp .env.example .env copy .env.example .env # Generar clave php artisan key:generate # Configurar base de datos SQLite touch database/database.sqlite type nul > databas...
Leer más

HACER CAMBIOS-AL EJEMPLO POR DEFECTO

  Una vez que has configurado tu proyecto con Laravel, Inertia y el Starter Kit elegido, el siguiente paso es entender cómo modificar la página de bienvenida por defecto y empezar a construir tu aplicación. En el ecosistema de Laravel con Inertia, la página de bienvenida ya no es una plantilla Blade tradicional, sino un componente de Vue o React que funciona como el punto de entrada de tu interfaz. Aquí tienes un tutorial paso a paso para hacer tus primeros cambios. 🚀 Entendiendo la Estructura del Proyecto Con el Starter Kit de Laravel (que incluye Vue/React e Inertia), la página de bienvenida que ves al acceder a la raíz de tu proyecto ya no está en resources/views/welcome.blade.php . En su lugar, es un componente de frontend gestionado por Inertia . El punto de entrada del frontend : El archivo resources/js/app.js (o app.ts si usas TypeScript) es donde se configura y arranca la aplicación Inertia . El componente principal : La página de inicio se encuentra en resources/js/Page...
Leer más

Laravel + Inertia - ejemplo

  Perfecto! Vamos a construir un ejemplo mínimo y funcional con Laravel + Inertia + Vue 3 . El ejemplo tendrá: Un input para escribir una tarea. Un botón para guardar esa tarea. La tarea se almacenará en sesión (para no complicar con base de datos) y se mostrará debajo. 1. Estructura de archivos que vamos a tocar text routes/web.php → ruta principal app/Http/Controllers/TareaController.php → controlador resources/js/Pages/Tarea.vue → componente Vue (la vista) 2. Ruta y Controlador routes/web.php php <?php use App \ Http \ Controllers \ TareaController ; use Illuminate \ Support \ Facades \ Route ; Route :: get ( '/tarea' , [ TareaController :: class , 'index' ] ) -> name ( 'tarea.index' ) ; Route :: post ( '/tarea' , [ TareaController :: class , 'store' ] ) -> name ( 'tarea.store' ) ; app/Http/Controllers/TareaController.php php <?php namespace App \ Http \ Controllers ; use Illuminate \ Http \ ...
Leer más