Halaman dapat terlihat benar sambil tetap menampilkan peringatan saat mulai berinteraksi. Pada aplikasi React yang dirender di server, salah satu hal yang perlu diperiksa adalah kesesuaian keluaran server dengan render pertama di browser.
Dua pekan lalu, saya menambahkan ID eksplisit pada komponen ikon ketika menangani peringatan generated ID di sisi server. Perubahannya hanya satu baris, tetapi ada dua kebutuhan yang perlu dibedakan: nilai yang konsisten pada render awal dan ID yang unik untuk setiap pemakaian.
Apa yang perlu selaras
Dokumentasi Next.js 13.4 menjelaskan hydration sebagai proses menghubungkan HTML hasil server dengan perilaku interaktif React di browser. Pohon hasil render awal keduanya perlu sesuai.
Sumber perbedaan dapat berupa susunan HTML yang tidak valid, penggunaan API khusus browser dalam logika render, atau perubahan HTML oleh pihak lain. Karena kemungkinan penyebabnya beragam, lokasi peringatan sebaiknya dipakai sebagai awal pemeriksaan, bukan langsung dianggap sebagai penyebab akhir.
Memisahkan gejala, dugaan, dan bukti
Tahap | Pertanyaan yang diperiksa |
Gejala | Bagian keluaran mana yang dilaporkan berbeda? |
Input | Apakah server dan browser menerima data awal yang sama? |
Proses render | Apakah hasilnya bergantung pada kondisi yang berbeda di dua lingkungan? |
Pembuktian | Apakah peringatan dapat direproduksi dan diuji kembali setelah perubahan? |
Sebagai prosedur umum, saya menyarankan memperkecil contoh sampai komponen yang relevan dapat diperiksa sendiri. Setelah itu, bandingkan data dan atribut yang dipakai pada render awal. Langkah ini membantu menjaga perubahan tetap berhubungan dengan gejala yang sedang dicari.
Mulailah dari komponen yang disebut dalam peringatan, lalu periksa input yang menentukan keluarannya. Hindari mengubah banyak bagian sekaligus karena hubungan antara perubahan dan hasilnya akan lebih sulit dinilai.
Perubahan pada komponen ikon
Pada perbaikan komponen ikon ini, saya menambahkan prop
id seperti berikut:return <Icon icon={`base:${icon}`} {...props} id={`icon-${icon}`} />Nilai ID sekarang ditentukan dari nama ikon. Dengan begitu, sumber nilainya terlihat langsung di komponen pembungkus, alih-alih dibiarkan tanpa nilai eksplisit dari komponen tersebut.
Penambahan ini perlu dinilai sesuai pemakaian komponennya. Memberikan ID eksplisit belum menjawab semua persoalan hydration, dan pola pembentukannya juga perlu diperiksa ketika ikon yang sama muncul lebih dari sekali.
Stabil belum tentu unik
Ada batas lain yang perlu diperhatikan pada contoh tadi. Jika dua instance memakai nama ikon yang sama, ekspresi
icon-${icon} menghasilkan string yang sama. Maka, pola itu tidak dapat dijadikan resep ID unik untuk semua penggunaan.Pengumuman React 18 memperkenalkan
useId untuk menghasilkan ID unik yang dapat digunakan bersama rendering server dan client, terutama pada library yang membutuhkan hubungan aksesibilitas. Penggunaannya tetap perlu disesuaikan dengan API library dan susunan komponen.Saya menyarankan memisahkan dua kebutuhan: nilai yang selaras antara server dan browser, serta identitas yang unik di antara beberapa instance. Memenuhi salah satunya belum otomatis memenuhi yang lain.
Memilih perbaikan pada sumber perbedaan
Dokumentasi Next.js versi tersebut memuat beberapa pendekatan: memastikan keluaran awal sama, memindahkan perilaku khusus browser ke effect, atau menonaktifkan prerendering pada komponen tertentu bila memang diperlukan.
Pilihannya mengikuti kebutuhan komponen. Misalnya, data dari penyimpanan browser tidak tersedia saat render server. Dalam kasus seperti itu, tampilan awal dapat dibuat sama, lalu diperbarui setelah browser siap.
Dokumentasi juga menyediakan
suppressHydrationWarning untuk perbedaan yang memang tak terhindarkan. Saya tidak menganggap hilangnya pesan peringatan sebagai bukti bahwa penyebabnya sudah diperbaiki; alasan penggunaan dan perilaku komponen tetap perlu diuji.Menutup penelusuran dengan pemeriksaan ulang
Mulailah dari pesan yang tepat, buat contoh terkecil, lalu cari nilai yang berbeda pada render awal. Setelah mengubahnya, periksa kembali halaman pada pemuatan awal dan penggunaan berulang.
Contoh ikon ini memperlihatkan bagaimana satu atribut dapat berada di pertemuan antara kode komponen, perilaku library, dan rendering server. Memahami hubungan itu membuat perbaikan lebih mudah dinilai daripada sekadar menghilangkan peringatan.