Taylor Otwell announces Inertia v2 at Laracon US 2024 - Here’s what’s new!

Taylor Otwell just announced some really cool new features in Inertia v2 at Laracon US 2024. Here's a quick overview of the new features that I wrote down during the talk. I will update this post with more details as soon as the official documentation is updated.

Async Requests in Inertia v2

Currently, in Inertia 1.0, you can only make one request at a time, such as navigating to a new page or refreshing a prop. However, now there are Async Requests in Inertia v2:

• Non-blocking Requests
• Doesn't show the loading indicator
• All reload requests are now async by default

How does it work? Simply add a async attribute to the Link element:

<template>
    <Link
        method="put"
        :href="`/async/links/${id}`"
        :data="{ checked: !checked }"
        async
    >
        <!-- ... -->
    </Link>
</template>

Polling in Inertia v2

In Inertia v2, you can now poll for data. This is useful for real-time data, such as a leaderboard, without the need for WebSockets (Pusher, Reverb, etc.).

// Automatic polling:
usePoll(3000, { only: ['stats'] })
 
// Manual polling:
const { stop, start } = usePoll(
    3000,
    { only: ['stats'] },
    { autoStart: false }
)

WhenVisible component in Inertia v2

Inertia.js 2.0 introduces a new WhenVisible component. This component allows you to load a prop when an element becomes visible on the page. This will greatly increase your initial response time as you can load the data when it is actually needed.

On the backend side:

Inertia::optional(function() {
    return User::all();
});

On the frontend side there is a new WhenVisible component:

<template>
    <WhenVisible data="users">
        <template #fallback>
            <div>Loading...</div>
        </template>
 
        <div v-for="user in users">
            ...
        </div>
    </WhenVisible>
</template>

Infinite Scrolling in Inertia v2

Building upon the new WhenVisible component, you can now implement infinite scrolling with Inertia. There's a new Inertia::merge() method that allows you to merge new data with the existing data.

On the backend side:

inertia('Photos', [
    'items' => Inertia::merge(function () {
        // Returns items that needs the be merged with the existing items
    }),
]);

On the frontend side:

<template>
    <WhenVisible
        :once="false"
        :params="{
            data: {
                page: page + 1,
            },
            only: ['items', 'page'],
            preserveUrl: false,
        }"
    >
        <Spinner />
    </WhenVisible>
</template>

Prefetching in Inertia v2

Inertia.js 2.0 now supports prefetching. This is useful for pages that are likely to be visited next. This can be done on hover or on mount. You can also cache the data for a certain amount of time. Additionally, there is support for Stale While Revalidate.

<template>
    <Link href="/photos" prefetch>Photos</Link>
 
    <Link href="/photos" prefetch cacheFor="10s">Photos</Link>
 
    <Link href="/photos" prefetch="mount">Photos</Link>
</template>

Defered Props in Inertia v2

Inertia.js 2.0 now supports deferred props! This way, you can immediately render the page and load the props in the background. It also supports grouped deferred props, so you can already show some data while other data is still loading.

On the backend side:

inertia('dashboard', [
    'user_count' => Inertia::defer(fn () => User::count()),
]);

On the frontend side:

<template>
    <Deferred data="user_count">
        <template #fallback>
            <div>Loading...</div>
        </template>
 
        <div>{{ user_count }}</div>
    </Deferred>
</template>

Availability

There's no official release date yet, but Taylor mentioned that they're aiming for a release in early October 2024. Based on the PRs, it looks like Inertia v2 requires Laravel 10+, PHP 8.1+, and it drops support for Vue 2.