Trasy renderowania z wyprzedzeniem z przyspieszeniem reakcji

Nie używasz renderowania po stronie serwera, ale mimo to chcesz zwiększyć wydajność swojej strony React? Wypróbuj renderowanie wstępne

Houssein Djirdeh

react-snap jest usługą zewnętrzną która wstępnie renderuje strony witryny na statyczne pliki HTML. Może to spowodować poprawić Pierwsze renderowanie razy w aplikacji.

Oto porównanie tej samej aplikacji z renderowaniem wstępnym i bez renderowania wczytane przy symulowanym połączeniu 3G i na urządzeniu mobilnym:

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

Dlaczego to jest przydatne?

Głównym problemem związanym z wydajnością w przypadku dużych, jednostronicowych aplikacji jest to, użytkownik musi poczekać na zakończenie działania pakietów JavaScript tworzących witrynę przed pobraniem ich. Im większe pakiety, użytkownik będzie musiał czekać.

Aby rozwiązać ten problem, wielu programistów stosuje renderowanie aplikacji na serwerze, a nie tylko w przeglądarce. Z każdą przejście między stroną/trasą, pełny kod HTML jest generowany na serwerze i wysyłany do przeglądarki, co skraca czas pierwszego renderowania, ale wiąże się z wolniejszym Czas do pierwszego bajtu.

Renderowanie wstępne to odrębna technika, która jest mniej skomplikowana niż serwer. renderowanie, ale też pozwala poprawić czas pierwszego wyrenderowania aplikacji. Używasz przeglądarki bez interfejsu graficznego lub przeglądarki bez interfejsu użytkownika. podczas tworzenia statycznych plików HTML każdej trasy. Te pliki mogą być wysyłane wraz z pakietami JavaScript, które są potrzebne aplikacji.

reakcja

react-snap używa aplikacji Puppeteer do: tworzenia wstępnie renderowanych plików HTML różnych tras w aplikacji. Do należy zainstalować go jako zależność deweloperską:

npm install --save-dev react-snap

Następnie dodaj skrypt postbuild w narzędziu package.json:

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

Powoduje to automatyczne uruchamianie polecenia react-snap przy każdej nowej kompilacji utworzone aplikacje (npm build).

Ostatnia rzecz, jaką musisz zrobić, to zmienić sposób 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ć samego elementu ReactDOM.render do renderowania głównego elementu React bezpośrednio do DOM, sprawdza, czy są już dostępne jakieś węzły podrzędne. co pozwala określić, czy treści HTML zostały wstępnie wyrenderowane (czy wyrenderowane na serwer). W takim przypadku do dołączenia wydarzenia zostanie użyta właściwość ReactDOM.hydrate detektorów istniejącego kodu HTML, zamiast tworzyć go od nowa.

Kompilacja aplikacji wygeneruje teraz statyczne pliki HTML jako ładunki dla dla każdej skanowanej trasy. Możesz zobaczyć, jak wygląda ładunek HTML Na przykład kliknij adres URL żądania HTML, a następnie kliknij przycisk Podglądy. w Narzędziach deweloperskich w Chrome.

Porównanie „przed” i „po”. Po zakończeniu ujęcia widać, że treść została wyrenderowana.

Flash z niesformatowanymi treściami

Chociaż statyczny kod HTML jest teraz renderowany niemal natychmiast, w dalszym ciągu pozostaje domyślnie bez stylu, co może powodować problem z wyświetlaniem „błyskawicznego” stylu treści (FOUC). Może to być szczególnie zauważalne, jeśli używasz arkusza CSS-in-JS w celu wygenerowania selektorów, bo pakiet JavaScript będzie musiał musi być wykonywana przed zastosowaniem stylów.

Aby temu zapobiec, zastosuj krytyczny kod CSS lub jego minimalną ilość wymagane do renderowania strony początkowej, może być wbudowana bezpośrednio w <head> dokumentu HTML. react-snap używa innej biblioteki zewnętrznej objętej okap, minimalcss, aby wyodrębnić o znaczeniu krytycznym dla różnych tras. Aby włączyć tę funkcję, podaj następujące elementy w pliku package.json:

"reactSnap": {
  "inlineCss": true
}

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

Porównanie „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 funkcji react-snap, aby wstępnie wyrenderować statyczny kod HTML użytkownikom.

  1. Zainstaluj ją jako zależność deweloperską i zacznij od ustawienia domyślnego ustawieniach.
  2. Użyj eksperymentalnej opcji inlineCss, aby wbudować krytyczny kod CSS, jeśli działa dla Twojej witryny.
  3. Jeśli korzystasz z podziału kodu na poziomie komponentu w obrębie tras, zastosuj uważaj, aby nie renderować wstępnie stanu wczytywania użytkownikom. react-snap README omawiamy tę kwestię bardziej szczegółowo.