Apa Itu Hydration

Hydration adalah proses ketika app Angular di sisi klien menggunakan kembali HTML yang dirender server, lalu memasang listener peristiwa dan status ke DOM yang sudah ada, alih-alih membuangnya dan merender ulang.

SSR lama menggunakan hydration destruktif: klien menghapus DOM dari server dan merender ulang dari awal. Hal ini menyebabkan kilatan yang terlihat dan menghapus hasil kerja server.

Angular modern melakukan hydration nondestruktif: Angular menelusuri DOM yang sudah ada, mencocokkannya dengan pohon komponen, lalu menggunakan kembali node tersebut. Tidak ada kilatan, pekerjaan lebih sedikit, dan performa lebih baik.

Menggunakan kembali HTML server berarti konten terbesar tetap tampil, sehingga membantu LCP, dan mencegah pergeseran tata letak akibat rendering ulang, sehingga membantu CLS. App menjadi interaktif tanpa perlu menggambar ulang.

Tahap pertama: server merender HTML dan mengirimkannya. Tahap kedua: browser mengunduh JS, menjalankan Angular, lalu melakukan hydration pada markup yang sudah ada agar menjadi interaktif.

Hydration mengasumsikan bahwa pohon komponen klien menghasilkan struktur yang sama dengan yang dihasilkan server. Jika keduanya berbeda, Angular melaporkan ketidakcocokan hydration.

Manipulasi DOM langsung, percabangan khusus browser yang mengubah markup, struktur HTML bertingkat yang tidak valid, dan konten nondeterministik (seperti Math.random() atau Date.now() dalam templat) menyebabkan ketidakcocokan.

Jangan memanipulasi DOM secara imperatif (misalnya dengan innerHTML di luar Angular) selama SSR. Biarkan Angular mengelola DOM agar klien dan server tetap selaras.

Untuk komponen yang benar-benar tidak dapat menjalani hydration (seperti widget pihak ketiga yang mengubah DOM), kecualikan komponen tersebut dengan ngSkipHydration; Angular akan merender ulang hanya subtree tersebut.

Hydrasi hanya berlaku jika terdapat HTML yang dirender di server untuk digunakan kembali. Aplikasi CSR murni tidak memiliki apa pun untuk dihidrasi; hidrasi adalah bagian sisi klien dari SSR.

Hydrasi dapat bersifat penuh (seluruh aplikasi dihidrasi saat dimuat) atau inkremental (bagian-bagian dihidrasi sesuai permintaan). Memilih strategi yang tepat adalah kunci performa dan akan dibahas dalam pelajaran berikutnya.

Periksa pemahaman Anda tentang hidrasi.

Hidrasi menggunakan kembali HTML dari server di klien tanpa merusaknya, sehingga meningkatkan LCP dan CLS. Ketidakcocokan dapat muncul akibat pengeditan DOM secara manual atau markup yang tidak deterministik; gunakan ngSkipHydration sebagai jalan keluar. Hidrasi adalah bagian sisi klien dari SSR.