Trasy renderowania z wyprzedzeniem z przyspieszeniem reakcji

Nie korzystasz z renderowania po stronie serwera, ale nadal chcesz przyspieszyć działanie swojej strony React? Wypróbuj renderowanie wstępne.

Houssein Djirdeh

react-snap to biblioteka firmy zewnętrznej, która wstępnie renderuje strony w witrynie w postaci statycznych plików HTML. Może to skrócić czas pierwszego wyrenderowania w aplikacji.

Oto porównanie tej samej aplikacji z renderowaniem wstępnym i bez niego z użyciem symulowanego połączenia 3G i urządzenia mobilnego:

Uwaga: react-snap nie jest jedyną biblioteką, która może wstępnie renderować statyczne treści HTML na potrzeby aplikacji React. Alternatywną opcją jest react-snapshot.

Dlaczego to takie przydatne?

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

Aby rozwiązać ten problem, wielu programistów ustawia aplikację na serwerze, zamiast uruchamiać ją tylko w przeglądarce. Przy każdym przejściu między stronami/trasą cały kod HTML jest generowany na serwerze i wysyłany do przeglądarki, co skraca czas pierwszego wyrenderowania, ale wiąże się z wolniejszym czasem do pierwszego bajtu.

Renderowanie wstępne to odrębna technika, która jest mniej złożona niż renderowanie przez serwer, ale także pozwala skrócić czas pierwszego renderowania w aplikacji. Przeglądarka bez interfejsu graficznego lub przeglądarka bez interfejsu użytkownika służy do generowania statycznych plików HTML każdej trasy w czasie kompilacji. Pliki te mogą być następnie wysyłane wraz z pakietami JavaScript potrzebnymi aplikacji.

warcaby zareagować

react-snap używa narzędzia Puppeteer do tworzenia wstępnie renderowanych plików HTML z różnymi trasami w aplikacji. Na początek zainstaluj ją jako zależność programistyczną:

npm install --save-dev react-snap

Następnie dodaj skrypt postbuild w tabeli package.json:

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

Spowoduje to automatyczne uruchamianie polecenia react-snap za każdym razem, gdy zostanie utworzona nowa kompilacja aplikacji (npm build).

Uwaga: npm obsługuje polecenia pre i post w przypadku skryptów głównych i dowolnych, które zawsze będą uruchamiane bezpośrednio przed oryginalnym skryptem lub po nim. Więcej informacji znajdziesz w dokumentacji npm.

Ostatnią czynnością, jaką 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życia metody ReactDOM.render tylko do renderowania głównego elementu React bezpośrednio w DOM, narzędzie sprawdza, czy istnieją już węzły podrzędne, aby ustalić, czy zawartość HTML została wstępnie wyrenderowana (lub wyrenderowana na serwerze). W takim przypadku zamiast tworzyć go od nowa, używany jest ReactDOM.hydrate, aby dołączać detektory zdarzeń do już utworzonego kodu HTML.

Stworzenie aplikacji spowoduje teraz wygenerowanie statycznych plików HTML jako ładunków dla każdej zindeksowanej trasy. Aby zobaczyć, jak wygląda ładunek HTML, kliknij adres URL żądania HTML, a następnie kliknij kartę Podgląd w Narzędziach deweloperskich w Chrome.

Uwaga: react-snap może być używany z innymi platformami niż React! Obejmuje to Vue i Preact. Więcej instrukcji na ten temat znajdziesz w artykule README (react-snap).

Flash z treściami bez określonego stylu

Mimo że statyczny kod HTML jest obecnie renderowany niemal natychmiast, nadal domyślnie pozostaje niezmieniony, co może powodować problem z wyświetlaniem „flash of unstyled content” (FOUC). Jest to szczególnie zauważalne w przypadku korzystania z biblioteki CSS-in-JS do generowania selektorów, ponieważ zanim można będzie zastosować style, trzeba zakończyć wykonywanie pakietu JavaScript.

Aby temu zapobiec, kod CSS krytyczny, czyli minimalną ilość kodu CSS wymaganą do renderowania strony początkowej, możesz wstawić bezpośrednio w kodzie <head> dokumentu HTML. react-snap korzysta z dodatkowej biblioteki zewnętrznej – minimalcss, by wyodrębniać wszystkie kluczowe elementy CSS dla różnych tras. Możesz ją włączyć, określając te elementy w pliku package.json:

"reactSnap": {
  "inlineCss": true
}

Przyjrzyjmy się teraz podglądowi odpowiedzi w Narzędziach deweloperskich w Chrome, a zobaczysz stronę ze stylem, w której znajdują się kluczowe elementy CSS.

Uwaga: opcja inlineCSS jest nadal w fazie eksperymentalnej. Upewnij się, że style są prawidłowo stosowane do Twoich tras.

Podsumowanie

Jeśli w swojej aplikacji nie używasz tras renderowania po stronie serwera, użyj react-snap do wstępnego renderowania statycznego kodu HTML użytkownikom.

1. Zainstaluj ją jako zależność programistyczną i zacznij od ustawień domyślnych.
2. Użyj eksperymentalnej opcji inlineCss, która pozwala wbudować w najważniejszy element CSS, jeśli sprawdza się w Twojej witrynie.
3. Jeśli używasz podziału kodu na poziomie komponentu w ramach dowolnej trasy, zachowaj ostrożność, aby nie renderować wstępnie użytkownikom stanu wczytywania. Więcej informacji na ten temat znajdziesz w react-snap README.