Menyimpan Tema dan Mencegah Kilatan

Saat halaman dimuat, React harus mengunduh, mengurai, dan menjalankan JavaScript sebelum dapat membaca localStorage dan menerapkan tema yang benar. Selama jeda ini, peramban menampilkan gaya bawaan. Jika pengguna memilih mode gelap tetapi nilai bawaan Anda adalah terang, mereka akan melihat kilatan putih singkat sebelum tema diperbaiki.

Solusinya adalah skrip sebaris di dalam document head yang berjalan secara sinkron sebelum kode lain. Skrip ini segera membaca localStorage dan menetapkan data-theme pada document.documentElement. Karena merupakan skrip pemblokir, peramban menerapkan atribut tersebut sebelum menampilkan konten apa pun.

Skrip asinkron atau yang ditunda berjalan setelah HTML diurai dan mungkin setelah tampilan pertama. Hal itu menggagalkan seluruh tujuan teknik ini. Skrip sebaris pemblokir tidak boleh memiliki atribut async atau defer, dan tidak boleh dimuat dari berkas eksternal. Skrip tersebut harus sangat kecil untuk meminimalkan biaya kinerja.

Skrip pemblokir ini bersifat minimal: baca localStorage.getItem('theme'), periksa window.matchMedia('(prefers-color-scheme: dark)').matches sebagai cadangan, lalu panggil document.documentElement.setAttribute('data-theme', theme). Bungkus dengan penanganan kesalahan jika localStorage tidak tersedia saat penelusuran privat.

Di Next.js, gunakan komponen Script dari next/script dengan strategy="beforeInteractive" di dalam _document.js. Strategi beforeInteractive menyisipkan skrip ke dalam HTML halaman sebelum JavaScript halaman apa pun berjalan, sehingga menghasilkan perilaku pemblokiran yang sama dalam alur pembangunan Next.js.

Dalam proyek Vite atau Create React App, ubah index.html secara langsung dan letakkan tag skrip sebaris di dalam head sebelum skrip lainnya. Karena index.html merupakan titik masuk peramban, skrip berjalan sebelum React dimulai. Buat skrip tetap ringkas agar ukurannya di bawah 100 byte.

Dalam aplikasi yang dirender di server, server dapat membaca tema dari kuki yang dikirim bersama permintaan. Server kemudian menetapkan data-theme di dalam HTML yang dirender sebelum mengirimkannya ke peramban. Cara ini sepenuhnya menghindari kilatan di sisi klien karena tema yang benar sudah ada pada byte pertama HTML.

Alur lengkapnya adalah: peramban mengunduh HTML, pengurai menemukan skrip sebaris pemblokir, skrip membaca localStorage dan menetapkan data-theme, penguraian berlanjut, halaman ditampilkan dengan tema yang benar, lalu React melakukan hidrasi dan mengambil tema yang sama dari localStorage. Pengguna melihat satu tema yang konsisten sejak awal.

Untuk memverifikasi bahwa perbaikan ini berhasil, buka Chrome DevTools, buka tab Jaringan, lalu batasi kecepatan ke 3G Lambat. Muat ulang halaman. Jika Anda melihat perubahan tema selama pemuatan, kilatan tersebut belum teratasi. Dengan skrip pemblokir, tampilan awal seharusnya sudah menunjukkan tema yang benar bahkan pada koneksi lambat.

Jika status awal React ditetapkan ke terang tetapi skrip pemblokir menetapkan tema gelap sebelum hidrasi, React mungkin memperingatkan adanya ketidakcocokan hidrasi. Hindari hal ini dengan menginisialisasi status tema React sambil membaca localStorage selama perenderan awal, sehingga HTML yang dirender React cocok dengan status DOM yang ditetapkan oleh skrip pemblokir.

Storybook dan lingkungan pengujian tidak memuat index.html, sehingga skrip pemblokir tidak pernah berjalan. Sediakan dekorator atau penyiapan pengujian yang menerapkan atribut data-theme bawaan di lingkungan tersebut. Cara ini mencegah ketidakkonsistenan visual yang membingungkan saat mengembangkan komponen secara terisolasi.

Cegah kilatan tema yang salah dengan menyisipkan skrip sebaris pemblokir berukuran kecil di dalam document head yang membaca localStorage dan menetapkan data-theme sebelum tampilan apa pun. Di Next.js, gunakan strategy="beforeInteractive"; di Vite atau CRA, tambahkan skrip langsung ke index.html. Aplikasi SSR dapat membaca kuki untuk menetapkan tema di sisi server.