Zapisywanie motywu i zapobieganie migotaniu

Podczas ładowania strony React musi pobrać, sparsować i wykonać JavaScript, zanim będzie mógł odczytać localStorage i zastosować właściwy motyw. W tym czasie przeglądarka renderuje stronę z użyciem stylów domyślnych. Jeśli użytkownik preferuje tryb ciemny, a motywem domyślnym jest jasny, przed skorygowaniem motywu zobaczy krótkie białe mignięcie.

Rozwiązaniem jest osadzony skrypt umieszczony w document head, który działa synchronicznie przed wykonaniem jakiegokolwiek innego kodu. Skrypt natychmiast odczytuje localStorage i ustawia data-theme na document.documentElement. Ponieważ jest skryptem blokującym, przeglądarka ustawia atrybut przed wyświetleniem jakiejkolwiek treści.

Skrypty asynchroniczne lub odroczone są uruchamiane po sparsowaniu kodu HTML, a potencjalnie także po pierwszym wyświetleniu strony. Niweczy to cały cel tego rozwiązania. Blokujący skrypt osadzony bezpośrednio w dokumencie nie może mieć atrybutów async ani defer i nie może być ładowany z zewnętrznego pliku. Skrypt musi być bardzo mały, aby ograniczyć koszt wydajnościowy.

Skrypt blokujący jest minimalny: odczytuje localStorage.getItem('theme'), sprawdza window.matchMedia('(prefers-color-scheme: dark)').matches jako rozwiązanie zastępcze, a następnie wywołuje document.documentElement.setAttribute('data-theme', theme). Należy opakować go w try-catch na wypadek, gdyby localStorage był niedostępny w trybie prywatnym.

W Next.js należy użyć komponentu Script z next/script z ustawieniem strategy="beforeInteractive" w pliku _document.js. Strategia beforeInteractive wstrzykuje skrypt do kodu HTML strony przed uruchomieniem jakiegokolwiek JavaScriptu strony, zapewniając takie samo blokujące działanie w procesie budowania Next.js.

W projekcie Vite lub Create React App należy bezpośrednio edytować plik index.html i umieścić znacznik osadzonego skryptu w sekcji head, przed innymi skryptami. Ponieważ index.html jest punktem wejścia przeglądarki, skrypt uruchamia się przed uruchomieniem Reacta. Należy zadbać o zwięzłość skryptu, aby jego rozmiar nie przekraczał 100 bajtów.

W aplikacji renderowanej po stronie serwera serwer może odczytać motyw z pliku cookie przesłanego wraz z żądaniem. Następnie serwer ustawia data-theme w wygenerowanym kodzie HTML przed wysłaniem go do przeglądarki. Eliminuje to całkowicie mignięcie po stronie klienta, ponieważ właściwy motyw znajduje się już w pierwszym bajcie kodu HTML.

Kompletny przebieg wygląda następująco: przeglądarka pobiera kod HTML, parser napotyka blokujący skrypt osadzony bezpośrednio w dokumencie, skrypt odczytuje localStorage i ustawia data-theme, parser kontynuuje pracę, strona jest wyświetlana z właściwym motywem, a React przeprowadza hydratację i odczytuje ten sam motyw z localStorage. Użytkownik od samego początku widzi jeden spójny motyw.

Aby sprawdzić, czy rozwiązanie działa, należy otworzyć Chrome DevTools, przejść do karty Network i ustawić ograniczenie sieci na Slow 3G. Następnie należy przeładować stronę. Jeśli podczas ładowania widoczna jest zmiana motywu, mignięcie nie zostało usunięte. Po dodaniu skryptu blokującego pierwsze wyświetlenie powinno już przedstawiać właściwy motyw, nawet przy wolnym połączeniu.

Jeśli początkowy stan Reacta ma domyślnie wartość jasną, ale skrypt blokujący ustawił przed hydratacją wartość ciemną, React może zgłosić ostrzeżenie o niezgodności podczas hydratacji. Należy temu zapobiec, inicjalizując stan motywu Reacta również przez odczyt localStorage podczas pierwszego renderowania, aby kod HTML wygenerowany przez Reacta odpowiadał stanowi DOM ustawionemu przez skrypt blokujący.

Storybook i środowiska testowe nie wczytują pliku index.html, więc skrypt blokujący nigdy się w nich nie uruchamia. Należy udostępnić dekorator lub konfigurację testów, która ustawia domyślny atrybut data-theme w tych środowiskach. Zapobiega to mylącym niespójnościom wizualnym podczas tworzenia komponentów w izolacji.

Jakiego rodzaju skryptu należy użyć w sekcji head dokumentu, aby zapobiec mignięciu niewłaściwego motywu?

Mignięciu niewłaściwego motywu należy zapobiegać przez wstrzyknięcie niewielkiego, blokującego skryptu osadzonego bezpośrednio w sekcji head dokumentu. Skrypt odczytuje localStorage i ustawia data-theme przed pierwszym wyświetleniem strony. W Next.js należy użyć strategy="beforeInteractive", a w Vite/CRA dodać skrypt bezpośrednio do pliku index.html. Aplikacje SSR mogą odczytać cookie i ustawić motyw po stronie serwera.