Inertia.js
Una desventaja de trabajar con una single page application SPA, es que como sabemos esta consta de 2 componentes importantes, el backend en la que definiremos a una API, y el frontend en donde consumiremos los datos con algún framework popular como angular vue o react.
La desventaja principal de esto es que estaremos trabajando con 2 componentes y estaremos desaprovechando muchas de las funcionalidades del backend, como el render de vistas, routing etc.
Hace un par de meses se lanzó una nueva propuesta para poder trabajar con single page aplications con funcionalidades del backend.
Esta propuesta es llamada Inertiajs. Inertiajs es una librería que combina lo mejor del server side render y client side render, permitiéndonos construir SPAs usando el render clásico de vistas, controladores y el routing de nuestro backend, sin tener que definir una API y un sistema de routing en el frontend.
Como una primera introducción a esta librería podemos ver el siguiente ejemplo
Cada vez que accedemos a la acción show (events/event_id) estaremos retornando un componente, aquí lo que más importante que podemos ver es que directamente estamos retornando un componente desde el controlador y le estamos pasando de parámetro el objeto a mostrar
Dentro entonces de nuestro componente lo único que tenemos que hacer es interactuar con nuestro elemento. Vemos que estamos definiendo un prop, esto debido a que en el controlador le estamos enviando de parámetro a nuestro modelo.
Framework agnostic
Una de las principales características de esta librería es que es agnóstica en cuanto a las tecnologías que usamos, es decir nosotros poder usar esta librería con vue y Laravel o bien con svelte y rails.
Los adaptadores oficiales de inertia se limitan actualmente a Rails, Laravel, vue, react y svelte aunque de igual forma podemos encontrar adaptadores de terceros para múltiples tecnologías como Cake, Django Adonis etc.
Cómo funciona ?
Inertia nos permite trabajar de la forma tradicional usando los componentes de nuestro framework de preferencia, routing , controladores, middlewares, autenticación, autorización etc.
La única diferencia la podemos ver en la capa de la vista, de la forma tradicional lo que retornamos es un html renderizado con algún template engine(ERB, BLADE), lo que nosotros retornamos cuando usamos esta librería son básicamente componentes javascript, esto nos permite construir nuestra aplicación usando algún framework como vue react etc.
Como sabemos el simple hecho de usar javascript no nos da una experiencia SPA, si por ejemplo nosotros damos click a un link, nuestro navegador hará una petición y recargará la página.
Es aquí donde inertia entra en juego, el core de inertia es actuar como una librería de routing en el cliente, nos permite hacer peticiones a nuestro servidor sin forzar un recarga de nuestra página, esto es debido a que para trabajar con peticiones, por ejemplo ir a otra página lo tenemos que hacer a través de la directiva
Cuando nosotros hacemos click a un inertia-link lo que hace es básicamente hacer una petición XHR, el servidor automáticamente detecta que esta es una petición de inertia esto ya que en cada petición inertia modifica a los header y agregar a la directiva
X-Intertia: true Con esto entonces el servidor sabe que tiene que retornar un JSON con el componente javascript, así como como toda su configuración (nombre, data, props etc), una vez obtenido el json inertia automáticamente intercambia el contenido de la página con el nuevo componente, si tener que hacer una recarga de nuestra página, esto nos da una entonces una experiencia SPA.
Conclusión
Sin duda inertia es una librería muy interesante que nos permite cambiar el flujo de desarrollo de aplicaciones SPAs, ya que como vimos con esta librería nos evitaremos muchos de los problemas que conlleva desarrollar una SPA.
Si aún tienes dudas sobre lo que podemos realizar con esta librería te invito a tomar el taller de introducción a Inertia con Laravel y Vue. Puedes ver el taller en el siguiente enlace 👉
