Rendering
Die Architektur des PWA Kits beruht auf dem Rendering-System von React und fügt Funktionalitäten hinzu, die sowohl Benutzern als auch Entwicklern zugutekommen. Diese Anleitung zur Architektur stellt diese Funktionalitäten des PWA Kit-Rendering-Systems und ihre Funktionsweise näher vor. Schwerpunkt liegt dabei auf den Teilen des PWA Kit React SDKs und der Retail React App, die zusammen in der jeweiligen Funktionalität zum Tragen kommen.
Für einen überzeugenden ersten Eindruck muss die erste von den Benutzern Ihrer Storefront angeforderte Seite so schnell wie möglich laden. Allerdings erfordert das Rendern der ersten Seite mehr Zeit als nachfolgende Seitenabfragen. Jede einzelne Komponente auf der Seite muss gerendert werden, nicht nur diejenigen, die aktualisiert werden müssen. Für dieses kritische erste Laden der Seite verwenden wir das serverseitige Rendering, weil es ein leistungsfähiges Werkzeug zur Optimierung der Leistung bietet: das Caching.
Der CDN-Cache von Managed Runtime kann eine zuvor gerenderte Version einer Seite zwischenspeichern und sie dem Benutzer in kürzester Zeit anzeigen. Es gibt kein schnelleres Rendering als eines, das bereits fertig ist!
In unserer Anleitung zur Maximierung Ihrer Cache-Trefferrate erfahren Sie mehr zur Leistungssteigerung durch Caching.
Der Hauptcode für das serverseitige Rendering wird im App-Server ausgeführt. Beim App-Server handelt es sich um eine Express App, die eingehende HTTP-Anfragen entgegennimmt und daraufhin eine Funktion namens render aufruft. Der App-Server ist in app/ssr.js definiert.
Die render-Funktion wird aus dem PWA Kit React SDK importiert. Hilfsfunktionen (ebenfalls aus dem SDK) erstellen eine Instanz von Express und hängen die render-Funktion bei allen GET-Anfragen als Express Route-Methode daran an.
Nach dem Laden der ersten Seite werden die Rendering-Aufgaben von der Serverseite auf die Clientseite verlagert. Der dazu verwendete Prozess wird als Hydration bezeichnet. Während der Hydration startet die Ausführung Ihrer React App im Browser des Benutzers. Ereignishandler werden als Antwort auf Benutzereingaben aufgerufen. Seitenelemente werden wie von den Benutzereingaben im clientseitigen Rendering vorgegeben gerendert, wenn sie gebraucht werden. Dieses effizientere und vom Benutzer gesteuerte Rendering ermöglicht das flüssige Erlebnis, für das React bekannt ist.
Die PWA Kit-Architektur arbeitet hinter den Kulissen, um den Übergang vom serverseitigen Rendering zum clientseitigen Rendering so reibungslos wie möglich zu gestalten. So werden beispielsweise alle Ihre Komponenten zusammen mit allen benötigten Props vorgeladen, einschließlich der auf API-Anfragen beruhenden Props. Während des serverseitigen Renderings werden diese Props serialisiert und in die Seitenquelle eingebettet, sodass sie während der Hydration verwendet werden können.
Da sowohl in serverseitigen als auch in clientseitigen Umgebungen der gleiche Code gerendert wird, muss er isomorph sein. Isomorphes JavaScript (auch als universelles JavaScript bezeichnet) ist Code, der nicht auf den direkten Zugriff auf ein Codekonstrukt angewiesen ist, das nur in bestimmten Runtime-Umgebungen verfügbar ist. Sollte ein Konstrukt nicht in beiden Umgebungen verfügbar sein, müssen Sie zusätzlichen entsprechenden Bedingungscode hinzufügen, um sicherzustellen, dass das Konstrukt in der aktuellen Umgebung verfügbar ist.
Die folgende Tabelle enthält einige der gängigen Konstrukte, die mit Bedingungscode verwendet werden müssen:
| Konstrukt | Beschreibung | Verfügbarkeit |
|---|---|---|
window.location | Aktuelle URL vom Browser | nur Client-Seite |
req | HTTP-Anfrage von Express | nur Serverseite |
res | HTTP-Antwort von Express | nur Serverseite |
Anhand des window-Objekts können Sie feststellen, ob das Rendering auf Client- oder Serverseite erfolgt. Im folgenden Beispiel wird diese Methode angewendet, um einen Preis nur auf der Client-Seite zu rendern:
Einiger Content darf nur auf der Client-Seite gerendert werden, damit die bestmögliche Leistung erzielt werden kann. Dies betrifft personalisierten oder häufig wechselnden Content. Näheres hierzu finden Sie in unserer Anleitung zur Maximierung Ihrer Cache-Trefferrate.
Das PWA Kit-Rendering-System stellt auf jeder Seite eine Korrelations-ID (im UUID v4-Format) bereit. Mithilfe der Korrelations-ID können Anfragen und Antworten von PWA Kit mit Aktivitäten in anderen Systemen wie der B2C Commerce API abgeglichen werden.
Auf der Serverseite wird die Korrelations-ID auf den Wert von requestId im API-Gateway der Managed Runtime-Infrastruktur gesetzt. Auf der Clientseite wird bei jeder Seitennavigation mit der randomUUID()-Methode der integrierten Web Crypto API eine UUID generiert.
Durch Import des useCorrelationId-Hooks bringen Sie die Korrelations-ID in Ihre PWA Kit-Anwendung:
Über den correlation-x-Header können Sie die Korrelations-ID von PWA Kit in die B2C Commerce API weiterleiten. In der Antwort wird die weitergeleitete Korrelations-ID im x-correlation-id-Header in Kombination mit einer internen ID aus der API zurückgegeben.
Mehr über die Verwendung der Korrelations-ID mit der B2C Commerce API finden Sie in den Informationen zur B2C Commerce API.
Sehen Sie sich den Quellcode in app/ssr.js an, um den Rendering-Prozess besser verstehen zu können. Dort finden Sie wichtige Einstellungen für den App-Server wie beispielsweise die Cache-Lebensdauer für Seiten.
Vergessen Sie beim Durchlesen der PWA Kit-Dokumentation nicht die Architekturanleitung für die Retail React App.