DEV Community

SSOJet profile image Abhishek Dave
Abhishek Dave for SSOJet

Posted on • Originally published at ssojet.com

Inertia 2.0: New Features and Asynchronous Request Support

Originally published at https://ssojet.com/blog/news-2025-03-inertia-2-asynchronous-requests

Asynchronous Requests

Inertia 2.0 introduces asynchronous requests that allow for non-blocking operations, improving application responsiveness. This allows multiple requests to be processed concurrently, enabling features like lazy loading and infinite scrolling. Inertia requests now default to being asynchronous, eliminating the need for progress indicators.

Developers can implement async requests simply:

<template>
  <Link
    method="put"
    :href="`/settings/notifications/${channel}`"
    :data="{ enabled: !enabled }"
    async
  >
  </Link>
</template>
Enter fullscreen mode Exit fullscreen mode

For more details on asynchronous requests, check the Inertia documentation.

Polling

Polling is significantly simplified in Inertia 2.0 with the introduction of the usePoll helper. This feature allows developers to automatically fetch data at specified intervals, making it ideal for live updates, such as refreshing statistics or new messages in applications.

Automatic polling can be set up as follows:

usePoll(3000, { only: ['leaderboard'] })
Enter fullscreen mode Exit fullscreen mode

Manual control is also an option:

const { stop, start } = usePoll(3000, { only: ['leaderboard'] }, { autoStart: false })
Enter fullscreen mode Exit fullscreen mode

For further information about polling in Inertia, see the official guide.

WhenVisible Component

The WhenVisible component leverages the Intersection Observer API to load props only when elements enter the viewport. This optimizes performance by deferring data loading, which can improve page load times, especially for content-rich applications.

Example usage:

<template>
  <WhenVisible data="users">
    <template #fallback>
      <div>Loading users...</div>
    </template>
    <div v-for="user in users" :key="user.id">
      {{ user.name }}
    </div>
  </WhenVisible>
</template>
Enter fullscreen mode Exit fullscreen mode

For additional details, visit the Inertia documentation on WhenVisible.

Infinite Scrolling

Infinite scrolling is now easily implemented in Inertia 2.0, enhancing user engagement and reducing load times. This feature allows for seamless browsing through large datasets without manual pagination.

Backend configuration example:

inertia('feed', [
    'items' => Inertia::merge(function () {
        return Post::paginate();
    }),
]);
Enter fullscreen mode Exit fullscreen mode

Frontend usage with the WhenVisible component:

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

For more insights on implementing infinite scrolling, refer to the Inertia documentation.

Prefetching

Prefetching enhances user experience by loading pages in the background, reducing navigation wait times. The built-in Link component supports prefetching on page load or link hover.

Example of using prefetching:

<template>
  <Link href="/" prefetch>Home</Link>
  <Link href="/" prefetch="mount">Home</Link>
</template>
Enter fullscreen mode Exit fullscreen mode

For customization, developers can control cache settings:

<Link href="/photos" prefetch cacheFor="10s">Photos</Link>
Enter fullscreen mode Exit fullscreen mode

Details can be found in the Inertia documentation on prefetching.

Deferred Props

Deferred props allow for loading data in the background after the initial page render. This concept aims to improve load times by handling non-critical data asynchronously.

To define deferred props:

inertia('dashboard', [
    'user_count' => Inertia::defer(fn () => User::count()),
    'order_count' => Inertia::defer(fn () => Order::count()),
]);
Enter fullscreen mode Exit fullscreen mode

On the frontend, use the Deferred component to manage loading states:

<template>
  <Deferred data="user_count">
    <template #fallback>
      <div>Loading...</div>
    </template>
    <div>Total users: {{ user_count }}</div>
  </Deferred>
</template>
Enter fullscreen mode Exit fullscreen mode

For more on deferred props, visit the Inertia documentation.

SSOJet Integration

For enterprise clients seeking streamlined user management and secure authentication solutions, SSOJet offers an API-first platform featuring directory sync, SAML, OIDC, and magic link authentication. SSOJet ensures that your applications can leverage advanced security protocols like single sign-on (SSO) and multi-factor authentication (MFA). Explore our services at SSOJet and see how we can enhance your user management capabilities.

Top comments (0)