{"id":17905,"date":"2026-08-07T11:15:00","date_gmt":"2026-08-07T05:30:00","guid":{"rendered":"https:\/\/www.bay20.com\/de\/?p=17905"},"modified":"2026-08-19T14:35:12","modified_gmt":"2026-08-19T08:50:12","slug":"wie-laesst-sich-die-leistung-ihres-bigcommerce-catalyst-shops-steigern","status":"publish","type":"post","link":"https:\/\/www.bay20.com\/de\/wie-laesst-sich-die-leistung-ihres-bigcommerce-catalyst-shops-steigern\/","title":{"rendered":"Wie l\u00e4sst sich die Leistung Ihres Bigcommerce-Catalyst-Shops steigern?"},"content":{"rendered":"\n

Wie alle komplexen Frontend-Webanwendungen nutzt auch Bigcommerce Catalyst Storefront eine Reihe von Strategien, um die Leistung sicherzustellen \u2013 dazu geh\u00f6ren sowohl schnell ladende Seiten f\u00fcr die Nutzer als auch eine effiziente Nutzung der Backend-Ressourcen. Wir haben die wichtigsten Strategien in den Bereichen Datenabruf, Caching und statisches Rendering untersucht.<\/p>\n\n\n\n

Wenn Sie Ihre eigene Storefront-Anwendung anpassen, ist es wichtig, bew\u00e4hrte Verfahren anzuwenden und darauf zu achten, die von Catalyst eingesetzten Optimierungstechniken beizubehalten, um Leistungseinbu\u00dfen und unerwartete Kosten zu vermeiden.<\/p>\n\n\n\n

Befolgen Sie diese Schritte, um die Leistung Ihres Bigcommerce Catalyst-Shops zu steigern.<\/h2>\n\n\n\n

API-Aufrufe reduzieren<\/h3>\n\n\n\n

Next.js bietet Ihnen gro\u00dfe Flexibilit\u00e4t hinsichtlich der Platzierung Ihrer Datenabrufe, dennoch ist es wichtig, pro Seitenladung so wenige API-Aufrufe wie m\u00f6glich zu t\u00e4tigen. Viele separate GraphQL-Anfragen k\u00f6nnen sowohl den BigCommerce-Backend-Dienst belasten (was m\u00f6glicherweise zu einer Ratenbegrenzung f\u00fchrt) als auch die Reaktionszeit der Seite verlangsamen.<\/p>\n\n\n\n

TUN SIE FOLGENDES<\/strong> \u2026 Reduzieren Sie die Gesamtzahl der f\u00fcr einen Seitenladevorgang erforderlichen API-Anfragen, indem Sie neue GraphQL-Anfragen in die einzige \u201eHaupt\u201c-Abfrage f\u00fcr eine Seite zusammenfassen. Wenn es sinnvoll ist, dass eine isolierte Komponente ihre eigenen Anfragen verarbeitet, umschlie\u00dfen Sie diese mit einem -Tag, um zu verhindern, dass sie das Rendering anderer Elemente blockiert.<\/p>\n\n\n\n

TUN SIE FOLGENDES NICHT<\/strong> \u2026 Verteilen Sie benutzerdefinierte GraphQL-Anfragen nicht auf mehrere Anfragen.<\/p>\n\n\n\n

Der Daten-Cache<\/h3>\n\n\n\n

Die Antworten auf Datenabrufanfragen, wie beispielsweise BigCommerce-GraphQL-API-Anfragen, k\u00f6nnen in Next.js zwischengespeichert werden, sodass diese API-Anfragen nicht wiederholt gestellt werden m\u00fcssen, wenn dieselben Daten ben\u00f6tigt werden.<\/p>\n\n\n\n

TUN \u2026<\/strong> Erlauben Sie die Verwendung des Daten-Caches f\u00fcr Abrufanfragen in anonymen (nicht angemeldeten) Kontexten.<\/p>\n\n\n\n

TUN SIE NICHT \u2026 <\/strong>deaktivieren Sie den Datencache nicht unn\u00f6tigerweise mit dem Wert \u201eno-store\u201c f\u00fcr fetchOptions.cache. Es ist au\u00dferdem wichtig, die Anweisung fetchCache = \u201adefault-cache\u2018 in app\/[locale]\/layout.tsx nicht zu entfernen.<\/p>\n\n\n\n

KV-Speicher<\/h3>\n\n\n\n

Catalyst nutzt Middleware, um kurze URL-Pfade in die entsprechenden Seitenrouten aufzul\u00f6sen. Dazu ist eine eigene GraphQL-Anfrage erforderlich, um den Pfad nachzuschlagen. Ein KV-Speicher wird verwendet, um diese Ergebnisse f\u00fcr eine optimale Leistung zwischenzuspeichern.<\/p>\n\n\n\n

TUN SIE \u2026<\/strong> stellen Sie sicher, dass in Ihren Produktionsumgebungen eine KV-Speicher-Konfiguration eingerichtet ist.<\/p>\n\n\n\n

TUN SIE NICHT \u2026<\/strong> entfernen Sie die KV-Store-Logik aus \u201emiddlewares\/with-routes.ts\u201c, es sei denn, Sie beabsichtigen, eine Routing-Strategie zu verfolgen, die die zus\u00e4tzlichen GraphQL-Abfragen vollst\u00e4ndig eliminiert.<\/p>\n\n\n\n

Teilweises Vorrendering<\/h3>\n\n\n\n

Das teilweise Vorrendering erm\u00f6glicht die statische Generierung bestimmter Seiteninhalte und optimiert so die Seitenleistung.<\/p>\n\n\n\n

TUN SIE NICHT \u2026<\/strong> entfernen Sie die PPR-Konfiguration in next.config.ts oder app\/[locale]\/(default)\/layout.tsx, es sei denn, Sie verf\u00fcgen \u00fcber eine alternative Strategie f\u00fcr die statische Generierung.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Suspense-Grenzen<\/h3>\n\n\n\n

Die Komponenten \u201eStream\u201c und \u201eSuspense\u201c<\/a><\/strong> erm\u00f6glichen 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.<\/p>\n\n\n\n

TUN \u2026<\/strong> Nutzen Sie \u201eStream\u201c oder \u201eSuspense\u201c, um Komponenten zu umschlie\u00dfen, die auf dynamische Daten angewiesen sind.<\/p>\n\n\n\n

Bitte kontaktieren Sie uns unter wargis@bay20.com\/manish@bay20.com<\/strong> oder rufen Sie uns unter +91-8800519180 \/ +91-9582784309<\/strong> an, wenn Sie Unterst\u00fctzung im Zusammenhang mit Bigcommerce ben\u00f6tigen. Sie k\u00f6nnen auch die Bigcommerce-Entwicklungsseite<\/a><\/strong> besuchen, um sich \u00fcber unsere Dienstleistungen zu informieren.<\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Wie alle komplexen Frontend-Webanwendungen nutzt auch Bigcommerce Catalyst Storefront eine Reihe von Strategien, um die Leistung sicherzustellen \u2013 dazu geh\u00f6ren sowohl schnell ladende Seiten f\u00fcr 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 […]<\/p>\n","protected":false},"author":1,"featured_media":17906,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,170,86],"tags":[],"class_list":["post-17905","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bigcommerce","category-catalyst","category-pwa"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17905","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/comments?post=17905"}],"version-history":[{"count":2,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17905\/revisions"}],"predecessor-version":[{"id":18020,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17905\/revisions\/18020"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media\/17906"}],"wp:attachment":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media?parent=17905"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/categories?post=17905"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/tags?post=17905"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}