Server-Side Rendering (SSR)
Server-Side Rendering (SSR) ist eine Rendering -Strategie, bei der HTML auf dem Server erzeugt und als fertiges Dokument an den Browser gesendet wird. Im Gegensatz zu Client-Side Rendering (CSR), bei dem der Browser JavaScript ausführen muss, um Inhalte darzustellen, liefert SSR sofort sichtbaren Content. Das verbessert Indexierung , Largest Contentful Paint und die wahrgenommene Ladegeschwindigkeit erheblich.
Warum ist SSR für SEO relevant?
Suchmaschinen-Crawler können serverseitig gerenderte Seiten direkt lesen, ohne JavaScript ausführen zu müssen. Das verbessert die Indexierung und stellt sicher, dass Inhalte zuverlässig im Suchindex erscheinen. Auch AI-Crawler (GPTBot, ClaudeBot, PerplexityBot) profitieren von vorgerendertem HTML. Für Webapps mit SEO-Anforderungen ist SSR oft die bessere Wahl als reines CSR.
SSR vs. SSG vs. CSR – wann was?
SSR: HTML wird bei jeder Anfrage auf dem Server generiert. Ideal für dynamische Inhalte, die sich häufig ändern. Static Site Generation : HTML wird zur Build-Zeit generiert. Perfekt für Content-Seiten, Blogs, Glossare. CSR: HTML wird im Browser durch JavaScript erzeugt. Geeignet für interaktive Dashboards ohne SEO-Bedarf. Hybride Ansätze kombinieren SSR für initiale Requests mit CSR für Navigation – Angular Universal und Next.js unterstützen dieses Muster nativ.
SSR mit Angular Universal
Angular unterstützt SSR über Angular Universal (ab Angular 17: integriert als @angular/ssr). Der Server rendert die Angular-Komponenten zu HTML, sendet sie an den Client, wo die Anwendung per Hydration interaktiv wird. Vorteile: Schneller First Contentful Paint , bessere PageSpeed -Scores und zuverlässige Indexierung. Der Build-Prozess erzeugt sowohl Server- als auch Client-Bundles.
Performance-Überlegungen bei SSR
SSR verlagert Rechenaufwand auf den Server – bei hohem Traffic kann das zu erhöhter Serverlast führen. Caching von SSR-Responses (CDN, Reverse Proxy, In-Memory) ist entscheidend für die Performance. Auch Critical CSS -Inlining und optimiertes Lazy Loading verbessern die Time-to-Interactive nach dem initialen Server-Render.
Wie wir es einsetzen
Bei BTECH Solutions nutzen wir Angular Universal mit einer hybriden Strategie: Die btech-solutions.eu-Website kombiniert Static Site Generation (120+ vorgerenderte Seiten) mit SSR für dynamische Routen. Die Entscheidung treffen wir pro Route in app.routes.server.ts – Content-Seiten werden beim Build gerendert, personalisierte Bereiche per SSR. Für Kundenprojekte wie PMS-Systeme setzen wir SSR mit Caching auf Reverse-Proxy-Ebene ein, um Serverlast zu minimieren.