Wie alle komplexen Frontend-Webanwendungen nutzt auch Bigcommerce Catalyst Storefront eine Reihe von Strategien, um die Leistung sicherzustellen – dazu gehören sowohl schnell ladende Seiten für die Nutzer als auch eine effiziente Nutzung der Backend-Ressourcen. Wir haben die wichtigsten Strategien in den Bereichen Datenabruf, Caching und statisches Rendering untersucht.
Wenn Sie Ihre eigene Storefront-Anwendung anpassen, ist es wichtig, bewährte Verfahren anzuwenden und darauf zu achten, die von Catalyst eingesetzten Optimierungstechniken beizubehalten, um Leistungseinbußen und unerwartete Kosten zu vermeiden.
Befolgen Sie diese Schritte, um die Leistung Ihres Bigcommerce Catalyst-Shops zu steigern.
API-Aufrufe reduzieren
Next.js bietet Ihnen große Flexibilität hinsichtlich der Platzierung Ihrer Datenabrufe, dennoch ist es wichtig, pro Seitenladung so wenige API-Aufrufe wie möglich zu tätigen. Viele separate GraphQL-Anfragen können sowohl den BigCommerce-Backend-Dienst belasten (was möglicherweise zu einer Ratenbegrenzung führt) als auch die Reaktionszeit der Seite verlangsamen.
TUN SIE FOLGENDES … Reduzieren Sie die Gesamtzahl der für einen Seitenladevorgang erforderlichen API-Anfragen, indem Sie neue GraphQL-Anfragen in die einzige „Haupt“-Abfrage für eine Seite zusammenfassen. Wenn es sinnvoll ist, dass eine isolierte Komponente ihre eigenen Anfragen verarbeitet, umschließen Sie diese mit einem -Tag, um zu verhindern, dass sie das Rendering anderer Elemente blockiert.
TUN SIE FOLGENDES NICHT … Verteilen Sie benutzerdefinierte GraphQL-Anfragen nicht auf mehrere Anfragen.
Der Daten-Cache
Die Antworten auf Datenabrufanfragen, wie beispielsweise BigCommerce-GraphQL-API-Anfragen, können in Next.js zwischengespeichert werden, sodass diese API-Anfragen nicht wiederholt gestellt werden müssen, wenn dieselben Daten benötigt werden.
TUN … Erlauben Sie die Verwendung des Daten-Caches für Abrufanfragen in anonymen (nicht angemeldeten) Kontexten.
TUN SIE NICHT … deaktivieren Sie den Datencache nicht unnötigerweise mit dem Wert „no-store“ für fetchOptions.cache. Es ist außerdem wichtig, die Anweisung fetchCache = ‚default-cache‘ in app/[locale]/layout.tsx nicht zu entfernen.
KV-Speicher
Catalyst nutzt Middleware, um kurze URL-Pfade in die entsprechenden Seitenrouten aufzulösen. Dazu ist eine eigene GraphQL-Anfrage erforderlich, um den Pfad nachzuschlagen. Ein KV-Speicher wird verwendet, um diese Ergebnisse für eine optimale Leistung zwischenzuspeichern.
TUN SIE … stellen Sie sicher, dass in Ihren Produktionsumgebungen eine KV-Speicher-Konfiguration eingerichtet ist.
TUN SIE NICHT … entfernen Sie die KV-Store-Logik aus „middlewares/with-routes.ts“, es sei denn, Sie beabsichtigen, eine Routing-Strategie zu verfolgen, die die zusätzlichen GraphQL-Abfragen vollständig eliminiert.
Teilweises Vorrendering
Das teilweise Vorrendering ermöglicht die statische Generierung bestimmter Seiteninhalte und optimiert so die Seitenleistung.
TUN SIE NICHT … entfernen Sie die PPR-Konfiguration in next.config.ts oder app/[locale]/(default)/layout.tsx, es sei denn, Sie verfügen über eine alternative Strategie für die statische Generierung.
Suspense-Grenzen
Die Komponenten „Stream“ und „Suspense“ ermöglichen es, einen Fallback-Ladezustand anzuzeigen, bis eine Komponente gerendert werden kann. Dadurch wird sichergestellt, dass Inhalte, die langsamer geladen werden, das Rendern von Inhalten, die schneller geladen werden, nicht behindern.
TUN … Nutzen Sie „Stream“ oder „Suspense“, um Komponenten zu umschließen, die auf dynamische Daten angewiesen sind.
Bitte kontaktieren Sie uns unter wargis@bay20.com/manish@bay20.com oder rufen Sie uns unter +91-8800519180 / +91-9582784309 an, wenn Sie Unterstützung im Zusammenhang mit Bigcommerce benötigen. Sie können auch die Bigcommerce-Entwicklungsseite besuchen, um sich über unsere Dienstleistungen zu informieren.
