Inertia 2 is awesome. And here is why!

As part of my day job I work as a frontend developer on the client portal of my company. Clients use this portal every day to check out statistics and perform curating tests. As you can imagine. It is crucial that this system works smooth so the user can perform their tasks.

Quite recently we made changes to the setup of the project. And you can guess it. The whole project became slower. Instead of an almost instant page load, we where now looking at 2+ seconds for smaller pages and even longer for our bigger pages. Whoopsie!

We of course needed to find a way to solve this. While we were thinking of a solution, I remembered that Inertia updated to a new version with a lot of features that can improve performance. And as Inertia already was part of our tech stack, I dove back into the documentation and I was very happy with what I found. So I decided to write about it.

Polling
With the new polling helper, they made a easy and simple way to poll your server for information.

import { usePoll } from '@inertiajs/vue3'

usePoll(2000)

The only thing you need to do is pass it the amount of milliseconds and you are good to go.

Prefetching
This one is a bit more interesting. This feature let's you prefetch data that is likely needed next. For example. The user is on a dashboard page. and hovers over a button that redirects the user to a detail page.

import { Link } from '@inertiajs/vue3'

<Link href="/details" prefetch="hover">Details</Link>

In this example the data for the /details page is getting fetched as soon as the user hovers over this element. Isn't that sick?! It can do way more thinks like fetching on mounted, click, and it excepts a :cacheFor="" which let's you manage how long the fetched data will be cached before it's deleted again.

Deferred props
Deferred Props are also very cool. They let you control which props are not immediately needed on page load. This makes the page load quicker, and these props are being loaded after the page is done rendering.

Route::get('/users', function () {
    return Inertia::render('Details/Index', [
        'statistics' => User::all(),
        'users' => Role::all(),
        'permissions' => Inertia::defer(fn () => Permission::all()),
    ]);
});

In the example above, 3 props are being passed to the page. statistics and users will be loaded during the initial page render. But the permissions will be loaded afterwards because the defer is used which tels Inertia that this prop can take it slow.

From a frontend perspective, I think that Inertia is a great tool to simplify routing. And with the new features they added it also became a great tool to improve UX.