Memahami Partial Hydration & Resumability: Qwik vs Astro Islands

Masalah Mendasar Hidrasi Tradisional

Dalam aplikasi Single Page Application (SPA) berbasis SSR klasik (seperti Next.js atau Nuxt standar), server mengirimkan dokumen HTML lengkap, namun browser kemudian harus mendownload ulang seluruh pustaka JavaScript untuk mencocokkan virtual DOM dan menempelkan kembali event listeners. Proses ini disebut Hydration.

Hidrasi adalah pemborosan ganda: server telah bekerja merender HTML, tetapi browser mengulang pekerjaan tersebut dari nol.

Solusi 1: Islands Architecture (Astro)

Astro memandang halaman web sebagai lautan HTML statis murni yang diselingi oleh pulau-pulau interaktif kecil (Islands).

---
import StaticHeader from './StaticHeader.astro';
import InteractiveCounter from './Counter.tsx';
---
<!-- 0 KB JavaScript -->
<StaticHeader />

<!-- Hanya komponen ini yang mendownload JS dan terhidrasi -->
<InteractiveCounter client:visible />

Solusi 2: Resumability (Qwik)

Qwik membawa paradigma ini lebih jauh dengan konsep Resumability. Qwik menserialisasi seluruh state aplikasi ke dalam atribut HTML di sisi server. Ketika browser menerima dokumen, tidak ada hidrasi sama sekali. Skrip hanya akan didownload tepat pada saat pengguna mengklik tombol terkait via global event delegation.

Kedua pendekatan ini membuktikan bahwa era mengirimkan seluruh bundle framework ke browser pengguna telah berakhir.