Livewire vs Inertiajs

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.

Setup of Livewire:

• Install the Livewire package via composer.
• Add 2 Blade directives into the main layout.

New Livewire component:

• Make Livewire component with Artisan
• Fill in the Livewire component class and its Blade with logic
• Call the Livewire component with @livewire or <livewire>
• Build a navigation/routing system between components

Inertiajs is as front-Ender’s Comfort Zone :

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.

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.js with createInertiaApp() method

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.

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.