Hydration Inkremental dengan @defer

Hidrasi penuh menjalankan setiap komponen sejak awal. Sebaliknya, hidrasi inkremental menghidrasi bagian halaman sesuai permintaan dan menunda JavaScript untuk bagian-bagian tersebut sampai diperlukan.

Hidrasi inkremental menggunakan blok @defer dengan pemicu khusus hydrate. Server tetap merender konten, tetapi klien hanya menghidrasinya saat pemicu aktif.

Aktifkan secara pilihan dengan withIncrementalHydration() di penyedia hidrasi. Ini membuka pemicu hydrate dalam templat.

Pemicu yang paling umum menghidrasi blok saat blok tersebut masuk ke dalam viewport. Konten di bawah lipatan tetap tidak aktif, sehingga pekerjaan JavaScript dihemat sampai pengguna mencapainya.

Lakukan hidrasi saat pengguna berinteraksi (klik, keydown) dengan blok tersebut. Ini ideal untuk widget yang terlihat tetapi jarang digunakan, seperti panel yang dapat diperluas.

Gunakan hydrate on idle untuk melakukan hidrasi saat browser tidak sibuk, atau hydrate on timer(2s) untuk melakukan hidrasi setelah jeda. Cocok untuk area yang tidak kritis.

hydrate never mempertahankan HTML hasil render server sebagai statis: HTML tersebut ditampilkan, tetapi JS untuk blok itu tidak pernah dikirim. Ideal untuk konten yang hanya bersifat presentasi dan tidak interaktif.

@defer biasa dalam konteks CSR menampilkan placeholder sampai dimuat. Dengan hidrasi inkremental, konten sudah dirender server dan terlihat; pemicu hanya mengatur kapan interaktivitas (hidrasi) dimulai.

Anda dapat menggabungkan pemicu agar sebuah blok dihidrasi berdasarkan peristiwa yang terjadi lebih dahulu, sehingga kesiapan dan penghematan sumber daya tetap seimbang.

Dengan menunda hidrasi komponen yang berat atau berada di bawah lipatan, JavaScript awal yang diperlukan untuk interaktivitas menjadi lebih sedikit, sehingga waktu hingga interaktif dan INP pada jalur kritis meningkat.

Hidrasi elemen interaktif di atas lipatan secara eager atau saat idle; tunda widget di bawah lipatan dan yang jarang digunakan hingga masuk viewport atau mengalami interaksi. Lakukan pengukuran untuk memastikan manfaatnya.

Anda menggunakan @defer (hydrate ...) dengan withIncrementalHydration() untuk melakukan hidrasi saat masuk viewport, berinteraksi, idle, berdasarkan pewaktu, atau tidak pernah. Hal ini mengurangi JS awal dan meningkatkan interaktivitas dengan menunda hidrasi blok di bawah lipatan dan yang jarang digunakan.