{"id":17918,"date":"2026-08-07T12:02:44","date_gmt":"2026-08-07T06:17:44","guid":{"rendered":"https:\/\/www.bay20.com\/de\/?p=17918"},"modified":"2026-08-19T14:34:30","modified_gmt":"2026-08-19T08:49:30","slug":"wie-funktioniert-das-routing-in-bigcommerce-catalyst","status":"publish","type":"post","link":"https:\/\/www.bay20.com\/de\/wie-funktioniert-das-routing-in-bigcommerce-catalyst\/","title":{"rendered":"Wie funktioniert das Routing in Bigcommerce Catalyst?"},"content":{"rendered":"\n<p>Das Routing in einer Webanwendung ist der Prozess, bei dem ein bestimmter URL-Pfad einer gerenderten Seite zugeordnet wird. Catalyst verf\u00fcgt \u00fcber ein vorgefertigtes, festgelegtes Routing-Schema f\u00fcr alle wichtigen Storefront-Seitentypen. BigCommerce-Produkte, -Kategorien, -Marken und -Webseiten haben jeweils einen URL-Pfadwert. Diese Pfade sind in verschiedenen Mustern verf\u00fcgbar, je nach Ihren Einstellungen unter \u201eEinstellungen &gt; Allgemein &gt; URL-Struktur\u201c. Die Architektur des Routings in BigCommerce Catalyst stellt sicher, dass die URLs im Shop genau mit diesen Pfaden \u00fcbereinstimmen. In einem Catalyst-Shop finden Sie das Produkt mit dem URL-Pfad \/sample-orbit-terrarium-small\/ unter dem absoluten Pfad mystore.com\/sample-orbit-terrarium-small\/.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"397\" src=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/product-path.png\" alt=\"\" class=\"wp-image-17920\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/product-path.png 840w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/product-path-300x142.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/product-path-768x363.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/product-path-800x378.png 800w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Struktur der Routing-Dateien<\/h2>\n\n\n\n<p>Werfen wir einen kurzen Blick auf die wichtigsten Routing-Dateien und Verzeichnisse in Catalyst. Da Bigcommerce Catalyst den Next.js App Router nutzt, befinden sich die Routing-Dateien im Verzeichnis \u201eapp\u201c. Zu den Verzeichnissen, die den URL-Mustern entsprechen, geh\u00f6ren:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>admin<\/strong> \u2013 Eine einfache Route, die zum Kontrollpanel des BigCommerce-Shops weiterleitet.<\/li>\n\n\n\n<li><strong>api<\/strong> \u2013 Enth\u00e4lt Routen f\u00fcr einige API-Endpunkte, beispielsweise solche, die mit der Kundenauthentifizierung zusammenh\u00e4ngen.<\/li>\n\n\n\n<li><strong>sitemap.xml<\/strong> \u2013 Enth\u00e4lt die Route zur Erstellung der Sitemap.<\/li>\n\n\n\n<li><strong>[locale]\/maintenance<\/strong> \u2013 Die Seite, die angezeigt wird, wenn der Shop inaktiv ist.<\/li>\n\n\n\n<li><strong>[locale]\/(default)<\/strong> \u2013 Eine <strong><a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/file-conventions\/route-groups\" target=\"_blank\" rel=\"noopener\" title=\"\">Next.js-Routengruppe<\/a><\/strong>, die f\u00fcr alle anderen Seiten der Shop-Oberfl\u00e4che gilt. Die URL-Pfade enthalten den Verzeichnisnamen (default) nicht als Segment. Die Datei \u201elayout.tsx\u201c in diesem Verzeichnis enth\u00e4lt ein gemeinsames Layout f\u00fcr alle typischen Seiten.<\/li>\n<\/ul>\n\n\n\n<p>Innerhalb von <strong>[locale]\/(default)<\/strong> gibt es weitere bemerkenswerte Routengruppen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>(auth)<\/strong> \u2013 Eine Gruppe, die alle Routen f\u00fcr die Kundenregistrierung, die Anmeldung und das Zur\u00fccksetzen des Passworts umfasst.<\/li>\n\n\n\n<li><strong>(faceted)<\/strong> \u2013 Eine Gruppe, die alle Routen umfasst, bei denen eine Facettenfilterung der Produktliste zum Einsatz kommt, sowie die Serverkomponenten und die allen diesen Routen gemeinsame Logik.<\/li>\n<\/ul>\n\n\n\n<p>Zu den wichtigsten Storefront-Routen und ihren Speicherorten unter <strong>\u201eapp\/[locale]\/(default)\u201c<\/strong> geh\u00f6ren:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>page.tsx<\/strong> \u2013 Startseite<\/li>\n\n\n\n<li><strong>(auth)\/login\/page.tsx<\/strong> \u2013 Anmeldeseite<\/li>\n\n\n\n<li><strong>(auth)\/register\/page.tsx<\/strong> \u2013 Registrierungsseite<\/li>\n\n\n\n<li><strong>(faceted)\/category\/[slug]\/page.tsx<\/strong> \u2013 Kategorieseite<\/li>\n\n\n\n<li><strong>(faceted)\/brand\/[slug]\/page.tsx<\/strong> \u2013 Markenseite<\/li>\n\n\n\n<li><strong>(faceted)\/search\/page.tsx <\/strong>\u2013 Suchergebnisseite<\/li>\n\n\n\n<li><strong>product\/[slug]\/page.tsx<\/strong> \u2013 Produktdetailseite<\/li>\n\n\n\n<li><strong>cart\/page.tsx<\/strong> \u2013 Warenkorbseite<\/li>\n\n\n\n<li><strong>account\/*<\/strong> \u2013 Seiten im Bereich \u201eKundenkonto\u201c<\/li>\n\n\n\n<li><strong>compare\/page.tsx<\/strong> \u2013 Produktvergleichsseite<\/li>\n\n\n\n<li><strong>webpages\/normal\/[id]\/page.tsx<\/strong> \u2013 Standard-Webseiten<\/li>\n\n\n\n<li><strong>webpages\/contact\/[id]\/page.tsx<\/strong> \u2013 Kontakt-Webseite<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Benutzerdefinierte URL-Middleware<\/h2>\n\n\n\n<p><strong><a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/file-conventions\/proxy\" target=\"_blank\" rel=\"noopener\" title=\"\">Next.js-Middleware<\/a><\/strong> kann Anfragen blockieren, bevor sie eine bestimmte Route erreichen, und sie dabei \u00e4ndern oder umleiten. Der zentrale Einstiegspunkt f\u00fcr Middleware \u2013 \u201emiddleware.ts\u201c \u2013 l\u00e4dt mehrere Middleware-Funktionen und f\u00fchrt sie aus. Die f\u00fcr Sie wichtigste Middleware ist jedoch diejenige, die sich auf benutzerdefinierte URLs bezieht.<\/p>\n\n\n\n<p>Beachten Sie das Muster der Dateipfade f\u00fcr die meisten Routen, wie oben erl\u00e4utert. Es umfasst feste URL-Segmente wie \u201eproduct\u201c und dynamische Segmente wie \u201e[slug]\u201c oder \u201e[page]\u201c. Werfen Sie einen Blick auf die Logik in der Routendatei f\u00fcr die Produktdetailseite. Sie werden feststellen, dass der Parameter \u201e[slug]\u201c eigentlich die numerische ID eines Produkts sein soll.<\/p>\n\n\n\n<p>Das bedeutet, dass die Route tats\u00e4chlich einer URL wie <strong>\u201emystore.com\/product\/123\u201c<\/strong> entsprechen w\u00fcrde. Dies stimmt nicht mit den erwarteten URL-Pfaden f\u00fcr Produkte, Kategorien usw. \u00fcberein, die wir zuvor betrachtet haben. Wir erwarten URLs wie <code><strong>mystore.com\/sample-orbit-terrarium-small\/<\/strong><\/code>. Solche URLs enthalten keine Angaben dazu, ob sie einem Produkt, einer Kategorie, einer Marke oder einer Webseite entsprechen. Catalyst nutzt Middleware, um solche Anfragen abzufangen und ihr endg\u00fcltiges Routing zu bestimmen.<\/p>\n\n\n\n<p>Die Datei <code><strong>middlewares\/with-routes.ts<\/strong><\/code> enth\u00e4lt die Logik f\u00fcr diese Umleitung. Sie sendet zun\u00e4chst eine GraphQL-Anfrage, um den Typ und die ID der Entit\u00e4t abzurufen, die der Route entspricht. Diese Informationen werden dann verwendet, um den URL-Pfad der Anfrage so \u201eumzuschreiben\u201c, dass Next.js den Pfad als etwas \u00c4hnliches wie das obige Beispiel <code>\/product\/123<\/code> interpretiert und die Anfrage an die endg\u00fcltige passende Route weiterleitet.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Strategien zur Verbesserung der Routing-Leistung<\/h2>\n\n\n\n<p>Die Catalyst-Routing-Architektur und die benutzerdefinierte URL-Middleware umfassen einige wichtige Strategien. Diese sind darauf ausgelegt, das Routing und die Darstellung von Seiten so schnell wie m\u00f6glich zu gestalten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">KV-Speicher<\/h3>\n\n\n\n<p>Die oben beschriebene Logik zur Ermittlung des endg\u00fcltigen Routing-Pfads einer dynamischen URL erfordert eine zus\u00e4tzliche GraphQL-Anfrage. Diese muss synchron und vor dem Abruf der Hauptdaten f\u00fcr den Inhalt einer bestimmten Seite durchgef\u00fchrt werden. Es handelt sich dabei zudem nicht um die einzige Anfrage dieser Art. Dieselbe Middleware fragt auch den Status des Shops ab, um festzustellen, ob die Wartungsseite bereitgestellt werden soll. Diese zus\u00e4tzlichen Roundtrips zur BigCommerce-API k\u00f6nnen die Ladezeiten der Seiten erheblich beeintr\u00e4chtigen.<\/p>\n\n\n\n<p>Um diesen Prozess zu optimieren, nutzt Catalyst einen Schl\u00fcssel-Wert-Speicher (KV-Store), um die Ergebnisse dieser GraphQL-Anfragen zu Routen und zum Shop-Status zwischenzuspeichern. In lokalen Entwicklungsumgebungen handelt es sich bei der f\u00fcr diesen Speicher verwendeten Implementierung um ein einfaches JavaScript-Map-Objekt, das keinen spezifischen Zweck erf\u00fcllt. In Produktionsumgebungen wird jedoch eine echte KV-Datenbank-Implementierung erwartet. Das bedeutet in der Praxis, dass nur bei einem kleinen Teil der Seitenrenderings jemals die GraphQL-Anfragen zum Shop-Status und zu den Routeninformationen f\u00fcr einen bestimmten Pfad gestellt werden m\u00fcssen.<\/p>\n\n\n\n<p>Catalyst bietet integrierte Unterst\u00fctzung f\u00fcr <strong><a href=\"https:\/\/vercel.com\/marketplace\/upstash\" target=\"_blank\" rel=\"noopener\" title=\"\">Upstash for Redis<\/a><\/strong>, den auf Vercel verf\u00fcgbaren Standardspeicher. Es ist jedoch einfach, einen eigenen Speicher zu implementieren. Im Folgenden sind wichtige Komponenten f\u00fcr den KV-Speicher in der Anwendung aufgef\u00fchrt:KV-Speicher<\/p>\n\n\n\n<p>\u00dcbersetzt mit DeepL.com (kostenlose Version)<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>lib\/kv\/adapters<\/strong> \u2013 Enth\u00e4lt die integrierten Adapter. Wenn Sie sich die Adapter-Dateien in diesem Verzeichnis ansehen, werden Sie feststellen, dass es sich bei jeder einzelnen um eine \u00e4u\u00dferst schlanke Implementierung der Schnittstelle \u201eKvAdapter\u201c handelt.<\/li>\n\n\n\n<li><strong>lib\/kv\/index.ts<\/strong> \u2013 Die Funktion \u201ecreateKVAdapter\u201c in dieser Datei enth\u00e4lt die Logik zur Auswahl eines KV-Adapters.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Teilweises Vorrendering<\/h3>\n\n\n\n<p>Catalyst nutzt das partielle Vorrendering (PPR) von Next.js, damit Seitenrouten statische und dynamische Inhalte kombinieren k\u00f6nnen. Das bedeutet, dass Seiteninhalte, die nicht von dynamischen Daten abh\u00e4ngen \u2013 wie beispielsweise die Seite , die CSS und JavaScript l\u00e4dt \u2013, so schnell wie m\u00f6glich bereitgestellt werden k\u00f6nnen. Dabei wird nicht auf das Rendern von Inhalten gewartet, die auf dynamischen Daten beruhen.<\/p>\n\n\n\n<p>Catalyst nutzt PPR, um im gesamten Shop die bestm\u00f6gliche Seitenladeleistung zu erzielen. Zu den wichtigsten Bereichen, in denen Sie Konfigurationen im Zusammenhang mit PPR finden, geh\u00f6ren:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>next.config.js<\/strong> \u2013 Im Konfigurationswert \u201eexperimental.ppr\u201c<\/li>\n\n\n\n<li><strong>app\/[locale]\/(default)\/layout.tsx<\/strong> \u2013 Mit dem Ausdruck \u201eexperimental_ppr = true\u201c<\/li>\n<\/ul>\n\n\n\n<p>Um PPR effektiv nutzen zu k\u00f6nnen, sollten Komponenten, die dynamische Daten verwenden, mit React Suspense kombiniert werden. Catalyst setzt diese Strategie vor allem \u00fcber die Stream-Komponente um.<\/p>\n\n\n\n<p>Bitte kontaktieren Sie uns unter <strong>wargis@bay20.com\/manish@bay20.com<\/strong> oder rufen Sie uns unter <strong>+91-8800519180 \/ +91-9582784309<\/strong> an, wenn Sie Unterst\u00fctzung im Zusammenhang mit Bigcommerce ben\u00f6tigen. Sie k\u00f6nnen auch die <strong><a href=\"https:\/\/www.bay20.com\/de\/bigcommerce-entwicklungsunternehmen\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Bigcommerce-Entwicklungsseite<\/a><\/strong> besuchen, um sich \u00fcber unsere Dienstleistungen zu informieren.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Das Routing in einer Webanwendung ist der Prozess, bei dem ein bestimmter URL-Pfad einer gerenderten Seite zugeordnet wird. Catalyst verf\u00fcgt \u00fcber ein vorgefertigtes, festgelegtes Routing-Schema f\u00fcr alle wichtigen Storefront-Seitentypen. BigCommerce-Produkte, -Kategorien, -Marken und -Webseiten haben jeweils einen URL-Pfadwert. Diese Pfade sind in verschiedenen Mustern verf\u00fcgbar, je nach Ihren Einstellungen unter \u201eEinstellungen &gt; Allgemein &gt; URL-Struktur\u201c. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":17919,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,170],"tags":[],"class_list":["post-17918","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bigcommerce","category-catalyst"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17918","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=17918"}],"version-history":[{"count":2,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17918\/revisions"}],"predecessor-version":[{"id":18018,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17918\/revisions\/18018"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media\/17919"}],"wp:attachment":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media?parent=17918"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/categories?post=17918"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/tags?post=17918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}