Trasy renderowania z wyprzedzeniem z przyspieszeniem reakcji

Nie korzystasz z renderowania po stronie serwera, ale i tak chcesz przyspieszyć działanie witryny opartej na React? Wypróbuj renderowanie wstępne.

Houssein Djirdeh

react-snap to zewnętrzna biblioteka, która wstępnie renderuje strony w Twojej witrynie do statycznych plików HTML. Może to poprawić czas pierwszego renderowania w aplikacji.

Oto porównanie tej samej aplikacji z wykorzystaniem prerenderowania i bez niego na urządzeniu mobilnym z symulowanym połączeniem 3G:

Porównanie wczytywania. Wersja wykorzystująca renderowanie wstępne wczytuje się o 4,2 sekundy szybciej.

Dlaczego to jest przydatne?

Głównym problemem z wydajnością w przypadku dużych aplikacji jednostronicowych jest to, że użytkownik musi czekać na zakończenie pobierania pakietów JavaScript, które składają się na stronę, zanim będzie mógł zobaczyć prawdziwą treść. Im większe pakiety, tym dłużej użytkownik będzie musiał czekać.

Aby rozwiązać ten problem, wielu deweloperów stosuje renderowanie aplikacji na serwerze zamiast uruchamiania jej tylko w przeglądarce. Przy każdym przejściu na inną stronę lub trasę na serwerze generowany jest pełny kod HTML, który jest wysyłany do przeglądarki. Dzięki temu czas do pierwszego wyświetlenia jest krótszy, ale czas do pierwszego bajta jest dłuższy.

Przedrenderowanie to osobna technika, która jest mniej złożona niż renderowanie na serwerze, ale również pozwala poprawić czasy pierwszego wyrenderowania w aplikacji. Do generowania statycznych plików HTML każdej trasy w czasie kompilacji używana jest przeglądarka bez interfejsu graficznego lub przeglądarka bez interfejsu użytkownika. Następnie można je wysłać wraz z pakietami JavaScript potrzebnymi do działania aplikacji.

react-snap

react-snap używa Puppeteer do tworzenia wyrenderowanych wstępnie plików HTML różnych tras w aplikacji. Aby rozpocząć, zainstaluj go jako zależność programistyczną:

npm install --save-dev react-snap

Następnie dodaj skrypt postbuild do package.json:

"scripts": {
  //...
  "postbuild": "react-snap"
}

Polecenie react-snap będzie się automatycznie wykonywać za każdym razem, gdy utworzysz nową wersję aplikacji (npm build).

Ostatnią rzeczą, którą musisz zrobić, jest zmiana sposobu uruchamiania aplikacji. Zmień plik src/index.js na taki:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
const rootElement = document.getElementById("root");

if (rootElement.hasChildNodes()) {
  ReactDOM.hydrate(<App />, rootElement);
} else {
  ReactDOM.render(<App />, rootElement);
}

Zamiast używać tylko funkcji ReactDOM.render do renderowania elementu głównego React bezpośrednio w DOM, sprawdza, czy istnieją już jakieś węzły podrzędne, aby określić, czy zawartość HTML została wstępnie wyrenderowana (lub wyrenderowana na serwerze). W takim przypadku zamiast tworzenia nowego pliku HTML używasz tagu ReactDOM.hydrate, aby dołączyć do niego listenery zdarzeń.

Kompilacja aplikacji będzie teraz generować statyczne pliki HTML jako ładunki dla każdej skanowanej trasy. Aby sprawdzić, jak wygląda ładunek HTML, kliknij adres URL żądania HTML, a potem kliknij kartę Podglądy w Narzędziach deweloperskich w Chrome.

Porównanie stanu przed i po. Zdjęcie po pokazuje renderowane treści.

Flash z niesformatowanymi treściami

Chociaż statyczne strony HTML są teraz renderowane niemal natychmiast, nadal są domyślnie niestylizowane, co może powodować wyświetlanie „błysku niestylizowanego zawartości” (FOUC). Może to być szczególnie zauważalne, jeśli do generowania selektorów używasz biblioteki CSS-in-JS, ponieważ przed zastosowaniem stylów pakiet JavaScript musi się zakończyć wykonywaniem.

Aby temu zapobiec, krytyczny kod CSS lub minimalna ilość kodu CSS potrzebna do wyrenderowania pierwszej strony można umieścić bezpośrednio w kodzie <head> dokumentu HTML. react-snap używa innej biblioteki zewnętrznej (minimalcss), aby wyodrębnić dowolny kluczowy plik CSS dla różnych tras. Aby to zrobić, w pliku package.json podaj:

"reactSnap": {
  "inlineCss": true
}

Podgląd odpowiedzi w Narzędziach deweloperskich w Chrome pokazuje teraz stylizowaną stronę z wbudowanymi najważniejszymi elementami CSS.

Porównanie stanu przed i po. Ostatnie ujęcie pokazuje, że treść została wyrenderowana i ma określony styl z powodu wbudowanych krytycznych elementów CSS.

Podsumowanie

Jeśli w swojej aplikacji nie stosujesz tras renderowania po stronie serwera, użyj react-snap, aby wstępnie wyrenderować statyczny kod HTML użytkownikom.

  1. Zainstaluj go jako zależność programistyczną i zacznij od ustawień domyślnych.
  2. Użyj eksperymentalnej opcji inlineCss, aby wbudować krytyczny kod CSS, jeśli sprawdza się w Twojej witrynie.
  3. Jeśli używasz podziału kodu na poziomie komponentu w przypadku dowolnych tras, uważaj, aby nie renderować wstępnie stanu wczytywania dla użytkowników. Więcej szczegółów znajdziesz w react-snap README tym artykule.