Apa Saja Yang Baru di Inertia 2.0 ?

Pada Laracon US beberapa waktu yang lalu Taylor Otwell mengumumkan salah satu hal yang membuat saya cukup excited yakni tentang kabar rilisnya Inertia 2.0.

Awalnya Taylor Otwell mengira Inertia adalah sebuah "FInished Software", tetapi ketika dia terjun ke dalam developmentnya, ada beberapa hal yang bisa ditambahkan ke dalam Inertia.

Apa saja yang akan ditambahkan pada Inertia 2.0 ini? Berikut beberapa fitur yang akan ditambahkan pada Inertia 2.0 yang rencananya akan dirilis pada awal Oktober 2024 nanti (belum ada tanggal pastinya).

Async Request Inertia 2.0

Saat ini di Inertia 1.0 kita hanya bisa melakukan satu request pada satu waktu. Pada Inertia 2.0 nanti akan ada Async Request

• Non Blocking Request
• Tidak menampilkan loading indicator
• Semua request reload akan async secara default.

Bagaimana caranya? segampang menambahkan atribut async pada elemen link

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

Polling Inertia 2.0

Salah satu fitur yang saya suka di Livewire yang belum ada secara default di Inertia 1.0 adalah kemudahan untuk melakukan polling. Alhamdulillah di Inertia 2.0 nanti akan ada fitur ini secara bawaan. Polling berguna untuk real-time data seperti notifikasi, tanpa memerlukan WebSocket (Pusher, Reverb, Soketi, dll).

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

Komponen WhenVisible Inertia 2.0

Di Inertia 2.0 nantinya akan ada sebuah komponen baru WhenVisible yang akan membuat kita bisa load sebuah props ketika elemen tersebut terlihat pada halaman. Nah ini akan meningkatkan inisial response time karena kita akan load data ketika kita memang benar membutuhkannya.

Berikut kode untuk di Laravel menggunakan method option :

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

Untuk frontendnya menggunakan komponen baru bernama WhenVisible :

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

Infinite Scrolling Inertia 2.0

Ini adalah salah satu fitur fancy yang saya tunggu banget. Walaupun sekarang juga memungkinkan untuk membuat infinite scrolling di Inertia.

Tapi dibangun diatas komponen baru WhenVisible, kita sekarang bisa mengimplementasikan infinite scrolling dengan sangat mudah dengan Inertia. Ada sebuah method baru bernama Inertia::merge() yang akan menggabungkan data baru dengan data yang sudah ada sebelumnya.

Kode di Laravel :

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

Kode di bagian frontend:

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

Prefetch Inertia 2.0

Pada Inertia 2.0 nanti akan mendukung prefetching. Sangat berguna untuk halaman yang akan dikunjungi berikutnya, hal ini bisa dijalankan ketika hover atau saat mount. Kita juga bisa melalukan cache datanya untuk waktu tertentu. selain itu juga mendukung untuk Stale While Revalidate.

<template>
    <Link href="/profile" prefetch>Profile</Link>
 
    <Link href="/profile" prefetch cacheFor="10s">Profile</Link>
 
    <Link href="/profile" prefetch="mount">Profile</Link>
</template>

Deferred Props Inertia 2.0

Salah satu tambahan yang akan membuat Inertia 2.0 semakin keren adalah adanya deferred props, dimana kita bisa dengan singkat merender halaman dan memuat propsnya di background. Bisa juga membuat grup deferred props, jadi kita bisa menampilkan beberapa data ketika data lainnya masih dimuat.

Kode Laravelnya :

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

Pada bagian frontend :

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

Sekian beberapa fitur yang akan ada pada Inertia 2.0. Saya pribadi sangat menantikan rilis ini, karena akan sangat memudahkan proses development dengan Inertia kedepannya.