Web-App mit Next.js entwickeln: Warum moderne B2B-Portale anders gebaut werden

Viele B2B-Portale entstehen als „bessere Website mit Login". Dann wachsen Rollen, Datenmengen, Integrationen und Berichte — und die Architektur, die für eine Broschüre gut war, trägt einen Geschäftsprozess nicht mehr.

Ein modernes B2B-Portal ist kein Designthema. Es ist eine Architekturentscheidung: Wie kommen die richtigen Daten schnell, sicher und für die richtige Rolle auf den Bildschirm — und bleibt das auch unter Last und in Suchmaschinen sichtbar?

Warum „Website mit Login" zu kurz greift

Eine Marketing-Website rendert für alle dasselbe. Ein B2B-Portal rendert für diesen Kunden, diese Rolle, diese Berechtigungen — mit Live-Daten aus ERP, Lager oder Buchhaltung.

Das verändert drei Dinge grundlegend: Daten müssen serverseitig sicher geholt werden (nicht im Browser), Rechte müssen bei jedem Zugriff greifen (nicht nur im Menü), und die Seite muss trotzdem schnell und — wo öffentlich — auffindbar sein.

Genau hier setzen moderne Frameworks wie Next.js mit dem App Router und React 19 an.

Server Components: Daten dort holen, wo sie sicher sind

Im klassischen Modell lädt der Browser eine leere Seite, ruft dann APIs auf, rendert dann Inhalte. Das ist langsam, verrät API-Strukturen und verlagert Logik dorthin, wo der Nutzer sie sieht.

React Server Components drehen das um: Die Komponente, die Daten braucht, holt sie serverseitig — mit Zugriff auf interne Systeme, ohne Secrets an den Browser zu geben. Der Browser bekommt fertiges, berechtigtes HTML. Weniger Client-JavaScript, schnellere erste Anzeige, klarere Sicherheitsgrenze.

Für ein B2B-Portal ist das kein Performance-Detail, sondern die Architektur, an der Rechte und Datenzugriff hängen.

Streaming: schnelle Seiten trotz langsamer Systeme

B2B-Daten kommen oft aus trägen Fremdsystemen. Wenn die ganze Seite auf den langsamsten Report wartet, wartet der Nutzer.

Streaming/Suspense liefert das Gerüst und die schnellen Teile sofort und schiebt den langsamen Report nach, sobald er da ist. Der Nutzer sieht in Sekunden etwas Nützliches statt einer leeren Ladeanzeige — entscheidend für Akzeptanz im Tagesgeschäft.

Core Web Vitals sind ein Business-Thema

Performance ist nicht nur Entwicklerkomfort. Google bewertet reale Nutzererfahrung über die Core Web Vitals — und sie beeinflussen Sichtbarkeit und Conversion.

Die drei Kennzahlen und ihre „guten" Schwellen:

• LCP (Largest Contentful Paint) ≤ 2,5 s — wie schnell der Hauptinhalt sichtbar ist.
• INP (Interaction to Next Paint) ≤ 200 ms — wie schnell die Seite auf Eingaben reagiert. INP hat im März 2024 FID als Core Web Vital abgelöst und misst Reaktionsfähigkeit deutlich strenger.
• CLS (Cumulative Layout Shift) ≤ 0,1 — wie ruhig das Layout bleibt.

Ein träges Portal kostet nicht nur Nerven, sondern Ranking bei öffentlichen Seiten und Effizienz bei internen Nutzern. INP belohnt genau die Architektur, die wenig Client-JavaScript ausliefert — also serverseitiges Rendering.

SEO ist kein Nachgedanke, sondern Architektur

Bei B2B-Portalen mit öffentlichem Teil (Leistungen, Login-Einstieg, Hilfe, Blog) entscheidet die Architektur über Auffindbarkeit: saubere, sprechende Routen, serverseitig gerendertes HTML, korrekte Metadaten und Canonicals, strukturierte Daten (Schema.org), eine echte Sitemap und bei Mehrsprachigkeit korrekte hreflang-Alternates.

