Inertia.js: Un nuevo enfoque para el desarrollo web

arrow_back Blog

Inertia.js es una dependencia que nos permite comunicar aplicaciones del lado del cliente con aplicaciones del lado del servidor construyendo un monolito en lugar de tener diferentes proyectos con todo lo que eso conlleva. En este caso, por poner un ejemplo, aplicaciones Vue en el cliente con aplicaciones Laravel en el servidor.

Antes de que existiera Inertia.js, cuando necesitábamos crear una aplicación del lado del cliente con cualquier framework existente, lo primero en lo que pensábamos era que además de desarrollar el cliente, también necesitaríamos desarrollar una API REST o una API GraphQL en el servidor para nutrir de datos a al aplicación cliente.

Inertia.js no tiene un sistema de rutas del lado del cliente, ni requiere de una API en el servidor. Simplemente necesita controladores y vistas en el cliente, igual que lo hacíamos anteriormente, eso es todo, de esta forma, podemos seguir desarrollar aplicaciones SPA y SSR con Inertia.js igual que lo hemos hecho siempre.

¿Cómo funciona Inertia.js?

Cuando Inertia,js realiza una visita XHR, el servidor detecta que se trata de una visita de Inertia.js y, en lugar de retornar una respuesta HTML completa, retorna una respuesta JSON con el nombre y los datos (props) del componente de la página JavaScript. Después, Inertia.js intercambia dinámicamente el componente anterior con el componente nuevo y actualiza el estado.

A continuación, te adjunto un ejemplo de la propia documentación de Inertia.js:

Como puedes ver, tenemos un controlador Laravel que utiliza una función llamada inertia. La función inertia es un helper que nos ofrece Inertia.js para simplificar el renderizado de componentes en nuestros controladores.

  • Como primer parámetro le tenemos que pasar el nombre del componente del lado del cliente, en este caso un componente Vue.

  • Como segundo parámetro le tenemos que pasar las props que recibirá dicho componente.

Ahora, te adjunto el componente Vue que el controlador Laravel está renderizando utilizando la función inertia:

En este caso, nuestro componente Vue utiliza la sintaxis de Script Setup, y lo único que hace es recibir el evento que le entrega el controlador en forma de prop y renderiza el título en la template.

Adaptadores oficiales de Inertia.js

Los adaptadores oficiales de Inertia.js son aquellos que han sido desarrollados y son mantenidos por Inertia.js.

Un adaptador en Inertia.js se conoce como una implementación de Inertia.js. Existen dos tipos de adaptadores en Inertia.js:

Cada adaptador nos permitirá utilizar Inertia.js tanto en el cliente o en el servidor.

Adaptadores de la comunidad de Inertia.js

Además de los adaptadores oficiales que nos ofrece Inertia.js, también existen adaptadores creados por la comunidad que podemos utilizar en multitud de frameworks o librerías.

No más rutas en el cliente

Una de las grandes ventajas de Inertia.js es que ya no necesitamos utilizar un sistema de rutas en el cliente. Con esto me refiero a que ni en Vue, React o Svelte será necesario un Router.

El único sistema de rutas que necesitaremos a partir de ahora será el router del servidor, en mi caso, ya que trabajo con Laravel, las rutas las definiré normalmente en el archivo de rutas web.php.

Inertia.js será el encargado de hacer que la magia funcione y que el sistema de rutas funcione tanto en el servidor como en el cliente, nosotros no deberemos hacer absolutamente nada.

Formularios en Inertia.js

Si bien es posible realizar el envío de nuestros formularios como siempre lo hemos hecho utilizando Inertia.js, no se recomienda, ya que puede provocar recargas de páginas completas con resultados no deseados. En su lugar, es mejor interceptar los envíos de formularios y luego realizar la solicitud utilizando Inertia.js.

Mi propuesta en este caso es hacer uso del helper useForm de Inertia.js, una herramienta fantástica que nos ayudará a definir y procesar formularios en el cliente con Inertia.js.

Como puedes ver, tenemos un formulario de login con Vue que utiliza el helper useForm de Inertia.js para preparar y procesar la petición al servidor, así de sencillo es.

Para enviar formularios con el helper useForm podemos hacer uso de los siguientes métodos:

Más información acerca de los formularios en Inertia.js.

Compartir datos en Inertia.js

Una característica muy utilizada en Inertia.js es tener la posibilidad de compartir datos de forma global en nuestra aplicación. Con esto me refiero a poder definir datos en el servidor que estén disponibles siempre en todos los componentes del lado del cliente.

En Laravel esta característica se lleva a cabo haciendo uso del Middleware HandleInertiaRequests:

Ese middleware lo podremos ajustar a nuestras necesidades para nutrir de datos a nuestros componentes, pero ten cuidado, ten en cuenta que esos datos serán globales, con todo lo que ello conlleva.


Hasta aquí esta entrada sobre Inertia.js, como puedes ver, ha venido para facilitarnos la vida, espero que te haya resultado útil.

Si quieres seguir aprendiendo Inertia.js, no te pierdasel tutorial CRUD en Laravel Inertia.

Cursosdesarrolloweb Cursosdesarrolloweb

Cursosdesarrolloweb es una plataforma educativa con cursos y tutoriales en texto y vídeo.

Términos y condiciones Política de privacidad Formulario de contacto

Copyright 2024 © Todos los derechos reservados.

Contacto