Angular Academy · Pelajaran

Mengaktifkan Hydration Penuh

Aktifkan hydration agar tidak perlu melakukan render ulang.

Mengaktifkan Hydration Penuh adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Mengaktifkan Hidrasi

Hidrasi penuh diaktifkan dengan menambahkan provideClientHydration() ke penyedia aplikasi Anda. Skema ng add @angular/ssr menambahkannya untuk Anda.

import { provideClientHydration } from '@angular/platform-browser';

export const appConfig = {
  providers: [provideClientHydration()]
};

Lokasinya

Letakkan ini di penyedia appConfig browser, yaitu konfigurasi yang sama yang digunakan untuk menjalankan klien. Konfigurasi server menambahkan konfigurasinya di atas dengan provideServerRendering().

Arti Penuh

Hidrasi penuh (eager) menghidrasi seluruh pohon komponen segera setelah JavaScript dimuat dan Angular dijalankan. Setiap komponen langsung menjadi interaktif.

Pemutaran Ulang Peristiwa

Aktifkan withEventReplay() agar interaksi pengguna yang terjadi sebelum hidrasi selesai ditangkap dan diputar ulang setelahnya, sehingga klik tidak hilang pada perangkat yang lambat.

import { provideClientHydration, withEventReplay } from '@angular/platform-browser';

providers: [provideClientHydration(withEventReplay())]

Tembolok Transfer HTTP

Saat hidrasi aktif, respons GET dari server melalui HttpClient secara bawaan disimpan ke dalam TransferState, sehingga klien tidak mengambil ulang data yang sama setelah dijalankan.

provideClientHydration(withHttpTransferCacheOptions({ filter: r => r.method === 'GET' }))

Memverifikasi Hidrasi

Buka konsol dalam mode pengembangan. Angular mencatat statistik hidrasi (komponen yang dihidrasi, simpul yang digunakan kembali). Jika tidak ada peringatan ketidakcocokan, berarti hidrasi berhasil dengan baik.

// Angular hydrated 24 component(s) and 187 node(s)

Memperbaiki Ketidakcocokan

Jika Anda melihat kesalahan ketidakcocokan NG0500, cari templat yang tidak deterministik atau pengeditan DOM secara manual. Buat markup yang deterministik agar keluaran server dan klien sesuai.

Lindungi API Browser

Kode yang menyentuh window atau localStorage selama penyajian awal dapat mengubah markup antara server dan klien. Lindungi dengan isPlatformBrowser atau jalankan setelah inisialisasi tampilan.

if (isPlatformBrowser(this.platformId)) {
  this.width = window.innerWidth;
}

Konsekuensi Hidrasi Penuh

Hidrasi penuh sederhana, tetapi mengunduh dan menjalankan semua JavaScript komponen sejak awal. Untuk aplikasi besar, hal ini dapat menunda interaktivitas, dan hidrasi inkremental mengatasinya.

i18n dan Hidrasi

Hidrasi berfungsi dengan i18n Angular, tetapi pastikan konten terjemahan bersifat deterministik. Lokal yang berbeda antara server dan klien menyebabkan kesalahan hidrasi.

Pemeriksaan Produksi

Sebelum dirilis, buat build untuk produksi, sajikan keluaran SSR, lalu pastikan melalui jaringan dan konsol bahwa hidrasi berjalan tanpa ketidakcocokan dan tembolok transfer mencegah pengambilan data ganda.

Pemeriksaan Singkat

Periksa pemahaman Anda tentang hidrasi penuh.

Rangkuman

Anda mengaktifkan hidrasi penuh dengan provideClientHydration(), menambahkan withEventReplay() untuk klik sebelum hidrasi, memanfaatkan tembolok transfer HTTP, melindungi API browser, dan memverifikasi hidrasi yang bersih. Hidrasi penuh sederhana, tetapi memuat semua JS sejak awal.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengaktifkan Hydration Penuh” gratis?

Ya — teks lengkap “Mengaktifkan Hydration Penuh” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mengaktifkan Hydration Penuh”?

Aktifkan hydration agar tidak perlu melakukan render ulang. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Mengaktifkan Hydration Penuh” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy