Esegui il pre-rendering delle route con responsive-snap

Non hai il rendering lato server, ma vuoi comunque velocizzare le prestazioni del tuo sito React? Prova il pre-rendering.

Houssein Djirdeh

react-snap è una terza parte che esegue il prerendering delle pagine del tuo sito in file HTML statici. Questo può migliorare Prima colorazione volte nella tua applicazione.

Ecco un confronto della stessa applicazione con e senza pre-rendering su una connessione 3G simulata e su un dispositivo mobile:

Un confronto del caricamento affiancato. La versione che utilizza il pre-rendering viene caricata più velocemente di 4,2 secondi.

Perché è utile?

Il principale problema di prestazioni delle grandi applicazioni a pagina singola è che l'utente deve attendere la fine dei bundle JavaScript che compongono il sito scaricare prima di poter vedere contenuti reali. Più i pacchetti sono grandi, più a lungo l'utente dovrà attendere.

Per risolvere questo problema, molti sviluppatori adottano l'approccio di rendering dell'applicazione sul server invece di avviarlo solo sul browser. Con ogni pagina/percorso, il codice HTML completo viene generato sul server e inviato il browser, il che riduce i tempi di First Paint ma comporta un rallentamento Tempo per primo byte.

Il pre-rendering è una tecnica separata meno complessa del rendering ma offre anche un modo per migliorare i tempi di First Paint nel un'applicazione. Si utilizza un browser headless o senza interfaccia utente per generare file HTML statici di ogni route durante il tempo di creazione. Questi file possono essere spediti insieme ai bundle JavaScript necessari per un'applicazione.

reazione-snaps

react-snap usa Puppeteer per Creare file HTML prerenderizzati di diverse route nella tua applicazione. A per iniziare, installalo come dipendenza di sviluppo:

npm install --save-dev react-snap

Quindi aggiungi uno script postbuild in package.json:

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

Il comando react-snap veniva eseguito automaticamente ogni volta che una nuova build di le applicazioni effettuate (npm build).

L'ultima cosa da fare è modificare la modalità di avvio dell'applicazione. Modifica il file src/index.js come segue:

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);
}

Anziché utilizzare solo ReactDOM.render per il rendering dell'elemento React principale direttamente nel DOM, questo controlla se sono già presenti nodi figlio per stabilire se i contenuti HTML sono stati sottoposti a pre-rendering (o sottoposti a rendering server web). In questo caso, per allegare l'evento viene invece utilizzato ReactDOM.hydrate all'HTML già creato, invece di crearlo di nuovo.

Nello sviluppo dell'applicazione, ora verranno generati file HTML statici come payload per ogni percorso sottoposto a scansione. Puoi vedere come si presenta il payload HTML ad esempio facendo clic sull'URL della richiesta HTML e poi sul pulsante Anteprime in Chrome DevTools.

Un confronto prima e dopo. La ripresa successiva mostra il rendering dei contenuti.

Flash di contenuti senza stile

Anche se ora il codice HTML statico viene eseguito quasi immediatamente, rimane senza stile per impostazione predefinita, che potrebbe causare il problema della visualizzazione di un "lampo di stile senza stile" contenuti". (FOUC). Ciò può essere notato in particolare se utilizzi un file CSS-in-JS libreria per generare selettori poiché il bundle JavaScript dovrà terminare prima di poter applicare gli stili.

Per evitare questo problema, il CSS critico o la quantità minima di CSS richiesta necessari per la visualizzazione della pagina iniziale, possono essere incorporati direttamente nel tag <head> del documento HTML. react-snap utilizza un'altra raccolta di terze parti nel cappuccio, minimalcss, per estrarre CSS fondamentale per diverse route. Puoi attivare questa funzionalità specificando seguenti nel tuo file package.json:

"reactSnap": {
  "inlineCss": true
}

Se diamo un'occhiata all'anteprima della risposta in Chrome DevTools, ora viene visualizzata la pagina con stili applicati con CSS essenziali integrati.

Un confronto prima e dopo. La sequenza successiva mostra i contenuti visualizzati e gli stili vengono definiti grazie a CSS essenziali incorporati.

Conclusione

Se la tua applicazione non presenta percorsi di rendering lato server, utilizza react-snap per pre-renderizzare il codice HTML statico agli utenti.

  1. Installalo come dipendenza per lo sviluppo e inizia con quello predefinito impostazioni.
  2. Utilizza l'opzione sperimentale inlineCss per incorporare codice CSS critico se funziona per il tuo sito.
  3. Se utilizzi la suddivisione del codice a livello di componente all'interno di qualsiasi route, fai attenzione a non eseguire il prerendering di uno stato di caricamento per gli utenti. La react-snap LEGGIMI la tratta in modo più dettagliato.