Redesign bonbon-mueller.de v2 — Part 3: Warum der Mensch im Loop den Unterschied macht

Der Shop ist live — aber die Arbeit fängt erst an

In Part 2 stand nach einer Woche ein funktionierender Shop. Jetzt, eine weitere Woche später, ist bonbon-mueller.de live — mit echten Bestellungen, echtem Checkout und echten Kunden.

Aber dieser Teil der Geschichte handelt nicht von Features. Er handelt von dem, was zwischen den Zeilen passiert, wenn man KI-gestützt entwickelt — und warum der Mensch im Loop nicht optional ist, sondern der entscheidende Faktor.

Der AI Orchestrator: Ein Alleskönner aus Notwendigkeit

KI-gestützte Entwicklung klingt nach Autopilot. Die Realität ist eine andere: Der Mensch im Loop muss mehr können als in einem klassischen Setup, nicht weniger.

Warum? Weil die KI keine Domänengrenzen kennt. Sie generiert Frontend-Code, Backend-Logik, SEO-Texte, Deployment-Configs und Datenbankabfragen — alles in derselben Session. Wenn der Orchestrator nur Frontend kann, übersieht er Backend-Fehler. Wenn er nur Backend kann, erkennt er keine UX-Probleme. Wenn er kein SEO versteht, merkt er nicht, dass der generierte Code die Indexierung zerstört.

Der AI Orchestrator muss ein Jack of all Trades sein: Frontend, Backend, DevOps, SEO, Performance, UX — nicht in jedem Bereich ein Experte, aber in jedem Bereich kompetent genug, um Fehler zu erkennen, bevor sie in Produktion landen.

Das Suspense-Problem: Unsichtbar, aber fatal

Ein konkretes Beispiel. Die KI hat beim Aufbau der Seitenstruktur <Suspense>-Boundaries in Next.js verwendet — grundsätzlich richtig, denn Suspense ermöglicht Streaming und bessere Ladezeiten. Aber sie hat die Boundaries um den gesamten Hauptinhalt im Layout gesetzt.

Technisch? Funktioniert einwandfrei. Der Shop lädt, die Seiten rendern, alles sieht gut aus.

Das Problem: Suchmaschinen-Crawler bekommen beim ersten Request nur die Fallback-Komponente zu sehen — keinen Inhalt. Google indexiert eine leere Hülle. Für einen Shop, der von organischem Traffic leben soll, ist das ein Killer.

Kein Test hätte das gefunden. Kein Lighthouse-Score hätte rot angezeigt. Nur jemand, der versteht, wie Next.js Streaming, Suspense und Crawler-Verhalten zusammenspielen, erkennt dieses Problem — bevor es Wochen später als mysteriöser Ranking-Verlust auftaucht.

Die Lösung: Suspense-Boundaries nur um dynamische, personalisierte Komponenten (Warenkorb, Checkout-Sidebar), während der SEO-relevante Hauptinhalt direkt gerendert wird. Die KI hat die Korrektur in Minuten umgesetzt — aber sie brauchte die menschliche Anweisung, *was* falsch war und *warum*.

Next.js Caching: Schicht für Schicht

Ein weiteres Muster, das menschliche Steuerung brauchte: die Caching-Architektur. Die KI hatte begonnen, 'use cache'-Direktiven auf mehreren Ebenen einzubauen — einmal in der Datenschicht (wo Strapi-Daten abgerufen werden) und nochmal in der Komponente, die diese Daten konsumiert.

Doppeltes Caching klingt nach "doppelt sicher". In Wirklichkeit erzeugt es:

• Inkonsistente Invalidierung — eine Schicht wird aktualisiert, die andere liefert veraltete Daten
• Debugging-Albträume — "Warum zeigt die Seite noch den alten Preis?" wird unlösbar, wenn zwei Cache-Schichten beteiligt sind
• Unnötige Komplexität im Build-Prozess

Die Korrektur: Ein klares Zwei-Tier-Caching-System. CMS-Inhalte (Seiten, Menüs, Kategorien) bekommen längere Cache-Zeiten. Commerce-Daten (Produkte, Preise, Verfügbarkeit) bekommen kürzere. Jede Datenfunktion hat genau eine Cache-Direktive — in der Datenschicht, nicht in der Komponente.

