{"id":7386,"date":"2023-08-07T21:28:05","date_gmt":"2023-08-07T19:28:05","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?p=7386"},"modified":"2025-03-24T21:46:49","modified_gmt":"2025-03-24T20:46:49","slug":"how-to-use-angular-ssr-with-hydration","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/","title":{"rendered":"How to use Angular SSR with Hydration"},"content":{"rendered":"<div class=\"wp-post-series-box series-performance-pptimization wp-post-series-box--expandable\">\n\t\t\t<input id=\"collapsible-series-performance-pptimization69e071af9bb8c\" class=\"wp-post-series-box__toggle_checkbox\" type=\"checkbox\">\n\t\n\t<label\n\t\tclass=\"wp-post-series-box__label\"\n\t\t\t\t\tfor=\"collapsible-series-performance-pptimization69e071af9bb8c\"\n\t\t\ttabindex=\"0\"\n\t\t\t\t>\n\t\t<p class=\"wp-post-series-box__name wp-post-series-name\">\n\t\t\tThis is post 3 of 6 in the series <em>&ldquo;Performance Optimization&rdquo;<\/em>\t\t<\/p>\n\t\t\t<\/label>\n\n\t\t\t<div class=\"wp-post-series-box__posts\">\n\t\t\t<ol>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/why-is-initial-load-performance-so-important\/\">Why is Initial Load Performance so Important?<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-measure-initial-load-performance\/\">How to measure Initial Load Performance<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><span class=\"wp-post-series-box__current\">How to use Angular SSR with Hydration<\/span><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/deferrable-views\/\">Improve Initial Load Time with Deferrable Views<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/\">How to @defer 3rd party dependencies<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/guide-for-ssr\/\">Updated: Guide for Server-Side Rendering (SSR) in Angular<\/a><\/li>\n\t\t\t\t\t\t\t<\/ol>\n\t\t<\/div>\n\t<\/div>\n<p>In <strong>part I<\/strong>, we discussed the benefits of having a faster Initial Load<!-- @Manfred, please insert link here as well -->. In <strong>part II<\/strong>, I've introduced some metrics and tools for the measurement of the Initial Load Performance<!-- @Manfred, please insert link here as well -->. Now we want to improve a (tiny) Angular app by adding SSR including Client Hydration.<\/p>\n<h2>Links to source code and demos<\/h2>\n<p>To help understanding the <strong>Initial Load Optimization process<\/strong>, I've made commits for the successive steps. You can find the Git repo with all the used source code here:<\/p>\n<ul>\n<li><a href=\"https:\/\/gitlab.com\/L_X_T\/ng-performance-demo\">https:\/\/gitlab.com\/L_X_T\/ng-performance-demo<\/a><\/li>\n<\/ul>\n<p>Make sure to check out the <strong>live demo web apps<\/strong> here:<\/p>\n<ul>\n<li><a href=\"https:\/\/csr.tree.angular-software.com\/\">Demo Client Side Rendering<\/a><\/li>\n<li><a href=\"https:\/\/ssr.tree.angular-software.com\/\">Demo Server Side Rendering<\/a><\/li>\n<\/ul>\n<p>If you want, you can even run the Google PageSpeed Insights tests used to measure the Initial Load Performance by yourself:<\/p>\n<ul>\n<li><a href=\"https:\/\/pagespeed.web.dev\/analysis?url=https%3A%2F%2Fcsr.tree.angular-software.com%2F\">PageSpeed Client Side Rendering<\/a><\/li>\n<li><a href=\"https:\/\/pagespeed.web.dev\/analysis?url=https%3A%2F%2Fssr.tree.angular-software.com%2F\">PageSpeed Server Side Rendering<\/a><\/li>\n<\/ul>\n<p>I use the Flight App as the demonstration example. It is a small and simple Angular app. To get realistic results and timings we've added some links to big CSS files (by Bootstrap) and a big Chart library (by AnyChart) - the latter being lazy-loaded at least.<\/p>\n<p>So please don't expect world breaking records here - we just want to demonstrate the improvements by adding SSR, Prerendering &amp; Client Hydration.<\/p>\n<h2>The base case using Client Side Rendering<\/h2>\n<p>We want to use a <code>nginx<\/code> container to serve our Angular app called <code>performance<\/code>.<\/p>\n<pre><code class=\"language-dockerfile\"># Stage 0, Node.js, install deps &amp; build the app\nFROM node:16-alpine as builder\n\n# set working directory\nRUN mkdir -p \/usr\/src\/app\nWORKDIR \/usr\/src\/app\n\n# add app\nCOPY . \/usr\/src\/app\n\n# install deps and cli\nRUN npm install\nRUN npm install -g @angular\/cli\n\n# add .bin to $PATH\nENV PATH \/usr\/src\/app\/node_modules\/.bin:$PATH\n\n# build app\nRUN ng build\n\n# Stage 1, nginx, copy &amp; serve app\nFROM nginx:alpine\n\nCOPY --from=builder \/usr\/src\/app\/dist\/performance\/browser \/usr\/share\/nginx\/html\/\nCOPY nginx.conf \/etc\/nginx\/conf.d\/default.conf<\/code><\/pre>\n<p>Please note that in this <code>Dockerfile<\/code> we assume that <code>Angular Universal<\/code> is already set up and therefore the Angular app resides in a subfolder called <code>browser<\/code>.<\/p>\n<p>To enable <strong>gzip compression<\/strong> in nginx we need to modify the default nginx.conf. Make sure to add all mime-types that your app is using.<\/p>\n<pre><code class=\"language-text\">server {\n    gzip on;\n    gzip_types      application\/javascript font\/woff image\/jpg image\/png image\/webp image\/x-icon text\/css text\/plain;\n    gzip_proxied    no-cache no-store private expired auth;\n    gzip_min_length 1024;\n\n    server_name localhost;\n    listen      80;\n    root        \/usr\/share\/nginx\/html;\n    index       index.html;\n\n    location \/ {\n        try_files $uri $uri\/ \/index.html;\n    }\n}<\/code><\/pre>\n<p>Since we want to serve our Flight App via <code>https<\/code>, we also need to use the secure version of our Flight API.<\/p>\n<pre><code class=\"language-diff\">-  url = &#039;http:\/\/www.angular.at\/api\/flight&#039;;\n-  \/\/ url = &#039;https:\/\/demo.angulararchitects.io\/api\/Flight&#039;;\n+  \/\/ url = &#039;http:\/\/www.angular.at\/api\/flight&#039;;\n+  url = &#039;https:\/\/demo.angulararchitects.io\/api\/Flight&#039;;<\/code><\/pre>\n<p>Now let's run our first test on Google PageSpeed Insights:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/step-0-base-case-csr.png\" alt=\"Client Side Rendering\" \/><\/p>\n<p>The base case takes 2.2s to show the FCP and 3.8s for the LCP. There is no CLS.<\/p>\n<h2>Step 1 - Implementing Server Side Rendering<\/h2>\n<p>To enable Server-Side Rendering we first need to install <code>Angular Universal<\/code>:<\/p>\n<pre><code class=\"language-shell\">ng add @nguniversal\/express-engine<\/code><\/pre>\n<p>This will add the dependencies and all the configuration files needed to run Angular in SSR mode:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/ng-universal-config.png\" alt=\"Angular Universal Configuration\" \/><\/p>\n<p>Now we want to use a <code>Node.js<\/code> container to serve our Angular app.<\/p>\n<p><code>Node.js<\/code> is necessary to be able to render the page on the server.<\/p>\n<pre><code class=\"language-dockerfile\"># Stage 0, Node.js, install deps, build &amp; run the app\nFROM node:16-alpine as builder\n\n# set working directory\nRUN mkdir -p \/usr\/src\/app\nWORKDIR \/usr\/src\/app\n\n# add app\nCOPY . \/usr\/src\/app\n\n# install deps and cli\nRUN npm install\nRUN npm install -g @angular\/cli\n\n# add .bin to $PATH\nENV PATH \/usr\/src\/app\/node_modules\/.bin:$PATH\n\n# build app &amp; server\nRUN ng build\nRUN ng run performance:server\n\n# build default port\nEXPOSE 4000\n\n# start server\nCMD [&quot;node&quot;, &quot;\/usr\/src\/app\/dist\/performance\/server\/main.js&quot;]<\/code><\/pre>\n<p>To be able to use this and not having to guess the <code>main.js<\/code> hash we <strong>disable hashing<\/strong> in the <code>angular.json<\/code>:<\/p>\n<pre><code class=\"language-json\">&quot;outputHashing&quot;: &quot;none&quot;,<\/code><\/pre>\n<p>To enable <strong>gzip compression<\/strong> we firstly need to add the <code>compression<\/code> npm packages:<\/p>\n<pre><code class=\"language-shell\">npm i compression --save\nnpm i @types\/compression --save-dev<\/code><\/pre>\n<p>Secondly we need to update the <code>server.ts<\/code>:<\/p>\n<pre><code class=\"language-diff\">-  server.engine(&#039;html&#039;, ngExpressEngine({\n-    bootstrap: AppServerModule\n-  }));\n+  server.engine(\n+    &#039;html&#039;,\n+    ngExpressEngine({\n+      bootstrap: AppServerModule\n+    })\n+  );\n+\n+  \/\/ Compress all HTTP responses\n+  server.use(compression());<\/code><\/pre>\n<p>So, now let's check the results with SSR:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/step-1-ssr.png\" alt=\"Server Side Rendering\" \/><\/p>\n<p>The server side rendered variant takes 2.0s (-0.2s) to show the FCP and 2.2s (-1.6s) for the LCP. There is a CLS of 0.165 because the page has to be rerendered in the client. It's already much faster than CSR, but you get a CLS which is not good. We can do better than that!<\/p>\n<h2>Step 2 - Implementing Prerendering of routes<\/h2>\n<p>Prerendering the routes allows the backend to prerender certain routes which then are cached on the server. So those pages don't have to be prerendered on-the-fly but instead will be delivered from the <strong>static cache<\/strong> on the server. However, if your App is behind a CDN like CloudFlare which caches each page as well you probably want to omit this step.<\/p>\n<p>In your <code>Dockerfile<\/code> at the following line after build and before the run server:<\/p>\n<pre><code class=\"language-dockerfile\"># build app, prerender &amp; run server\nRUN ng build\nRUN ng run performance:prerender\nRUN ng run performance:server<\/code><\/pre>\n<p>In your <code>angular.json<\/code> you want to specify which <strong>routes<\/strong> should be <strong>prerendered<\/strong>:<\/p>\n<pre><code class=\"language-json\">&quot;prerender&quot;: {\n  &quot;builder&quot;: &quot;@nguniversal\/builders:prerender&quot;,\n    &quot;options&quot;: {\n      &quot;routes&quot;: [&quot;\/&quot;, &quot;\/home&quot;, &quot;\/flight-booking\/flight-search&quot;, &quot;\/flight-booking\/charts&quot;]\n    },<\/code><\/pre>\n<p>Alternatively, you could also use a <strong>text file<\/strong> for specifying the static pages:<\/p>\n<pre><code class=\"language-dockerfile\">RUN ng run performance:prerender --routes-file routes.txt<\/code><\/pre>\n<p>Let's check the results with prerendering:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/step-2-prerender.png\" alt=\"Prerendering of routes\" \/><\/p>\n<p>The prerendered SSR variant takes 1.7s (-0.5s) to show the FCP and 2.4s (-1.4s) for the LCP. There is still a CLS of 0.165 because of the rerendering in the client. It's merely faster than the SSR without prerendering. This is because the Angular app is very simple and thus rendering on the server does not take very long.<\/p>\n<h2>Step 3 - Enabling Non-Destructive Hydration<\/h2>\n<p>To enable the <strong>Non-Destructive Hydration<\/strong> feature in Angular all we need to do is to add this provider in the <code>AppModule<\/code>. Of course this only works if we import it from the <a href=\"mailto:code&gt;@angular\/platform-browser&lt;\/code\">code>@angular\/platform-browser<\/code<\/a> with at least version 16.<\/p>\n<pre><code class=\"language-typescript\">\/\/ app.module.ts\n@NgModule({\n  providers: [\n    [...],\n    provideClientHydration()\n  ],\n})\nexport class AppModule {}<\/code><\/pre>\n<p>If you're using the standalone bootstrapping you can add the provider to the <code>ApplicationConfig<\/code>.<\/p>\n<pre><code class=\"language-typescript\">\/\/ app.config.ts\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    [...],\n    provideClientHydration(),\n  ]\n};<\/code><\/pre>\n<p>Let's check the final results:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/step-3-hydration.png\" alt=\"Non-Destructive Hydration\" \/><\/p>\n<p>The SSR with Client Hydration variant takes 1.5s (-0.7s) to show the FCP and 1.5s (-2.3s) for the LCP. There is no CLS. It's blazingly fast and we get rid of the CLS, because the DOM does not have to be rerendered.<\/p>\n<h2>Performance Deep Dive Workshop<\/h2>\n<p>If you want to deep dive into Angular Performance, we offer a dedicated workshop - both in English and German:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.angulararchitects.io\/en\/training\/angular-performance-workshop\/\"><strong>Performance Workshop<\/strong><\/a> \ud83d\ude80<\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/en\/training\/angular-best-practices\/\"><strong>Best Practices Workshop<\/strong><\/a> \ud83d\udcc8 (including performance related topics)<\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/en\/training\/angular-accessibility-workshop\/\"><strong>Accessibility Workshop<\/strong><\/a> \u267f<\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<p>Server Side Rendering is an effective technique for optimizing Initial Load Performance and delivering a faster, more seamless user experience. Angular V16's Non-Destructive Hydration complements SSR by transforming static HTML into an interactive application on the client-side without having to rerender (and thus repaint in the browser) it completely.<\/p>\n<p>By combining the benefits of SSR &amp; Hydration, your Angular apps can deliver faster initial load times, provide a seamless user experience, and achieve better search engine visibility. In the future the Angular framework will deliver even better Hydration support and features.<\/p>\n<p>In this guide I showed you how easy it is to set up Angular SSR with Hydration and how much the Initial Load Performance improves as a result. So, if your Angular app is publicly available you should start using SSR &amp; Hydration today!<\/p>\n<p>This post was written by <a href=\"https:\/\/alex.thalhammer.name\">Alexander Thalhammer<\/a>. Follow me on <a href=\"https:\/\/at.linkedin.com\/in\/thalhammer\">Linkedin<\/a>, <a href=\"https:\/\/twitter.com\/LX_T\">X<\/a> or <a href=\"https:\/\/github.com\/L-X-T\">giThub<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Part III of the complete guide to Angular 16 Server Side Rendering with Client Hydration<\/p>\n","protected":false},"author":21,"featured_media":7387,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[18],"tags":[],"class_list":["post-7386","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","post_series-performance-pptimization"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to use Angular SSR with Hydration - ANGULARarchitects<\/title>\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.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use Angular SSR with Hydration - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"Part III of the complete guide to Angular 16 Server Side Rendering with Client Hydration\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-07T19:28:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-24T20:46:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/08\/shutterstock-2153877179-2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"667\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alexander Thalhammer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@LX_T\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alexander Thalhammer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/\"},\"author\":{\"name\":\"Alexander Thalhammer\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/eefb0cd4d115dfd406a02b6dbc760d45\"},\"headline\":\"How to use Angular SSR with Hydration\",\"datePublished\":\"2023-08-07T19:28:05+00:00\",\"dateModified\":\"2025-03-24T20:46:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/\"},\"wordCount\":701,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/08\/shutterstock-2153877179-2.jpg\",\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/\",\"name\":\"How to use Angular SSR with Hydration - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/08\/shutterstock-2153877179-2.jpg\",\"datePublished\":\"2023-08-07T19:28:05+00:00\",\"dateModified\":\"2025-03-24T20:46:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/08\/shutterstock-2153877179-2.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/08\/shutterstock-2153877179-2.jpg\",\"width\":1000,\"height\":667},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use Angular SSR with Hydration\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"name\":\"ANGULARarchitects\",\"description\":\"AngularArchitects.io\",\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\",\"name\":\"ANGULARarchitects\",\"alternateName\":\"SOFTWAREarchitects\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"width\":644,\"height\":216,\"caption\":\"ANGULARarchitects\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/github.com\/angular-architects\",\"https:\/\/www.linkedin.com\/company\/angular-architects\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/eefb0cd4d115dfd406a02b6dbc760d45\",\"name\":\"Alexander Thalhammer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/23f1b6f9b1ee7d04247b8320851762347d56c76b1537d100d07390d6d919b78d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/23f1b6f9b1ee7d04247b8320851762347d56c76b1537d100d07390d6d919b78d?s=96&d=mm&r=g\",\"caption\":\"Alexander Thalhammer\"},\"sameAs\":[\"https:\/\/x.com\/LX_T\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use Angular SSR with Hydration - ANGULARarchitects","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.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/","og_locale":"en_US","og_type":"article","og_title":"How to use Angular SSR with Hydration - ANGULARarchitects","og_description":"Part III of the complete guide to Angular 16 Server Side Rendering with Client Hydration","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/","og_site_name":"ANGULARarchitects","article_published_time":"2023-08-07T19:28:05+00:00","article_modified_time":"2025-03-24T20:46:49+00:00","og_image":[{"width":1000,"height":667,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/08\/shutterstock-2153877179-2.jpg","type":"image\/jpeg"}],"author":"Alexander Thalhammer","twitter_card":"summary_large_image","twitter_creator":"@LX_T","twitter_misc":{"Written by":"Alexander Thalhammer","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/"},"author":{"name":"Alexander Thalhammer","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/eefb0cd4d115dfd406a02b6dbc760d45"},"headline":"How to use Angular SSR with Hydration","datePublished":"2023-08-07T19:28:05+00:00","dateModified":"2025-03-24T20:46:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/"},"wordCount":701,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/08\/shutterstock-2153877179-2.jpg","inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/","name":"How to use Angular SSR with Hydration - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/08\/shutterstock-2153877179-2.jpg","datePublished":"2023-08-07T19:28:05+00:00","dateModified":"2025-03-24T20:46:49+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/08\/shutterstock-2153877179-2.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/08\/shutterstock-2153877179-2.jpg","width":1000,"height":667},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"How to use Angular SSR with Hydration"}]},{"@type":"WebSite","@id":"https:\/\/www.angulararchitects.io\/en\/#website","url":"https:\/\/www.angulararchitects.io\/en\/","name":"ANGULARarchitects","description":"AngularArchitects.io","publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.angulararchitects.io\/en\/#organization","name":"ANGULARarchitects","alternateName":"SOFTWAREarchitects","url":"https:\/\/www.angulararchitects.io\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","width":644,"height":216,"caption":"ANGULARarchitects"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/github.com\/angular-architects","https:\/\/www.linkedin.com\/company\/angular-architects\/"]},{"@type":"Person","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/eefb0cd4d115dfd406a02b6dbc760d45","name":"Alexander Thalhammer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/23f1b6f9b1ee7d04247b8320851762347d56c76b1537d100d07390d6d919b78d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/23f1b6f9b1ee7d04247b8320851762347d56c76b1537d100d07390d6d919b78d?s=96&d=mm&r=g","caption":"Alexander Thalhammer"},"sameAs":["https:\/\/x.com\/LX_T"]}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/7386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=7386"}],"version-history":[{"count":4,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/7386\/revisions"}],"predecessor-version":[{"id":29385,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/7386\/revisions\/29385"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/7387"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=7386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=7386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=7386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}