What's New on Inertia.js 2.0

Intro

Inertia.js v2.0, planned to be released as early as the end of October, is the biggest update from the previous version. With various new features we may not have imagined before, this version brings significant changes to the framework’s core. This complete rewrite aims to improve Inertia.js’s performance, stability, and flexibility.

It is an evolution from the previous version, bringing significant changes to the core of the framework. This comprehensive rewrite is not just a regular update but a fundamental effort to enhance the performance, stability, and flexibility of the framework.

Async

One of the biggest changes in Inertia 2.0 is the use of async requests as its foundation. Async requests allow data transmission between the frontend and backend without disrupting the main flow of the application. This means users can continue interacting with the app without waiting for a response from the server, creating a faster and more responsive experience.

With async requests as the foundation, Inertia 2.0 is able to handle data requests more efficiently, speeding up the loading times on each page, and allowing more complex and dynamic data management. Data fetched from the server will run in the background without affecting app performance, keeping the app responsive and, ideally, very fast.

Polling

Sometimes we need to see data in real-time, like visitor stats for an article, leaderboards, and much more. And to do that is very easy, simply use the usePoll hook from Inertia.js:

usePoll(3000) // 3s

Not only that, but we can also specify which data to fetch every 3 seconds like this:

usePoll(3000, { only: ["visitors"] })

When Visible

This is very useful for displaying a lot of data on one page. For example, we have three different sets of data, and the user is currently viewing the first set in their browser. As they scroll down, the second set of data will load automatically once it becomes visible. Another example of this mechanism is the automatic load more feature, also known as infinite scroll.

export default function Page() {
  return (
    <Deferred data="permissions" fallback={<div>Loading...</div>}>
      {/* load data permissions */}
    </Deferred>
  )
}

Infinite Scroll

This is a feature we’ve long awaited. Of course, we could make it ourselves, but it wouldn't be amazing because it wouldn’t support SSR. With this feature, everything will be SSR since it is handled directly by Inertia.

export default function Page() {
  return (
    <WhenVisible
      always
      params={{
        data: {
          page: page + 1,
        },
        only: ['users', 'visitors'],
        preserveUrl: true,
      }}
    >
      {/* spinner / loading */}
    </WhenVisible>
  )
}

Prefetching

Sometimes we want to fetch data before the user reaches a certain page, such as on a dashboard displaying heavy data. This way, caching will be applied for 30 seconds by default.

<Link href='/users' prefetch>
  Users
</Link>

Prefetch is divided into two types: hover and mount. By default, if not specified, hover will be used. However, if you want to use the mount technique, simply specify it in the prefetch property like this:

<Link href='/users' prefetch="mount"/>

We can also set how long the cache lasts.

{/* state */}
<Link href='/users' prefetch cacheFor={['5s', '10s']}>
  Users
</Link>

{/* or custom */}
<Link href='/users' prefetch cacheFor={16_000}/>
<Link href='/users' prefetch cacheFor="2m"/>
<Link href='/users' prefetch cacheFor="7s"/>

Defer

Sometimes we need to display a page without waiting for all the data to be fetched first. This is especially useful when displaying data along with statistics, particularly on the main dashboard page.

<Deferred data={users_count} fallback={<>Loading...</>}>
  {/* fetching */}
</Deferred>

{/* multiple */}
<Deferred data={['users_count', 'orders_count']}/>

note Want to learn Inertia.js? You can check out the series Learning Inertia.js From Scratch

Conclusion

Inertia.js 2.0 brings major updates with various new features, including:

• Async Requests: Allows data fetching without disrupting the main app flow, enhancing speed and responsiveness.
• Polling: Makes it easier to fetch real-time data using the usePoll hook.
• When Visible: Optimizes data loading by loading data only when it becomes visible, supporting infinite scroll.
• Prefetching: Fetches data before the user reaches the page, with customizable cache options.
• Defer: Displays pages without waiting for all data to be fetched, ideal for dashboards with statistics.

I hope this article is useful, and see you in the next article.