Rendering
L'architettura di PWA Kit si basa sul sistema di rendering di React, con l'aggiunta di funzionalità molto utili per utenti e sviluppatori. Questa guida sull'architettura esamina più da vicino tali funzionalità del sistema di rendering di PWA Kit e il relativo funzionamento. Particolare attenzione viene riservata alle parti di PWA Kit React SDK e Retail React App, che interagiscono per supportare le varie funzionalità.
Per una prima impressione favorevole, la prima pagina che un utente richiede dallo storefront deve caricarsi il più rapidamente possibile. Tuttavia, le richieste della prima pagina necessitano di un tempo di rendering superiore rispetto a quelle successive. Il rendering deve interessare tutti i componenti della pagina, non solo quelli che devono essere aggiornati. Per il caricamento critico della prima pagina viene utilizzato il rendering di lato server, poiché offre uno strumento potente per ottimizzare le prestazioni: il caching.
La cache CDN di Managed Runtime è in grado di memorizzare una versione precedentemente renderizzata di una pagina e pubblicarla all'istante per l'utente. Non esiste un rendering più veloce di quello già eseguito.
Per informazioni su come ottimizzare le prestazioni attraverso il caching, consultare la guida Massimizzazione dell'indice di riscontri cache.
Il codice principale per il rendering di lato server viene eseguito all'interno dell'app server. L'app server è un'app Express che gestisce le richieste HTTP in entrata e richiama una funzione denominata render in risposta. L'app server viene definito in app/ssr.js.
La funzione render viene importata da PWA Kit React SDK. Le funzioni helper (provenienti anche dall'SDK) creano un'istanza di Express e vi associano la funzione render come metodo di routing Express per tutte le richieste GET.
Dopo il primo caricamento di pagina, i compiti di rendering vengono trasferiti dal lato server al lato client attraverso un processo denominato hydration. Durante l'hydration, inizia l'esecuzione dell'app React nel browser dell'utente. I gestori di evento entrano in azione per rispondere all'input dell'utente. Gli elementi di pagina vengono renderizzati all'occorrenza e in base alle indicazioni dell'input dell'utente nel rendering di lato client. Questo rendering più efficiente e diretto dall'utente garantisce l'esperienza fluida tipica di React.
L'architettura di PWA Kit opera dietro le quinte per rendere il più lineare possibile il passaggio dal rendering di lato server al rendering di lato client. Ad esempio, ogni componente viene precaricato con tutte le prop necessarie, comprese quelle risultanti dalle richieste API. Durante il rendering di lato server, queste prop vengono serializzate e incorporate nell'origine della pagina per poter essere utilizzate durante l'hydration.
Poiché lo stesso codice viene renderizzato negli ambienti sia di lato server sia di lato client, deve essere codice isomorfo. Il codice JavaScript isomorfo (noto anche come JavaScript universale) non si basa sull'accesso diretto a qualsiasi costrutto di codice disponibile solo in un ambiente di runtime o in un altro. Quando un costrutto non è disponibile in entrambi gli ambienti, aggiungere codice condizionale per assicurarsi che sia disponibile nell'ambiente corrente.
La tabella seguente riporta alcuni costrutti di uso comune da utilizzare con il codice condizionale:
| Costrutto | Descrizione | Disponibilità |
|---|---|---|
window.location | URL corrente dal browser | Solo lato client |
req | Richiesta HTTP da Express | Solo lato server |
res | Risposta HTTP da Express | Solo lato server |
Per determinare se il rendering avviene sul lato client o sul lato server, verificare la presenza dell'oggetto window. Nel seguente esempio viene utilizzata questa tecnica per renderizzare un prezzo solo sul lato client:
Alcuni contenuti, ad esempio quelli personalizzati o soggetti a frequenti modifiche, devono essere renderizzati solo sul lato client per ottenere le migliori prestazioni possibili. Per ulteriori informazioni, consultare la guida Massimizzazione dell'indice di riscontri cache.
Il sistema di rendering di PWA Kit fornisce un ID di correlazione (in formato UUID v4) su ciascuna pagina. L'ID di correlazione può essere utilizzato per abbinare le richieste e le risposte da PWA Kit alle attività in altri sistemi, come B2C Commerce API.
Sul lato server l'ID di correlazione viene impostato sul valore di requestId nel gateway API dell'infrastruttura di Managed Runtime. Sul lato client viene generato un UUID con ogni navigazione di pagina utilizzando il metodo randomUUID() della Web Crypto API integrata.
Per ottenere l'ID di correlazione nell'applicazione PWA Kit, importare l'hook useCorrelationId:
È possibile inoltrare l'ID di correlazione da PWA Kit a B2C Commerce API tramite l'intestazione correlation-x. Nella risposta l'ID di correlazione inoltrato viene restituito nell'intestazione x-correlation-id combinato con un ID interno dell'API.
Per ulteriori informazioni sull'utilizzo dell'ID di correlazione con B2C Commerce API, consultare About the B2C Commerce API (Informazioni su B2C Commerce API).
Per comprendere più a fondo il rendering, esaminare il codice sorgente in app/ssr.js. Esso contiene importanti impostazioni dell'app server, come la durata della cache predefinita per le pagine.
Durante la lettura della documentazione su PWA Kit, consultare la guida sull'architettura Retail React App.