Das ist mit serverseitigem Rendering eine natürliche Eigenschaft — und mit einer reinen Client-SPA ein dauerhafter Kampf.

Die echte Schwierigkeit: Rollen und Rechte

Die teuerste Stelle eines B2B-Portals ist selten die Oberfläche. Es ist die Frage „wer darf was sehen und ändern" — über Mandanten, Rollen, Freigaben und API-Zugriffe hinweg.

Server Components helfen, weil der Datenzugriff serverseitig und damit prüfbar bleibt. Aber Rechte müssen bei jedem Zugriff erzwungen werden, nicht nur durch ausgeblendete Menüpunkte. Wer Sichtbarkeit mit Berechtigung verwechselt, baut ein Sicherheitsproblem mit schönem UI — siehe auch die Risiken aus dem OWASP-Kontext rund um KI-Features, die für jede datenführende Web-App sinngemäß gelten.

Tech-Stack-Realität

Next.js (App Router), React 19 und TypeScript sind kein Selbstzweck, sondern eine Antwort auf genau diese Anforderungen: serverseitiger Datenzugriff, wenig Client-JS, gute Web Vitals, SEO-Fähigkeit und Typsicherheit über Datengrenzen. Wichtig ist nicht das Logo des Frameworks, sondern dass die Architektur Rollen, Performance und Auffindbarkeit gleichzeitig trägt.

Checkliste für ein B2B-Portal-Projekt

• Sind Rollen, Mandanten und Freigaben vor dem UI-Design geklärt?
• Werden Daten serverseitig geholt, nicht im Browser?
• Greifen Rechte bei jedem Zugriff, nicht nur im Menü?
• Gibt es ein Performance-Ziel (LCP/INP/CLS), nicht nur „soll schnell sein"?
• Ist der öffentliche Teil SEO-fähig (SSR, Metadaten, Sitemap, hreflang)?
• Sind Fremdsystem-Latenzen über Streaming abgefedert?
• Lässt sich ein erster Umfang in Wochen produktiv schneiden?

Häufige Fragen

Reicht nicht eine normale SPA? Für ein internes Tool ohne SEO-Anspruch oft ja. Sobald öffentliche Auffindbarkeit, harte Performance-Ziele und sichere serverseitige Datenzugriffe zusammenkommen, wird serverseitiges Rendering zur tragfähigeren Wahl.

Ist Next.js Pflicht? Nein. Aber die Anforderungen (SSR, Rechte serverseitig, Web Vitals, SEO) sind real. Next.js ist eine bewährte Antwort darauf, kein Dogma.

Was ist der häufigste Architekturfehler? Rechte über ausgeblendete UI statt über erzwungene Zugriffsprüfung. Schön, aber unsicher.

Wie groß ist ein erstes Portal-Release? Eine Rolle, ein Kernprozess, echte Daten, in Wochen produktiv — dann erweitern. Kein Big-Bang.

Fazit

Ein modernes B2B-Portal wird anders gebaut, weil es etwas anderes ist als eine Website: rollenbasierter, datengetriebener, sicherheitskritischer und trotzdem schnell und auffindbar. Server Components, Streaming und Core-Web-Vitals-Disziplin sind die Werkzeuge, die das gleichzeitig möglich machen — nicht das Design.

Weiterlesen

• Individuelle Softwareentwicklung: Custom oder Standard? — bevor das Portal gebaut wird: bauen oder kaufen?
• Penetration Test für Web-Anwendungen: Ablauf und Nutzen — die Sicherheitsseite eines datenführenden Portals.

Nächster Schritt

Sie planen ein Kundenportal oder eine datengetriebene B2B-App? Beginnen Sie mit einer kurzen Einschätzung Ihrer Anforderungen. Wir klären Rollen, Datenzugriff und ein realistisches erstes Release — bevor Code entsteht.

Quellen

• Next.js, App Router Documentation — nextjs.org
• React, React 19 — react.dev
• Google Search Central, Core Web Vitals and Google Search — developers.google.com
• web.dev, Web Vitals — web.dev