Inertia.js | What is it & who should use it? (part 1)
I’m a full-stack developer who’s building lot’s of single-page applications with Laravel and Vue, which absolutely is a great combination. However, as I often work on these projects on my own, I’m sometimes missing the connection between the two frameworks. For example, when you are working on a Laravel only application, it’s super easy to get the data from the controllers into the blade views. However, when you’re working with Vue for the frontend of your application, you’ll first have to make a request to your API and then process the response. But what if I told you there’s a much easier way to get this done?
Let me introduce you to Inertia.js. If you haven’t heard of Inertia before, I won’t blame you. The first official release has only been around since August 2019, but its popularity is already growing very rapidly. Inertia allows developers to seamlessly create a connection between their backend and frontend framework. One of its greatest features is the wide availability. While I was talking about using Laravel & Vue for my projects, you can also use Inertia when you’re working with Rails, React, or Svelte (and you can make any combination you like). So what is Inertia exactly and how does it work?
What is it?
Inertia was created to be the glue between your backend and frontend frameworks. Without having to manually create an API or anything, you can now easily get data from your models and controllers into your views. For example, if you’d be using Laravel & Vue, you’d no longer have to install Axios and make a request to your Laravel application. All you have to do is to specify the right Vue component and the data that has to be passed on in your Laravel controller, and Inertia will do all the work for you. You can use the <inertia-link> component to make Inertia intercept a redirect and make the visit over XHR instead. This allows you to create complex single-page apps without the hassle that normally comes when building modern SPAs.
Who should use it?
If you’re working with Laravel or Ruby for the server-side of your application and Vue, React, or Svelte for the client-side, then there’s a big change of Inertia being exactly what you need! Especially when you’re a full-stack developer (meaning you get to work on both sides), Inertia can speed up your workflow a lot, as you’ll no longer have to build extensive REST or GraphQL APIs or have to set up multiple repositories or hosting accounts. Inertia creates a tight coupling between the backend and the frontend, without you having to do all the work. You can still use your frameworks in the same way you were used to and your users will still get the same SPA experience as when you wouldn’t be using Inertia.
More information & live demo
There aren’t many youtube videos or Medium articles about Inertia out there yet, but luckily the devs of Inertia provided a lot of information on their website. Besides that, there’s also a very extended demo available (created by the same devs) at http://demo.inertiajs.com/login, including a GitHub repo.
Part 2 will all be about getting started with Inertia and creating your very first project together with Laravel & Vue. Stay tuned, because it’s coming soon!
