{"id":3730,"date":"2026-07-02T09:40:45","date_gmt":"2026-07-02T07:40:45","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=3730"},"modified":"2026-07-02T09:40:45","modified_gmt":"2026-07-02T07:40:45","slug":"server-side-rendering-in-angular-v21","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular-v21\/","title":{"rendered":"Server-Side Rendering in Angular \u2013 Boost Your User Experience"},"content":{"rendered":"<p><a href=\"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular\/\"><em><strong>Klicke hier, f\u00fcr die deutsche Version des Artikels.<\/strong><\/em><\/a><\/p>\n<h2>Server-Side Rendering (SSR) in Angular 21: Faster Load Times and a Better User Experience<\/h2>\n<p>With Angular v21, server-side rendering (SSR), hydration, and zoneless change detection have become an integral part of the standard stack, making them even more central to modern Angular applications. If you want to know what server-side rendering means in Angular, why it makes sense, and what possibilities the current Angular versions (from v19 to v21) offer you in terms of SSR, prerendering, and hybrid rendering, you\u2019ve come to the right place.<\/p>\n<p>This article is part of <a href=\"https:\/\/www.thecodecampus.de\/blog\/angular-guide-signals-and-hot-topics\/\">the Angular Guide<\/a>, where we cover current features and important architectural topics.<\/p>\n<p>If you want to learn more about the new Resource API and Angular in detail, visit one of our Angular courses:<\/p>\n<ul>\n<li>Angular Basic Training: <a href=\"https:\/\/www.thecodecampus.de\/schulungen\/angular\">https:\/\/www.thecodecampus.de\/schulungen\/angular<\/a><\/li>\n<li>Advanced Training: <a href=\"https:\/\/www.thecodecampus.de\/schulungen\/angular-advanced\">https:\/\/www.thecodecampus.de\/schulungen\/angular-advanced<\/a><\/li>\n<\/ul>\n<h2>What is SSR in Angular, and what are its benefits?<\/h2>\n<p>By default, Angular apps load in the browser. This means the client loads the application, runs the JavaScript, and only then builds the UI. This process can delay the initial rendering for large apps or on slow connections.<br \/>\nThis is exactly where server-side rendering (SSR) comes in. The server renders the application, or parts of it, and sends finished HTML to the client. The browser thus receives content that users can see immediately, even before the JavaScript has fully loaded and executed. After that, Angular takes control as usual.<\/p>\n<p>This provides us with the following benefits:<\/p>\n<ul>\n<li><b data-path-to-node=\"7,0,0\" data-index-in-node=\"0\">Content appears faster:<\/b> Even with large applications, users see something on the screen almost instantly after the initial load.<\/li>\n<li><strong>Better user experience on slow connections<\/strong>: Especially on mobile devices, SSR can help reduce perceived load times, as users see content right away and don\u2019t notice that Angular is still loading in the background.<\/li>\n<li><b data-path-to-node=\"7,2,0\" data-index-in-node=\"0\">Stronger foundation for SEO &amp; social media:<\/b> Indexing, link previews, and performance rankings work significantly better because the server provides fully rendered HTML immediately upon the page\u2019s initial load.<\/li>\n<li><b data-path-to-node=\"7,3,0\" data-index-in-node=\"0\">Basis for modern hybrid strategies:<\/b> You can specifically combine SSR with pure client-side rendering and prerendering (SSG); you control these modes individually depending on the route and use case.<\/li>\n<\/ul>\n<h2>What is the current status in Angular v21?<\/h2>\n<p>The release announcement for Angular v19 highlighted three key areas: route-level render modes, incremental hydration, and a zoneless rendering approach. Since then, the Angular team has further expanded these features in versions 20 and 21, making them a central component of the official hybrid rendering model.<\/p>\n<p>An overview of the most important new features and enhancements:<\/p>\n<ul>\n<li><strong>Route-Level Render Mode \/ Hybrid Rendering<\/strong>: Starting with Angular 19, you use the ServerRoute interface to specify how Angular handles each route: via the server (SSR), the build process (Prerender), or the client (CSR).<\/li>\n<li><strong>Incremental Hydration<\/strong>: Introduced in Angular 19 as a Developer Preview, it allows for the incremental hydration of individual template sections based on triggers such as \u201con viewport\u201d or \u201con interaction.\u201d In subsequent versions, this became stable based on Deferrable Views (<code>@defer<\/code>).<\/li>\n<li><strong>Zoneless Angular<\/strong>: With Angular 20 and 21, the development team has significantly advanced support for using Angular without zone.js. In Angular 21, Zoneless Change Detection is the default for new projects, which also creates a better performance foundation and clearer change detection semantics for SSR scenarios.<\/li>\n<\/ul>\n<h2>How do I use server-side rendering in my Angular application?<\/h2>\n<p>With the Angular CLI, you have two options for enabling SSR in your application. When you create a new Angular project using <code>ng new<\/code>, you\u2019ll be asked right away if you want to use server-side rendering. Of course, there\u2019s also a command you can use to add SSR to your existing application: <code>ng add @angular\/ssr<\/code><\/p>\n<p>This will generate four new files:<\/p>\n<ul>\n<li><code>server.ts<\/code>: Angular provides you with a fully-fledged, lightweight Node.js web server based on Express. When a user visits your page, this server receives the request, launches Angular in the background, renders the page, and sends the finished HTML back to the browser.<\/li>\n<li><code>src\/main.server.ts<\/code>: Just as main.ts is the starting point for your app, this file is its exact counterpart for the server. It tells the Node server how to start your Angular app.<\/li>\n<li><code>src\/app\/app.config.server.ts<\/code>: Here you can define configurations and providers that apply only to the server.<\/li>\n<li><code>src\/app\/app.routes.server.ts<\/code>: This file handles server routing. Here you specify which pages of your application are rendered server-side or client-side.<\/li>\n<\/ul>\n<h2>Render Modes at the Route Level: Precise Control Over SSR, Prerendering, and Client-Side Rendering<\/h2>\n<p>By default, Angular renders all routes with parameters on the server and pre-renders static routes without parameters once you enable server-side rendering. Angular v21 makes this process significantly more flexible. Using route-level render modes, you can specify whether Angular renders a route on the server, in the client, or during the build process.<\/p>\n<p>In our example, we have defined a different <strong>render mode<\/strong> for each of our three pages in <code>app.routes.server.ts<\/code>:<\/p>\n<ul>\n<li>The About page uses <strong>client-side rendering<\/strong> (CSR): Angular builds the page in the browser only after the browser finishes loading the JavaScript \u2192 <code>RenderMode.Client<\/code><\/li>\n<li>Angular <strong>prerenders<\/strong> the Legal Notice page: The framework renders the page exactly once during the app build and converts it into a static HTML file. Developers often call this Static Site Generation (SSG)\u2192 <code>RenderMode.Prerender<\/code><\/li>\n<li>The <strong>server renders<\/strong> all other pages (SSR), such as the Product Page: Every time a user calls the route, the server re-renders the component and sends the finished HTML to the browser \u2192 <code>RenderMode.Server<\/code><span style=\"font-weight: 400;\"><code><\/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>We can also see the difference between CSR and SSR directly by comparing the page source code of the About page and the Product page. You can view the page source code of your Angular application in the browser by pressing Ctrl + U or by right-clicking to open the context menu.<\/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>This is the source code for the About page. Here we can see that the body only contains <code>&lt;app-root&gt;&lt;\/app-root&gt;<\/code> and there is no HTML in the source code. Everything we see on the About page is rendered in the browser only after the JavaScript has loaded.<\/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>In contrast, we can clearly see HTML and CSS in the source code of the product page: <code>&lt;h1&gt;Angular SSR Demo&lt;\/h1&gt;<\/code>. In this case, the server handles the rendering, and the browser can display the content of the product page immediately without waiting for the JavaScript file to load.<\/p>\n<h2>What is hydration?<\/h2>\n<p><strong>Hydration<\/strong> refers to the process by which Angular links its internal logic and event listeners to the server-generated HTML that is already visible. First, the DOM structure is merged with the Angular components, and then the event handlers are registered. However, this also means there is a brief window of time during which the user can already see the UI, but no logic is yet associated with it. Usually, this is only a matter of milliseconds, but with a poor internet connection, it can last for seconds.<\/p>\n<p>Of course, Angular provides us with a tool for this: <code>withEventReplay()<\/code>.<br \/>\nThis is a function we can specify in <code>app.config.ts<\/code> when configuring hydration.<\/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>This way, Angular captures all user interactions and places them in a queue. Once the JavaScript has finished loading, all interactions are automatically executed one after the other. This ensures that no interactions are lost.<\/p>\n<p><a href=\"https:\/\/angular.dev\/guide\/hydration\">You can find more information about Hydration in the Angular documentation.<\/a><\/p>\n<h2>Incremental Hydration: Optimized loading times through controlled component hydration<\/h2>\n<p><strong>Incremental Hydration<\/strong>, introduced as a Developer Preview in Angular 19, solves a key SSR problem: With standard full-app hydration, the entire server-rendered page is immediately made interactive with JavaScript. This also affects areas that the user doesn\u2019t need right away. This leads to unnecessarily large initial bundles, longer load times, and blocks the browser\u2014which negatively impacts Core Web Vitals such as INP (Interaction to Next Paint) and TBT (Total Blocking Time). Incremental Hydration hydrates only the necessary parts at the right time, while the rest remains static and is loaded later via Event Replay.<\/p>\n<p>To use Incremental Hydration, we replace <code>withEventReplay()<\/code> with <code>withIncrementalHydration()<\/code> in <code>app.config.ts<\/code>. Since Incremental Hydration builds on Event Replay, all user interactions will continue to be captured.<\/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>How do you use incremental hydration?<\/h3>\n<p>Now that we\u2019ve told Angular that we want to use incremental hydration, we can use <strong>deferrable views<\/strong> on our product page to specify exactly when each part of our UI should be hydrated. <a href=\"https:\/\/angular.dev\/guide\/templates\/defer\">You can find more information about deferrable views here.<\/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>Within <code>@defer<\/code> blocks, you use <code>hydrate<\/code> to define when Angular should hydrate the content:<\/p>\n<ul>\n<li><code>hydrate on<\/code>: This allows you to access various predefined triggers. For example:\n<ul>\n<li><code>viewport<\/code> \u2013 triggers when the content becomes visible on the screen<\/li>\n<li><code>interaction<\/code> \u2013 triggers when the user interacts with the content<\/li>\n<li><code>hover<\/code> \u2013 triggers when the user hovers over the content<\/li>\n<\/ul>\n<\/li>\n<li><code>hydrate when<\/code>: This allows you to define your own trigger specifying the condition under which the content should be hydrated<\/li>\n<li><code>hydrate never<\/code>: This allows you to completely disable hydration. The content remains static during the initial load.<\/li>\n<\/ul>\n<p><strong>Important<\/strong>: Hydration only optimizes the initial load of the application; in other words, the <code>hydrate<\/code> triggers only take effect when the page is loaded for the first time.<\/p>\n<p>However, you can also combine the <code>hydrate<\/code> triggers with the regular triggers of <strong>Deferrable Views<\/strong>:<\/p>\n<pre class=\"lang:default decode:true\">@defer (on idle; hydrate on interaction) {\r\n  \/\/ ...\r\n}<\/pre>\n<p>In our example, Angular uses <code>hydrate on interaction<\/code> during the initial page load. On every subsequent page load or render by the client, <code>on idle<\/code> is used. For example, when the user clicks a router link that loads a page containing this component.<\/p>\n<p><a href=\"https:\/\/angular.dev\/guide\/incremental-hydration\">You can find additional predefined triggers and information about incremental hydration in the official documentation.<\/a><\/p>\n<h2>Experience is the best teacher: Hands-On for SSR<\/h2>\n<p>Are you ready to put theory into practice? All the examples we\u2019ve shown and discussed in this article are available as interactive projects on Stackblitz.<\/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>What topics will we cover next?<\/h2>\n<p>Another hot topic in Angular right now is Signal Forms! We\u2019ve already published an introductory article on the subject: <a class=\"row-title\" href=\"https:\/\/www.thecodecampus.de\/blog\/angular-signal-forms-quick-reactive-forms\/\" aria-label=\"\u201cSignal Forms \u2013 Quickly create Reactive Forms in Angular\u201d (Edit)\">Signal Forms \u2013 Quickly create Reactive Forms in Angular<\/a><br \/>\nThis article provides an introduction and overview of Signal Forms, how to use them, and what makes them so groundbreaking.<\/p>\n<p>Future articles will also focus on Signal Forms, where we\u2019ll take a closer look at specific topics.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Klicke hier, f\u00fcr die deutsche Version des Artikels. Server-Side Rendering (SSR) in Angular 21: Faster Load Times and a Better User Experience With Angular v21, server-side rendering (SSR), hydration, and zoneless change detection have become an integral part of the standard stack, making them even more central to modern Angular applications. If you want to [&#8230;]<br \/><a class=\"meta-big\" href=\"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular-v21\/\"> READ MORE<\/a><\/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-3730","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 Boost Your User Experience<\/title>\n<meta name=\"description\" content=\"Server-Side Rendering in Angular 21: Optimize Websites for a Better User Experience with Instant Load Times\" \/>\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-v21\/\" \/>\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 Boost Your User Experience\" \/>\n<meta property=\"og:description\" content=\"Server-Side Rendering in Angular 21: Optimize Websites for a Better User Experience with Instant Load Times\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular-v21\/\" \/>\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:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2026\/03\/ssr-client-side-example.png\" \/>\n\t<meta property=\"og:image:width\" content=\"874\" \/>\n\t<meta property=\"og:image:height\" content=\"246\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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-v21\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/server-side-rendering-in-angular-v21\\\/\"},\"author\":{\"name\":\"Anne Naumann\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/d5533850d6a4d364e194500c24c0021a\"},\"headline\":\"Server-Side Rendering in Angular \u2013 Boost Your User Experience\",\"datePublished\":\"2026-07-02T07:40:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/server-side-rendering-in-angular-v21\\\/\"},\"wordCount\":1650,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/server-side-rendering-in-angular-v21\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/ssr-client-side-example.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-v21\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/server-side-rendering-in-angular-v21\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/server-side-rendering-in-angular-v21\\\/\",\"name\":\"Server-Side Rendering in Angular \u2013 Boost Your User Experience\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/server-side-rendering-in-angular-v21\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/server-side-rendering-in-angular-v21\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/ssr-client-side-example.png\",\"datePublished\":\"2026-07-02T07:40:45+00:00\",\"description\":\"Server-Side Rendering in Angular 21: Optimize Websites for a Better User Experience with Instant Load Times\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/server-side-rendering-in-angular-v21\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/server-side-rendering-in-angular-v21\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/server-side-rendering-in-angular-v21\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/ssr-client-side-example.png\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/ssr-client-side-example.png\",\"width\":874,\"height\":246,\"caption\":\"Artikel SSR Beispiel Seitenquelltext Client-Side Rendering\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/server-side-rendering-in-angular-v21\\\/#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 Boost Your 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 Boost Your User Experience","description":"Server-Side Rendering in Angular 21: Optimize Websites for a Better User Experience with Instant Load Times","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-v21\/","og_locale":"en_US","og_type":"article","og_title":"Server-Side Rendering in Angular \u2013 Boost Your User Experience","og_description":"Server-Side Rendering in Angular 21: Optimize Websites for a Better User Experience with Instant Load Times","og_url":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular-v21\/","og_site_name":"Web Development tips and tricks - theCodeCampus Blog","article_published_time":"2026-07-02T07:40:45+00:00","og_image":[{"width":874,"height":246,"url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2026\/03\/ssr-client-side-example.png","type":"image\/png"}],"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-v21\/#article","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular-v21\/"},"author":{"name":"Anne Naumann","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/d5533850d6a4d364e194500c24c0021a"},"headline":"Server-Side Rendering in Angular \u2013 Boost Your User Experience","datePublished":"2026-07-02T07:40:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular-v21\/"},"wordCount":1650,"commentCount":0,"publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular-v21\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2026\/03\/ssr-client-side-example.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-v21\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular-v21\/","url":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular-v21\/","name":"Server-Side Rendering in Angular \u2013 Boost Your User Experience","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular-v21\/#primaryimage"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular-v21\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2026\/03\/ssr-client-side-example.png","datePublished":"2026-07-02T07:40:45+00:00","description":"Server-Side Rendering in Angular 21: Optimize Websites for a Better User Experience with Instant Load Times","breadcrumb":{"@id":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular-v21\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular-v21\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular-v21\/#primaryimage","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2026\/03\/ssr-client-side-example.png","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2026\/03\/ssr-client-side-example.png","width":874,"height":246,"caption":"Artikel SSR Beispiel Seitenquelltext Client-Side Rendering"},{"@type":"BreadcrumbList","@id":"https:\/\/www.thecodecampus.de\/blog\/server-side-rendering-in-angular-v21\/#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 Boost Your 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\/3730","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=3730"}],"version-history":[{"count":5,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/3730\/revisions"}],"predecessor-version":[{"id":3758,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/3730\/revisions\/3758"}],"wp:attachment":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/media?parent=3730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/categories?post=3730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/tags?post=3730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}