SEO-Inhalte: KI schreibt, der Mensch steuert

Die KI hat für jede Produktkategorie Meta-Titel und Beschreibungen generiert, für die Herstellungsseite detaillierte Texte verfasst und Fallback-Beschreibungen erstellt, falls das CMS leer ist. Quantitativ beeindruckend — die Herstellungsseite wuchs von 345 auf 1.200 Wörter.

Aber: Ohne Steuerung optimiert die KI auf Vollständigkeit, nicht auf Relevanz. Der Orchestrator muss wissen, welche Keywords für einen Bonbon-Hersteller aus dem Ruhrgebiet tatsächlich Traffic bringen. "Kräuterbonbons kaufen", "handgemachte Bonbons", "Bonbon Manufaktur" — das sind die Begriffe, auf die wir gezielt optimiert haben. Nicht weil die KI sie nicht kennt, sondern weil sie ohne Anweisung auf generische Begriffe optimiert hätte.

Der Checkout: Wo alles zusammenkommt

Der Checkout zeigt das Zusammenspiel aller Korrekturen: Caching für die statischen Elemente (Logo, Firmeninformationen), Suspense nur um die dynamische Warenkorb-Sidebar (die Cookies liest und personalisiert ist), und der Hauptinhalt direkt gerendert für maximale Performance.

PageSpeed: Die Quittung für saubere Architektur

All diese Korrekturen — Suspense-Boundaries an den richtigen Stellen, ein sauberes Caching-System, kein unnötiger JavaScript-Ballast — zahlen sich messbar aus:

Desktop: 100 / 96 / 100 / 100. First Contentful Paint in 0,3 Sekunden. Largest Contentful Paint in 0,8 Sekunden. Total Blocking Time: 10 Millisekunden. Cumulative Layout Shift: praktisch null.

Mobile (Slow 4G): 89 / 96 / 100 / 100. Selbst unter simulierter langsamer Mobilverbindung bleibt der Shop schnell. Zum Vergleich: Der Durchschnitt für E-Commerce-Seiten liegt bei einem Mobile-Performance-Score von 30–40.

Das ist kein Zufall. Das ist das direkte Ergebnis der Architekturentscheidungen, die der AI Orchestrator getroffen hat: Server-Side Rendering statt Client-Side Hydration für den Hauptinhalt, granulares Caching statt Pauschal-Cache, und Suspense nur dort, wo es hingehört.

Was wir daraus lernen

KI-gestützte Entwicklung ist kein Autopilot. Es ist eher wie ein extrem schneller, extrem fleißiger Junior-Entwickler, der alles parallel macht — und genau deshalb jemanden braucht, der das Gesamtbild im Blick behält.

Der AI Orchestrator bei Digitale Kumpel ist:

• Reviewer — jede KI-generierte Änderung wird geprüft, nicht blind übernommen
• Architekt — Caching-Strategien, Rendering-Patterns und Deployment-Pipelines werden bewusst designed
• SEO-Stratege — Keywords und Content-Struktur folgen einer durchdachten Strategie
• Qualitätssicherung — unsichtbare Probleme wie das Suspense-Pattern werden erkannt, bevor sie Schaden anrichten

Das ist der Kern von Digitale Kumpel: Nicht einfach KI auf ein Projekt loslassen. Sondern KI so einsetzen, dass die Geschwindigkeit erhalten bleibt, ohne die Qualität zu opfern. Dafür braucht es Menschen, die breit genug aufgestellt sind, um Fehler in jedem Layer zu erkennen — und tief genug, um sie zu lösen.

Wie es weitergeht

• Monitoring & Analytics — Tracking der echten Shop-Performance nach Launch
• Conversion-Optimierung — A/B-Tests basierend auf echten Nutzerdaten
• Content-Strategie — Magazin-Artikel für organischen Traffic

Vom Businessplan zum Live-Shop in drei Wochen. Aber der eigentliche Wert liegt nicht in der Geschwindigkeit — sondern darin, dass das Ergebnis produktionsreif ist. Und das geht nur mit einem Menschen im Loop.