Apa yang Baru di Inertia.js 2.0

¶Intro

Inertia.js v2.0, yang direncanakan hadir paling cepat akhir Oktober ini, merupakan pembaruan terbesar dari versi sebelumnya. Dengan berbagai fitur terbaru yang mungkin belum pernah kita bayangkan sebelumnya, versi ini membawa perubahan signifikan pada inti framework. Penulisan ulang menyeluruh ini bertujuan untuk meningkatkan performa, stabilitas, dan fleksibilitas Inertia.js.

Ini merupakan sebuah evolusi dari versi sebelumnya, membawa perubahan signifikan pada core atau inti framework ini. Penulisan ulang menyeluruh ini bukan hanya sekadar pembaruan biasa, tetapi merupakan upaya mendasar untuk meningkatkan performa, stabilitas, dan fleksibilitas framework.

¶Async

Salah satu perubahan terbesar dalam Inertia 2.0 adalah penggunaan async request sebagai fondasi utamanya. Async request memungkinkan pengiriman dan penerimaan data antara frontend dan backend dilakukan tanpa mengganggu alur utama aplikasi. Ini berarti pengguna dapat terus berinteraksi dengan aplikasi tanpa menunggu respons dari server, sehingga menciptakan pengalaman yang lebih cepat dan responsif.

Dengan async request sebagai fondasi, Inertia 2.0 mampu menangani permintaan data secara lebih efisien, mempercepat waktu loading pada setiap halaman, dan memungkinkan pengelolaan data yang lebih kompleks dan dinamis. Data yang diambil dari server akan berjalan di belakang layar tanpa memengaruhi performa aplikasi, membuat aplikasi tetap responsif dan harusnya sangat cepat.

¶Polling

Kadang kita perlu melihat data secara realtime, seperti misalnya data pengunjung dari artikel, leaderboard dan banyak lagi. Dan untuk melakukan sangat mudah sekali tentunya, hanya perlu menggunakan hook dari inertia.js sendiri yaitu usePoll.

usePoll(3000) // 3s

Tidak cukup disitu, kita juga bisa menentukan data yang mana yang akan di fetch 3 detik sekali seperti:

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

¶When Visible

Ini sangat bermanfaat bagi kita yang menampilkan banyak data dalam satu halaman. Misalnya, kita memiliki tiga set data berbeda, dan user sedang melihat data pertama di browser-nya. Saat dia scroll ke bawah, data kedua akan dimuat secara otomatis hanya ketika mulai terlihat. Contoh lain dari mekanisme ini adalah fitur load more otomatis, yang dikenal sebagai infinite scroll.

export default function Page() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
        <Dashboard/>
    </Suspense>
  )
}

const Dashboard = () => {
  const { users } = useWhenVisible("users")


  return users.map((user) => <div key={user.id}>{user.name}</div>)
}

¶Infinite Scroll

Fitur ini adalah fitur yang tentu sangat kita nanti-nantikan, tentu kita bisa membuatnya sendiri namun ah sangat tidak luarbiasa rasanya karena sudah pasti tidak ssr, dengan fitur ini, maka semua akan ssr karena dibawa oleh inertia nya langsung.

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

¶Prefetching

Terkadang kita ingin mengambil data sebelum user mencapai halaman tersebut, seperti di dashboard yang menampilkan data berat. Dengan begitu, cache akan diterapkan selama 30 detik secara default.

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

Prefetch dibagi menjadi dua jenis: hover dan mount. Secara default, jika tidak ditentukan, hover akan digunakan. Namun, jika ingin menggunakan teknik mount, cukup masukkan namanya dalam properti prefetch seperti ini:

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

Kita juga bisa menentukan cache nya berapa lama.

{/* 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

Kadang kita perlu menampilkan halaman tanpa harus menunggu semua data di-fetch terlebih dahulu. Ini sangat berguna saat Anda menampilkan data beserta statistiknya, terutama di halaman dashboard utama.

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

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

¶Kesimpulan

Inertia.js 2.0 menghadirkan pembaruan besar dengan berbagai fitur baru, termasuk:

• Async Requests: Memungkinkan pengambilan data tanpa mengganggu alur aplikasi utama, meningkatkan kecepatan dan responsivitas.
• Polling: Memudahkan pengambilan data secara real-time dengan hook usePoll.
• When Visible: Mengoptimalkan pemuatan data dengan memuat data hanya saat mulai terlihat, mendukung infinite scroll.
• Prefetching: Mengambil data sebelum user mencapai halaman, dengan opsi cache yang dapat dikustomisasi.
• Defer: Menampilkan halaman tanpa menunggu semua data di-fetch terlebih dahulu, ideal untuk dashboard dengan statistik.

Semoga artikel ini bermanfaat dan sampai jumpa di artikel selanjutnya.