{"id":3571,"date":"2026-07-02T09:40:20","date_gmt":"2026-07-02T07:40:20","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=3571"},"modified":"2026-07-02T09:41:08","modified_gmt":"2026-07-02T07:41:08","slug":"server-side-rendering-in-angular","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular\/","title":{"rendered":"Server-Side Rendering in Angular \u2013 Booste deine User Experience"},"content":{"rendered":"<p data-start=\"301\" data-end=\"671\"><a href=\"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular-v21\/\"><em><strong>Click here for the english version of this blog post.<\/strong><\/em><\/a><\/p>\n<h2 data-start=\"301\" data-end=\"671\">Server-Side Rendering (SSR) in Angular 21: Schnellere Ladezeiten und besseres Nutzererlebnis<\/h2>\n<p data-start=\"301\" data-end=\"671\">Mit Angular v21 sind Server-Side Rendering (SSR), Hydration und zoneless Change Detection fester Bestandteil des Standard-Stacks geworden und r\u00fccken damit noch st\u00e4rker in den Fokus moderner Angular-Anwendungen. Wenn Du wissen willst, was Server Side Rendering in Angular bedeutet, warum es sinnvoll ist und welche M\u00f6glichkeiten Dir die aktuellen Angular-Versionen (ab v19 bis v21) rund um SSR, Prerendering und Hybrid Rendering bieten, bist Du hier genau richtig.<\/p>\n<p data-start=\"301\" data-end=\"671\">Dieser Artikel ist Teil des <a href=\"https:\/\/www.thecodecampus.de\/blog\/angular-guide-signals-und-hot-topics\/\">Angular Guides<\/a>, in dem wir aktuelle Features und wichtige Architekturthemen behandeln.<\/p>\n<h2 data-start=\"673\" data-end=\"883\">Was ist SSR in Angular und was bringt es uns?<\/h2>\n<p data-start=\"673\" data-end=\"883\">Standartm\u00e4\u00dfig werden Angular-Apps im Browser geladen, d. h. der Client l\u00e4dt die Anwendung, das JavaScript wird ausgef\u00fchrt und erst dann wird die UI aufgebaut. Das kann bei gro\u00dfen Apps oder langsamer Verbindung die erste Darstellung verz\u00f6gern.<br data-start=\"1156\" data-end=\"1159\" \/>Server-Side Rendering setzt genau hier an. Die Anwendung oder Teile davon werden bereits auf dem Server gerendert und als fertiges HTML an den Client geschickt. Der Browser erh\u00e4lt also direkt sichtbare Inhalte, noch bevor das JavaScript vollst\u00e4ndig geladen und ausgef\u00fchrt wurde. Danach \u00fcbernimmt Angular wie gewohnt die Steuerung.<\/p>\n<p data-start=\"673\" data-end=\"883\">Folgende Vorteile bekommen wir dadurch:<\/p>\n<ul data-start=\"1553\" data-end=\"1959\">\n<li data-start=\"1553\" data-end=\"1643\">\n<p data-start=\"1555\" data-end=\"1643\"><strong data-start=\"1555\" data-end=\"1587\">Schneller sichtbare Inhalte<\/strong>: Selbst bei gro\u00dfen Anwendungen sieht der Benutzer sehr schnell nach dem initialen Laden etwas auf dem Bildschirm.<\/p>\n<\/li>\n<li data-start=\"1644\" data-end=\"1789\">\n<p data-start=\"1646\" data-end=\"1789\"><strong data-start=\"1646\" data-end=\"1700\">Besseres Nutzererlebnis bei langsamen Verbindungen<\/strong>: Gerade auf mobilen Ger\u00e4ten kann SSR helfen, die wahrgenommene Ladezeit zu reduzieren, da der Benutzer Inhalte schon sieht und nicht bemerkt, dass Angular im Hintergrund noch am Laden ist.<\/p>\n<\/li>\n<li data-start=\"1790\" data-end=\"1959\">\n<p data-start=\"1792\" data-end=\"1959\"><b data-path-to-node=\"3,0\" data-index-in-node=\"0\">Bessere Ausgangslage f\u00fcr SEO &amp; Social Media:<\/b> Indexierung, Link-Vorschauen und Performance-Rankings funktionieren deutlich besser, da beim initialen Laden der Seite sofort fertiges HTML vorhanden ist.<\/p>\n<\/li>\n<li class=\"py-0 my-0 prose-p:pt-0 prose-p:mb-2 prose-p:my-0 [&amp;&gt;p]:pt-0 [&amp;&gt;p]:mb-2 [&amp;&gt;p]:my-0\">\n<p class=\"my-2 [&amp;+p]:mt-4 [&amp;_strong:has(+br)]:inline-block [&amp;_strong:has(+br)]:pb-2\"><strong>Grundlage f\u00fcr moderne Hybrid-Strategien<\/strong>: SSR l\u00e4sst sich in Angular gezielt mit reinem Client-Rendering und Prerendering (SSG) kombinieren, je nach Route und Anwendungsfall kann individuell gesteuert werden.<\/p>\n<\/li>\n<\/ul>\n<h2>Was ist der aktuelle Stand in Angular v21?<\/h2>\n<p data-start=\"2008\" data-end=\"2314\">In der Release-Ank\u00fcndigung von Angular v19 wurden vor allem drei Bereiche rund um SSR hervorgehoben: Route-Level Render Modes, Incremental Hydration und die Arbeit an einem zoneless Rendering-Ansatz. Seitdem wurden diese Funktionen mit Angular 20 und 21 weiter ausgebaut und sind heute ein zentraler Bestandteil des offiziellen Hybrid-Rendering-Modells.<\/p>\n<p data-start=\"2316\" data-end=\"2358\">Die wichtigsten Neuerungen und Weiterentwicklungen im \u00dcberblick:<\/p>\n<ul data-start=\"2359\" data-end=\"3055\">\n<li><strong data-start=\"2585\" data-end=\"2612\">Route-Level Render Mode \/ Hybrid Rendering<\/strong>: Seit Angular 19 bestimmt Du mit dem ServerRoute-Interface f\u00fcr jede Route, ob sie der Server rendert (SSR), der Build-Prozess prerendert oder der Client rendert (CSR).<\/li>\n<li data-start=\"2359\" data-end=\"2582\">\n<p data-start=\"2361\" data-end=\"2582\"><strong data-start=\"2383\" data-end=\"2408\">Incremental Hydration<\/strong>: Bereits in Angular 19 als Developer Preview eingef\u00fchrt, erlaubt sie das schrittweise Hydrieren einzelner Template-Bereiche basierend auf Triggern wie &#8220;on viewport&#8221; oder &#8220;on interaction&#8221;. In den nachfolgenden Versionen wurde dies, basierend auf den Deferrable Views (<code>@defer<\/code>), stable.<\/p>\n<\/li>\n<li data-start=\"2822\" data-end=\"3055\">\n<p data-start=\"2824\" data-end=\"3055\"><strong data-start=\"2824\" data-end=\"2844\">Zoneless Angular<\/strong>: Mit Angular 20 und 21 hat das Entwicklerteam die Unterst\u00fctzung daf\u00fcr, Angular ohne\u202fzone.js zu nutzen\u202fdeutlich vorangetrieben. In Angular 21 ist Zoneless Change Detection f\u00fcr neue Projekte der Standard, was auch f\u00fcr SSR-Szenarien eine bessere Performance-Basis und klarere Change-Detection-Semantik schafft.<\/p>\n<\/li>\n<\/ul>\n<p><a style=\"display: inline-block;\" href=\"https:\/\/www.thecodecampus.de\/schulungen\/angular\">\n<picture><source srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_anne_WP_big.png\" media=\"(min-width: 1024px)\" \/><\/picture> <picture><source srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_anne_WP_medium.png\" media=\"(min-width: 600px)\" \/><\/picture> <picture><img decoding=\"async\" class=\"alignnone size-full wp-image-38\" src=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_anne_WP_small.png\" alt=\"Angular Schulungen\" \/><\/picture> <\/a><\/p>\n<h2>Wie nutze ich Server-Side Rendering in meiner Angular Anwendung?<\/h2>\n<p>Mit der Angular CLI hast du zwei M\u00f6glichkeiten SSR in deiner Anwendung zu aktivieren. Wenn du mit <code>ng new<\/code> ein neues Angular Projekt aufsetzt, wirst du direkt gefragt, ob du Server-Side Redering nutzen m\u00f6chtest. Nat\u00fcrlich gibt es aber auch einen Befehl mit dem du SSR in deiner bestehenden Anwendung nachr\u00fcsten kannst: <code>ng add @angular\/ssr<\/code><\/p>\n<p>Dadurch bekommst du vier neue Dateien:<\/p>\n<ul>\n<li><code>server.ts<\/code>: Angular liefert dir hier einen vollwertigen kleinen Node.js-Webserver, basierend auf Express. Wenn ein Nutzer deine Seite aufruft, nimmt dieser Server die Anfrage entgegen, startet Angular im Hintergrund, l\u00e4sst die Seite rendern und schickt das fertige HTML zur\u00fcck an den Browser.<\/li>\n<li><code>src\/main.server.ts<\/code>: So wie die main.ts der Startpunkt f\u00fcr deine App ist, ist diese Datei das exakte Gegenst\u00fcck dazu f\u00fcr den Server. Sie sagt dem Node-Server, wie er deine Angular-App starten soll.<\/li>\n<li><code>src\/app\/app.config.server.ts<\/code>: Hier kannst du Konfigurationen und Provider festlegen, die nur den Server betreffen.<\/li>\n<li><code>src\/app\/app.routes.server.ts<\/code>: Diese Datei ist f\u00fcr das Server-Routing zust\u00e4ndig. Hier legst du fest, welche Seiten deiner Anwendung Server-Side oder Client-Side gerendert werden.<\/li>\n<\/ul>\n<h2 data-start=\"203\" data-end=\"295\">Render Modes auf Route-Level: Gezielte Kontrolle \u00fcber SSR, Prerendering und Client-Side Rendering<\/h2>\n<p data-start=\"297\" data-end=\"735\">Standardm\u00e4\u00dfig rendert Angular bei aktivierter Server-Side Rendering Unterst\u00fctzung alle Routen mit Parametern auf dem Server und prerendert statische Routen ohne Parameter. In Angular v21 ist dieser Prozess deutlich flexibler. Mit den sogenannten Route-Level Render Modes legst Du selbst fest, ob Angular eine Route auf dem Server, im Client oder bereits beim Build rendert.<\/p>\n<p data-start=\"297\" data-end=\"735\">In unserem Beispiel hat unsere Anwendung drei Seiten, f\u00fcr die wir in der <code>app.routes.server.ts<\/code> jeweils einen anderen <strong>Render Mode<\/strong> festgelegt haben:<\/p>\n<ul>\n<li data-start=\"297\" data-end=\"735\">Die About Page wird <strong>clientseitig<\/strong> gerendert (CSR), d. h. erst nachdem der Browser das Javascript geladen hat, baut Angular die Seite im Browser auf <span style=\"font-weight: 400;\">\u2192 <code>RenderMode.Client<\/code><\/span><\/li>\n<li data-start=\"297\" data-end=\"735\">Das Impressum wird <strong>prerendert<\/strong>, was bedeutet, dass Angular die Seite genau einmal beim Build der App rendert und sie in eine statische HTML-Datei verwandelt. Deshalb spricht man hier oft auch von Static Site Generation (SSG) <span style=\"font-weight: 400;\">\u2192 <code>RenderMode.Prerender<\/code><\/span><\/li>\n<li data-start=\"297\" data-end=\"735\">Alle anderen Seiten, in unserem Fall die Product Page, werden <strong>serverseitig<\/strong> gerendert (SSR). Hier wird jedes Mal, wenn die Route aufgerufen wird, die Componente neu auf dem Server gerendert und das fertige HTML an den Browser geschickt <span style=\"font-weight: 400;\">\u2192 <code>RenderMode.Server<\/code><\/span><\/li>\n<\/ul>\n<pre class=\"lang:default decode:true\">import { RenderMode, ServerRoute } from '@angular\/ssr';\r\n\r\nexport const serverRoutes: ServerRoute[] = [\r\n  {\r\n    path: 'about',\r\n    renderMode: RenderMode.Client,\r\n  },\r\n  {\r\n    path: 'imprint',\r\n    renderMode: RenderMode.Prerender,\r\n  },\r\n  {\r\n    path: '**',\r\n    renderMode: RenderMode.Server,\r\n  },\r\n];\r\n<\/pre>\n<p>Den Unterschied zwischen CSR und SSR k\u00f6nnen wir uns auch direkt anschauen, indem wir den Seitenquelltext der About Page und der Product Page vergleichen. Den Seitenquelltext deiner Angular Anwendung kannst du im Browser mit STR + U oder per Rechtklick im Kontextmen\u00fc \u00f6ffnen.<\/p>\n<p><a href=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2026\/03\/ssr-client-side-example.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3648 size-full\" src=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2026\/03\/ssr-client-side-example.png\" alt=\"Artikel SSR Beispiel Seitenquelltext Client-Side Rendering\" width=\"874\" height=\"246\" srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2026\/03\/ssr-client-side-example.png 874w, https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2026\/03\/ssr-client-side-example-300x84.png 300w, https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2026\/03\/ssr-client-side-example-768x216.png 768w\" sizes=\"auto, (max-width: 874px) 100vw, 874px\" \/><\/a><\/p>\n<p>Das ist der Seitenquelltext der About Page. Hier sehen wir, dass im body nur <code><span class=\"html-tag\">&lt;app-root&gt;<\/span><span class=\"html-tag\">&lt;\/app-root&gt;<\/span><\/code> steht und im Quelltext kein HTML vorhanden ist. Alles was wir in der About Page sehen, wird erst nach dem Laden des Javascript im Browser gerendert.<\/p>\n<p><a href=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2026\/03\/ssr-server-side-example.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3650 size-large\" src=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2026\/03\/ssr-server-side-example-1024x785.png\" alt=\"Artikel SSR Beispiel Seitenquelltext Server-Side Rendering\" width=\"1024\" height=\"785\" srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2026\/03\/ssr-server-side-example-1024x785.png 1024w, https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2026\/03\/ssr-server-side-example-300x230.png 300w, https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2026\/03\/ssr-server-side-example-768x589.png 768w, https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2026\/03\/ssr-server-side-example.png 1150w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<p>Im Gegensatz dazu, k\u00f6nnen wir beim Seitenquelltext der Product Page durchaus HTML und auch CSS sehen: <code>&lt;h1&gt;Angular SSR Demo&lt;\/h1&gt;<\/code>. Hier hat das Rendern der Server \u00fcbernommen und der Browser kann sofort den Inhalt der Product Page anzeigen, ohne auf das Laden der Javascript-Datei zu warten.<\/p>\n<h2>Was ist Hydration?<\/h2>\n<p><strong>Hydration<\/strong> bezeichnet den Prozess, bei dem Angular seine interne Logik und Event-Listener mit dem bereits sichtbaren, vom Server generierten HTML verkn\u00fcpft. Dabei wird zuerst die DOM-Struktur mit den Angular Komponenten zusammengef\u00fchrt und danach die Event-Handler registriert. Das hei\u00dft aber auch, dass es ein Zeitfenster gibt, indem der Benutzer die UI schon sehen kann, aber damit noch keine Logik verbunden ist. Meist sind das nur Millisekunden, aber bei einer schlechten Internetverbindung k\u00f6nnen es auch Sekunden werden.<\/p>\n<p>Nat\u00fcrlich gibt uns Angular hier aber auch ein Hilfsmittel an die Hand: <code>withEventReplay()<\/code>.<br \/>\nDas ist eine Funktion die wir in der <code>app.config.ts<\/code> beim Konfigurieren der Hydration angeben k\u00f6nnen.<\/p>\n<pre class=\"lang:default decode:true\">import { provideClientHydration, withEventReplay } from '@angular\/platform-browser';\r\n\r\nexport const appConfig: ApplicationConfig = {\r\n  providers: [\r\n    provideClientHydration(withEventReplay()),\r\n  ],\r\n};\r\n<\/pre>\n<p>Damit f\u00e4ngt Angular alle Interaktionen des Benutzers ab und packt sie in eine Art Warteschlange. Ist das Javascript fertig geladen, werden automatisch nacheinander alle Interaktionen ausgef\u00fchrt. Somit gehen keine Interaktionen verloren.<\/p>\n<p><a href=\"https:\/\/angular.dev\/guide\/hydration\">Mehr Informationen zu Hydration findest du in der Angular Dokumentation.<\/a><\/p>\n<h2>Incremental Hydration: Optimierte Ladezeiten durch kontrollierte Komponenten-Hydration<\/h2>\n<p data-start=\"273\" data-end=\"605\"><strong>Incremental Hydration<\/strong>, seit Angular 19 als Developer Preview eingef\u00fchrt, l\u00f6st ein zentrales SSR-Problem: Bei normaler Full-App-Hydration wird die gesamte serverseitig gerenderte Seite sofort mit JavaScript interaktiv gemacht. Dies betrifft auch Bereiche, die der Nutzer gar nicht sofort braucht. Das f\u00fchrt zu unn\u00f6tig gro\u00dfen initialen Bundles, l\u00e4ngeren Ladezeiten und blockiert den Browser \u2013 was sich negativ auf Core Web Vitals wie INP (Interaction to Next Paint) und TBT (Total Blocking Time) auswirkt. Incremental Hydration hydriert nur die ben\u00f6tigten Teile zur richtigen Zeit, w\u00e4hrend der Rest statisch bleibt und \u00fcber Event Replay sp\u00e4ter nachgeholt wird.<\/p>\n<p data-start=\"273\" data-end=\"605\">Damit wir Incremental Hydration nutzen k\u00f6nnen, tauschen wir in der <code>app.config.ts<\/code> <code>withEventReplay()<\/code> mit <code>withIncrementalHydration()<\/code> aus. Da Incremental Hydration auf dem Event Replay aufbaut, werden auch weiterhin alle Interaktionen des Benutzers abgefangen.<\/p>\n<pre class=\"lang:default decode:true\">import { provideClientHydration, withEventReplay } from '@angular\/platform-browser';\r\n\r\nexport const appConfig: ApplicationConfig = {\r\n  providers: [\r\n    provideClientHydration(<strong>withIncrementalHydration()<\/strong>),\r\n  ],\r\n};\r\n<\/pre>\n<h3>Wie benutzt man Incremental Hydration?<\/h3>\n<p>Nachdem wir Angular gesagt haben, dass wir Incremental Hydration verwenden wollen, k\u00f6nnen wir in unserer Product Page jetzt <strong>Deferrable Views<\/strong> verwenden, um spezifisch anzugeben, wann welche Teile unserer UI hydriert werden sollen. <a href=\"https:\/\/angular.dev\/guide\/templates\/defer\">Hier findest du mehr Informationen zu Deferrable Views<\/a>.<\/p>\n<pre class=\"lang:default decode:true\">@defer (hydrate on hover) {\r\n  &lt;div class=\"product-card deferred\"&gt; \r\n    &lt;div class=\"product-image\"&gt;\ud83d\udcf1&lt;\/div&gt;\r\n    &lt;h4&gt;Smartphone X&lt;\/h4&gt;\r\n    &lt;p class=\"price\"&gt;899,99 \u20ac&lt;\/p&gt;\r\n    &lt;button&gt;Buy&lt;\/button&gt;\r\n  &lt;\/div&gt;\r\n}<\/pre>\n<p>Innerhalb von\u00a0<code>@defer<\/code>-Bl\u00f6cken definierst Du mit <code>hydrate<\/code> den Zeitpunkt, wann Angular den Inhalt hydrieren soll:<\/p>\n<ul>\n<li><code>hydrate on<\/code>: Hiermit kannst du auf verschiedene vordefinierte Trigger zugreifen. Es gibt z.B.\n<ul>\n<li><code>viewport<\/code> &#8211; triggert, wenn der Content auf dem Screen sichtbar wird<\/li>\n<li><code>interaction<\/code> &#8211; triggert, wenn der Benutzer mit dem Content interagiert<\/li>\n<li><code>hover<\/code> &#8211; triggert, wenn der Benutzer \u00fcber dem Content hovered<\/li>\n<\/ul>\n<\/li>\n<li><code>hydrate when<\/code>: Das l\u00e4sst dich einen eigenen Trigger definieren, bei welcher Bedingung der Inhalt hydriert werden soll<\/li>\n<li><code>hydrate never<\/code> : Damit kannst du die Hydration komplett ausschalten. Der Inhalt ist beim initial Load statisch.<\/li>\n<\/ul>\n<p><strong>Wichtig<\/strong>: Hydration optimiert nur den Initial Load der Anwendung, d. h. die <code>hydrate<\/code>-Trigger greifen nur, wenn die Seite das erste Mal geladen wird.<\/p>\n<p>Du kannst die <code>hydrate<\/code>-Trigger aber auch mit den regul\u00e4ren Triggern der <strong>Deferrable Views<\/strong> kombinieren:<\/p>\n<pre class=\"lang:default decode:true\">@defer (on idle; hydrate on interaction) {\r\n  \/\/ ...\r\n}<\/pre>\n<p>In unserem Beispiel verwendet Angular beim Initial Load der Seite <code>hydrate on interaction<\/code>. Bei jedem nachfolgenden Laden bzw. Render der Seite durch den Client wird <code>on idle<\/code> angewendet. Beispielsweise wenn det Benutzer auf einen Router-Link klickt, der eine Seite mit dieser Komponente l\u00e4dt.<\/p>\n<p><a href=\"https:\/\/angular.dev\/guide\/incremental-hydration\">Weitere vordefinierte Trigger und Informationen zu Incremental Hydration findest du in der offiziellen Dokumentation.<\/a><\/p>\n<h2>Erfahrung ist der beste Lehrer: Hands-On f\u00fcr SSR<\/h2>\n<p>Bist Du bereit, die Theorie in die Praxis umzusetzen? Alle Beispiele die wir im Artikel gezeigt und besprochen haben, sind interaktiv in unserem Stackblitz vorhanden.<\/p>\n<p><iframe height=\"400\" style=\"width: 100%;\" src=\"https:\/\/stackblitz.com\/edit\/stackblitz-starters-d3dfdntv?embed=1&amp;file=src%2Fapp%2Fproducts%2Fproducts.html\" scrolling=\"no\" data-mce-fragment=\"1\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<h2>Mit welchen Themen geht es weiter?<\/h2>\n<p>Ein weiteres Hot Topic von Angular aind aktuell die Signal Forms! Einen ersten Artikel haben wir dazu schon ver\u00f6ffentlicht: <a href=\"https:\/\/www.thecodecampus.de\/blog\/angular-signal-forms-schnell-reactive-formulare\/\">Signal Forms \u2013 Schnell reaktive Formulare in Angular<\/a><br \/>\nDieser bietet einen Einstieg und \u00dcberblick zu den Signal Forms und ihrer Verwendung und was sie so bahnbrechend machen.<\/p>\n<p>Auch in den n\u00e4chsten Artikeln wird es um die Signal Forms gehen, wo wir bestimmte Themen noch genauer betrachten werden.<\/p>\n<h2 id=\"Termin\u00fcbersicht\">Termin\u00fcbersicht der n\u00e4chsten Angular Schulungen<\/h2>\n<p><iframe height=\"600\" style=\"width: 100%;\" src=\"https:\/\/thecodecampus.de\/kalender\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Standartm\u00e4\u00dfig werden Angular-Apps im Browser geladen, d. h. der Client l\u00e4dt die Anwendung, das JavaScript wird ausgef\u00fchrt und erst dann wird die UI aufgebaut. Das kann bei gro\u00dfen Apps oder langsamer Verbindung die erste Darstellung verz\u00f6gern.<br \/>\nServer-Side Rendering setzt genau hier an. Die Anwendung oder Teile davon werden [&#8230;]<\/p>\n","protected":false},"author":32,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73,185,190,198,163,151,162,146,200],"tags":[112,187,192,195,181,37,175,197,196],"class_list":["post-3571","post","type-post","status-publish","format-standard","hentry","category-angular","category-angular-19","category-angular-20","category-angular-21","category-angular-performance-optimization","category-optimization","category-performance","category-server","category-server-side-rendering","tag-angular","tag-angular-19","tag-angular-20","tag-angular-21","tag-angular-performance-optimization","tag-performance","tag-reactive-programming","tag-server-side-rendering","tag-ssr"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Server-Side Rendering in Angular \u2013 Booste deine User Experience<\/title>\n<meta name=\"description\" content=\"Server Side Rendering in Angular 21: Optimiere Webseiten f\u00fcr ein besseres Nutzererlebnis mit augenblicklichen Ladezeiten\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Server-Side Rendering in Angular \u2013 Booste deine User Experience\" \/>\n<meta property=\"og:description\" content=\"Server Side Rendering in Angular 21: Optimiere Webseiten f\u00fcr ein besseres Nutzererlebnis mit augenblicklichen Ladezeiten\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development tips and tricks - theCodeCampus Blog\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-02T07:40:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-02T07:41:08+00:00\" \/>\n<meta name=\"author\" content=\"Anne Naumann\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anne Naumann\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/server-side-rendering-in-angular\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/server-side-rendering-in-angular\\\/\"},\"author\":{\"name\":\"Anne Naumann\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/d5533850d6a4d364e194500c24c0021a\"},\"headline\":\"Server-Side Rendering in Angular \u2013 Booste deine User Experience\",\"datePublished\":\"2026-07-02T07:40:20+00:00\",\"dateModified\":\"2026-07-02T07:41:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/server-side-rendering-in-angular\\\/\"},\"wordCount\":1618,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/server-side-rendering-in-angular\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/angular-schulungen_anne_WP_small.png\",\"keywords\":[\"Angular\",\"Angular 19\",\"Angular 20\",\"Angular 21\",\"Angular Performance Optimization\",\"Performance\",\"Reactive Programming\",\"Server Side Rendering\",\"SSR\"],\"articleSection\":[\"Angular\",\"Angular 19\",\"Angular 20\",\"Angular 21\",\"Angular Performance Optimization\",\"Optimization\",\"Performance\",\"Server\",\"Server Side Rendering\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/server-side-rendering-in-angular\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/server-side-rendering-in-angular\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/server-side-rendering-in-angular\\\/\",\"name\":\"Server-Side Rendering in Angular \u2013 Booste deine User Experience\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/server-side-rendering-in-angular\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/server-side-rendering-in-angular\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/angular-schulungen_anne_WP_small.png\",\"datePublished\":\"2026-07-02T07:40:20+00:00\",\"dateModified\":\"2026-07-02T07:41:08+00:00\",\"description\":\"Server Side Rendering in Angular 21: Optimiere Webseiten f\u00fcr ein besseres Nutzererlebnis mit augenblicklichen Ladezeiten\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/server-side-rendering-in-angular\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/server-side-rendering-in-angular\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/server-side-rendering-in-angular\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/angular-schulungen_anne_WP_small.png\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/angular-schulungen_anne_WP_small.png\",\"width\":720,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/server-side-rendering-in-angular\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Server-Side Rendering in Angular \u2013 Booste deine User Experience\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"name\":\"Web Development tips and tricks - theCodeCampus Blog\",\"description\":\"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\",\"name\":\"theCodeCampus\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"width\":156,\"height\":156,\"caption\":\"theCodeCampus\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/d5533850d6a4d364e194500c24c0021a\",\"name\":\"Anne Naumann\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/anne-naumann-tcc-author-96x96.webp\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/anne-naumann-tcc-author-96x96.webp\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/anne-naumann-tcc-author-96x96.webp\",\"caption\":\"Anne Naumann\"},\"description\":\"Hi, I'm a web developer with a focus on frontend technologies, especially Angular. I also have a lot of fun when it comes to UI\\\/UX and when I need to make room for new books on my bookshelves.\",\"sameAs\":[\"https:\\\/\\\/thecodecampus.de\\\/ueber-uns\\\/trainer\\\/anne-naumann\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/anne-naumann-1ab635307\\\/\"],\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/author\\\/anaumann\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Server-Side Rendering in Angular \u2013 Booste deine User Experience","description":"Server Side Rendering in Angular 21: Optimiere Webseiten f\u00fcr ein besseres Nutzererlebnis mit augenblicklichen Ladezeiten","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular\/","og_locale":"en_US","og_type":"article","og_title":"Server-Side Rendering in Angular \u2013 Booste deine User Experience","og_description":"Server Side Rendering in Angular 21: Optimiere Webseiten f\u00fcr ein besseres Nutzererlebnis mit augenblicklichen Ladezeiten","og_url":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular\/","og_site_name":"Web Development tips and tricks - theCodeCampus Blog","article_published_time":"2026-07-02T07:40:20+00:00","article_modified_time":"2026-07-02T07:41:08+00:00","author":"Anne Naumann","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Anne Naumann","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular\/#article","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular\/"},"author":{"name":"Anne Naumann","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/d5533850d6a4d364e194500c24c0021a"},"headline":"Server-Side Rendering in Angular \u2013 Booste deine User Experience","datePublished":"2026-07-02T07:40:20+00:00","dateModified":"2026-07-02T07:41:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular\/"},"wordCount":1618,"commentCount":0,"publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_anne_WP_small.png","keywords":["Angular","Angular 19","Angular 20","Angular 21","Angular Performance Optimization","Performance","Reactive Programming","Server Side Rendering","SSR"],"articleSection":["Angular","Angular 19","Angular 20","Angular 21","Angular Performance Optimization","Optimization","Performance","Server","Server Side Rendering"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular\/","url":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular\/","name":"Server-Side Rendering in Angular \u2013 Booste deine User Experience","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_anne_WP_small.png","datePublished":"2026-07-02T07:40:20+00:00","dateModified":"2026-07-02T07:41:08+00:00","description":"Server Side Rendering in Angular 21: Optimiere Webseiten f\u00fcr ein besseres Nutzererlebnis mit augenblicklichen Ladezeiten","breadcrumb":{"@id":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular\/#primaryimage","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_anne_WP_small.png","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_anne_WP_small.png","width":720,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thecodecampus.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Server-Side Rendering in Angular \u2013 Booste deine User Experience"}]},{"@type":"WebSite","@id":"https:\/\/www.thecodecampus.de\/blog\/#website","url":"https:\/\/www.thecodecampus.de\/blog\/","name":"Web Development tips and tricks - theCodeCampus Blog","description":"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.","publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.thecodecampus.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.thecodecampus.de\/blog\/#organization","name":"theCodeCampus","url":"https:\/\/www.thecodecampus.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","width":156,"height":156,"caption":"theCodeCampus"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/d5533850d6a4d364e194500c24c0021a","name":"Anne Naumann","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/11\/anne-naumann-tcc-author-96x96.webp","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/11\/anne-naumann-tcc-author-96x96.webp","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/11\/anne-naumann-tcc-author-96x96.webp","caption":"Anne Naumann"},"description":"Hi, I'm a web developer with a focus on frontend technologies, especially Angular. I also have a lot of fun when it comes to UI\/UX and when I need to make room for new books on my bookshelves.","sameAs":["https:\/\/thecodecampus.de\/ueber-uns\/trainer\/anne-naumann","https:\/\/www.linkedin.com\/in\/anne-naumann-1ab635307\/"],"url":"https:\/\/www.thecodecampus.de\/blog\/author\/anaumann\/"}]}},"_links":{"self":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/3571","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/comments?post=3571"}],"version-history":[{"count":22,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/3571\/revisions"}],"predecessor-version":[{"id":3759,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/3571\/revisions\/3759"}],"wp:attachment":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/media?parent=3571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/categories?post=3571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/tags?post=3571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}