Lately, I've been getting this question a lot from Laravel developers: "What should I learn/use - Livewire or Inertia.js?" And, of course, the answer is very individual, but let's try to compare them and provide more context for the decision.
Backstory: What Problem Does Livewire/Inertia Solve?
Over the last years, single-page applications (SPAs) became popular. You load the JavaScript and assets once, and then all links on the page don't reload the full page, but rather reload only certain parts. User experience became better, but the problem was that they take a lot of time to create properly. You need to take care of two separate parts: front-end and back-end, and then the link between them, including routing, security, and so on. So, at some point, some developers thought to simplify it somehow. That's how Livewire and Inertia.js were born, roughly at the same time, and both became quite popular.
Livewire and Inertia have very similar goals: to simplify the creation of SPAs. However, they do it differently. Livewire is focused on Laravel developers, so they could stay back-end only and not deal with JavaScript at all. Inertia is for Vue or React developers who want to simplify their workflow: not create a separate API, not deal with routing, state management, and other challenges.
So, the goal is similar but the audience is different. You can even compare the URLs:
- laravel-livewire.com ("laravel" in the URL)
- inertiajs.com ("js" in the URL)
Simplicity: Livewire is a Back-Ender's Comfort Zone
If you're a back-ender and need to create a project quickly with just some dynamic elements on the page, Livewire is probably your best solution. It doesn't take you outside of the comfort zone of Laravel: you kind of continue writing back-end Laravel code, creating PHP classes and Blade files. So, for Laravel developers adopting Livewire is typically faster than Inertia.
Inertia comes with a prerequisite: you need to be familiar with the front-end like Vue or React. So, it is by definition more complicated and requires more knowledge than Livewire.
Compare the sequence of actions.
Setup of Livewire:
- Install the Livewire package via composer
- Add 2 Blade directives into the main layout
Setup of Inertia Vue:
- Install the Inertia package via composer
- Add 2 Blade directives into the main layout
- Setup Inertia middleware
- Install client-side adapters:
npm install @inertiajs/inertia @inertiajs/inertia-vue3 - Update the main
resources/js/app.jswithcreateInertiaApp()method
As you can see, there are more preparation steps with Inertia, and you need to be familiar with how all the Vue setup works in the Laravel project, including the main layout, and things like id="app", etc.
Now, how to create a Livewire/Inertia component?
New Livewire component:
- Make Livewire component with Artisan
- Fill in the Livewire component class and its Blade with logic
- Call the Livewire component with
@livewireor<livewire> - Build a navigation/routing system between components
New Inertia component:
- Create a Vue.js component with logic and visual template
- Call Inertia component with
Inertia::render() - Build a navigation/routing system between components
It seems there's roughly the same amount of work, except that Inertia doesn't have an Artisan command to create its component.
But mentally, it's much less work for Laravel developers to stay within Laravel class/Blade structure than to create a new Vue file with <template> and <script>. It's just quicker.
But if the developer can call themselves a full-stack and works with Vue.js daily, then it's a no-brainer for them to go the Inertia way.
Performance
One typical criticism of Livewire is that it makes too many requests to the server, especially if the developers are not careful with wire:model additional options. Indeed, it may make too many requests without the need for that.
It's similar to the criticism of Eloquent: less-experienced developers tend to overlook the performance because "It just works" and leave the code with potentially hundreds of unoptimized SQL queries executed under the hood of Eloquent.
And even the payload of Laravel requests and results is larger: Livewire downloads the full HTML for the block or the component, while Inertia is dealing with JSON as the result.
So, in terms of performance, default Inertia behavior is probably a better way. But, in most cases, your users wouldn't visually notice it, especially on smaller projects. Also, with Livewire, you can optimize a lot of things to improve performance.
SEO: Livewire is Better. In Theory.
I will be honest with you: I don't believe that you should rely on SEO with single-page applications. If your page is very dynamic, with a lot of moving parts, it is more like an application than a website. Heck, they are even called "Single page APPLICATIONS". In my experience, SPAs are built mostly for managing data, usually protected by the authentication mechanism, so people click around to perform actions, and not to get a crawlable website.
That said, there may be a project that needs both dynamic behavior and SEO results. For that, it's better to have server-side rendering, which is then better crawlable by search engines.
Livewire has server-side rendering by default and downloads full HTML which is readable by Google and other crawlers. So, the same thing I've mentioned as a performance issue above, becomes an advantage in terms of SEO.
Inertia by default works with client-side rendering: so every server call returns JSON which is "magically" parsed in the browser. So, search engines have harder times properly reading that page content. That said, in January 2022, Inertia launched the server-side rendering functionality. However, it may require additional effort to set up: it hands the request over to a separate Node.js service so that it can render the page and return the rendered HTML to the browser when it's done.
All those thoughts about SEO are almost theoretical. It's impossible to know upfront how a particular search engine would crawl and read the contents of your website. People say that Google became much better at reading JavaScript-powered dynamic websites over the years, but every case is pretty individual.
Career Opportunites: Everyone Wants Full-Stack Devs
It seems so far that if you're a Laravel developer with minimal front-end experience, you can just start using Livewire and create awesome projects. That is true, but it limits your job opportunities for the future.
If you try to look for Livewire-related jobs on job sites or freelance boards, there are almost none. Mostly, because Livewire is considered as a small additional tool on top of Laravel, with a pretty limited use-case.
Inertia, however, is based on fundamentally popular JavaScript frameworks like Vue or React. And you won't find many jobs mentioning Inertia specifically, either, but you would be forced to jump outside of Laravel comfort zone into a full-stack world, which in turn would open a sea of opportunities for you: these days, every company wants to hire full-stack developers.
So, from that point of view, Livewire is great if you are a solo freelancer, fully responsible for your tech decisions, and/or you build typically small projects with only some dynamic behavior. But, if you work at a bigger company that needs to bet big on some tech stack, it's most likely they will choose React/Vue as the foundation of the front-end code.
Taylor & Community: Why Not Both?
Finally, let's take a look at what other people have to say.
As an "unbiased expert" opinion, let's talk about Laravel Jetstream starter kit that was released with Laravel 8. Taylor Otwell wanted to offer a fresh take on Auth-powered boilerplate for the modern web, and for dynamic elements, he had to choose between Livewire and Inertia.
Let's hear what Taylor had to say about the choice: "I like both Livewire and Inertia. While building Jetstream, I was so torn which one to choose, that I just decided to include them both. It felt pretty risky because I had to take on to maintain two sets of front-end, but I felt those are both great projects, made by Laravel community members."
And, even when I did a poll on my Twitter with 1,854 votes, Livewire and Inertia got the same audience: 39% each, with 21% opted for "Both, depends on project".
So, the ultimate answer to the question "Livewire or Inertia" is that it's your personal choice. Mostly, it depends on your experience with Vue/React. If it's none/minimal, then Livewire is your friend.
