{"id":27233,"date":"2024-11-24T16:52:00","date_gmt":"2024-11-24T15:52:00","guid":{"rendered":"https:\/\/www.angulararchitects.io\/blog\/ssr-and-hydration-with-native-federation-for-angular\/"},"modified":"2025-06-10T14:38:28","modified_gmt":"2025-06-10T12:38:28","slug":"ssr-and-hydration-with-native-federation-for-angular","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/","title":{"rendered":"SSR and Hydration with Native Federation for Angular"},"content":{"rendered":"<div class=\"wp-post-series-box series-micro-frontends-with-modern-angular wp-post-series-box--expandable\">\n\t\t\t<input id=\"collapsible-series-micro-frontends-with-modern-angular69e379fd5c1f3\" 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-micro-frontends-with-modern-angular69e379fd5c1f3\"\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 4 of 6 in the series <em>&ldquo;Micro Frontends with Modern Angular&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\/micro-frontends-with-modern-angular-part-1-standalone-and-esbuild\/\">Micro Frontends with Modern Angular &#8211; Part 1: Standalone and esbuild<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/micro-frontends-with-modern-angular-part-2-multi-version-and-multi-framework-solutions-with-angular-elements-and-web-components\/\">Micro Frontends with Modern Angular &#8211; Part 2: Multi-Version and Multi-Framework Solutions with Angular Elements and Web Components<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/\">Combining Native Federation and Module Federation<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><span class=\"wp-post-series-box__current\">SSR and Hydration with Native Federation for Angular<\/span><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/\">Fixing DX Friction: Automatic Shell Reloading in Native Federation<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/native-federation-just-got-better-performance-dx-and-simplicity\/\">Native Federation Just Got Better: Performance, DX, and Simplicity<\/a><\/li>\n\t\t\t\t\t\t\t<\/ol>\n\t\t<\/div>\n\t<\/div>\n<p><strong>Update 2025-06-10:<\/strong> Updated for version 20 of @angular-architects\/native-federation.<\/p>\n<p>Beginning with version 18.2.3, @angular-architects\/native-federation supports SSR and all the new hydration features modern Angular provides. It's a feature implemented for version 19 that was back-ported to 18. In this short article, I show how to use this possibility, which is vital for public portals and shops.<\/p>\n<p><strong>Hint:<\/strong> You can use version 20 of @angular-architects\/native-federation with Angular 19 too. This allows you to get the updated SSR support and the new below-mentioned <code>fstart<\/code> utility.<\/p>\n<p>\ud83d\udcc2 <a href=\"https:\/\/github.com\/manfredsteyer\/poc-nf-ssr.git\">Source Code<\/a><\/p>\n<h2>Example<\/h2>\n<p>As usual, the example contains a shell that loads a simple micro frontend. Both -- the micro frontend inside the shell -- is rendered on the server side:<\/p>\n<p><video controls style=\"width:100%\" autoplay><source src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/nf-ssr.mp4\" type=\"video\/mp4\"><\/video><\/p>\n<h2>Credits<\/h2>\n<p>Server-side Native Federation involves leveraging Import Maps on the server side. For this, the shown implementation uses a fork of <a href=\"https:\/\/x.com\/Joelbdenning\">Joel Denning<\/a>'s package <a href=\"https:\/\/www.npmjs.com\/package\/@node-loader\/import-maps\">node-loader\/import-maps<\/a>. Hence, all credits for this part go to Joel who constantly comes up with new ideas for improving the space of Micro Frontends.<\/p>\n<h2>Adding SSR and Native Federation to a Project<\/h2>\n<p>If @angular\/ssr is added <strong>before<\/strong> Native Federation, the ng-add schematic provided by Native Federation will integrate both mechanisms with each other. The following commands assume an Angular workspace with a <code>shell<\/code> and a <code>mfe1<\/code> project:<\/p>\n<pre><code class=\"language-bash\"># Add Micro Frontend\nng add @angular\/ssr --project mfe1\nng add @angular-architects\/native-federation --project mfe1 --type remote --port 4201\n\n# Add Shell\nng add @angular\/ssr --project shell\nng add @angular-architects\/native-federation --project shell --type dynamic-host --port 4200<\/code><\/pre>\n<p>If Native Federation is already added, it can be temporarily removed to make sure the ng-add schematics provided by @angular\/ssr work as expected:<\/p>\n<pre><code class=\"language-bash\"># Remove Micro Frontend and Shell\nng g @angular-architects\/native-federation:remove --project mfe1\nng g @angular-architects\/native-federation:remove --project shell\n\n# Add Micro Frontend\nng add @angular\/ssr --project mfe1\nng add @angular-architects\/native-federation --project mfe1 --type remote --port 4201\n\n# Add Shell\nng add @angular\/ssr --project shell\nng add @angular-architects\/native-federation --project shell --type dynamic-host --port 4200<\/code><\/pre>\n<h2>Important: Starting the Server<\/h2>\n<p>Since version 20, the build process generates a <code>fstart.mjs<\/code> (fstart is short for &quot;federation start&quot;) script in your <code>dist<\/code> folder (<code>dist\/project-name\/server<\/code>). Start this one instead of the <code>server.mjs<\/code>:<\/p>\n<pre><code class=\"language-bash\">node fstart.mjs<\/code><\/pre>\n<p>This script is initializing federation on the server side and then delegating to the usual <code>server.mjs<\/code> generated by the Angular CLI. <\/p>\n<h2>Migrating to v20<\/h2>\n<p>If you migrate to v20 and if you still have both, a <code>server.ts<\/code> and a <code>bootstrap.server.ts<\/code>, you can (and should) safely delete the <code>server.ts<\/code> and then rename the <code>bootstrap.server.ts<\/code> to <code>server.ts<\/code>.<\/p>\n<h2>Limitation for ng serve<\/h2>\n<p>For technical reasons, <code>ng serve<\/code> only loads the micro frontend into the shell on the client side. A production build created with <code>ng build,<\/code> however, renders everything on the server side, too. <\/p>\n<p>To prevent server-side errors when running ng serve, the code should provide a server-side fallback for the loaded Micro Frontend. For this, <code>loadRemoteModule<\/code> now contains a <code>fallback<\/code> property:<\/p>\n<pre><code class=\"language-typescript\">import { Routes } from &#039;@angular\/router&#039;;\nimport { loadRemoteModule } from &#039;@angular-architects\/native-federation&#039;;\nimport { DummyComponent } from &#039;.\/dummy\/dummy.component&#039;;\nimport { HomeComponent } from &#039;.\/home\/home.component&#039;;\n\nexport const routes: Routes = [\n {\n        path: &#039;&#039;,\n        pathMatch: &#039;full&#039;,\n        component: HomeComponent\n },\n {\n        path: &#039;mfe1&#039;,\n        loadComponent: () =&gt; loadRemoteModule({\n            remoteName: &#039;mfe1&#039;,\n            exposedModule: &#039;.\/Component&#039;,\n            fallback: DummyComponent\n })\n }\n];<\/code><\/pre>\n<p>The fallback can, for instance, be a component with an empty template or a routing configuration with a catch-all route pointing to such a component.<\/p>\n<p>We will try to remove this limitation. However, it should not be a massive show-stopper as SSR is first and foremost needed in production, and developers usually work mainly on their micro front end. Also, providing a fallback makes sense anyway. <\/p>\n<h2>Only SSR for Shell Needed<\/h2>\n<p>While one can totally activate SSR and hydration for both, the shell and the Micro Frontends, in many cases the latter one can be skipped -- especially if the users always load the Micro Frontends via the shell. Even if the Micro Frontend itself does not use SSR, the shell will render it on the server side. This simplifies the entire solution.<\/p>\n<h2>Conclusion<\/h2>\n<p>Beginning with version 18.2.3, @angular-architects\/native-federation supports SSR. If the ng-add schematic detects an SSR project, it updates the server-side code automatically.<\/p>\n<h2>More on this: Angular Architecture Workshop (online, interactive, advanced)<\/h2>\n<p>Become an expert for enterprise-scale and maintainable Angular applications with our <a href=\"https:\/\/www.angulararchitects.io\/en\/angular-workshops\/advanced-angular-enterprise-architecture-incl-ivy\/\">Angular Architecture workshop!<\/a><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/sujet-en.jpg\" alt=\"\" \/><\/p>\n<p><a href=\"https:\/\/www.angulararchitects.io\/en\/angular-workshops\/advanced-angular-enterprise-architecture-incl-ivy\/\">English Version<\/a> | <a href=\"https:\/\/www.angulararchitects.io\/schulungen\/advanced-angular-enterprise-anwendungen-und-architektur\/\">German Version<\/a><br \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is post 4 of 6 in the series &ldquo;Micro Frontends with Modern Angular&rdquo; Micro Frontends with Modern Angular &#8211; Part 1: Standalone and esbuild Micro Frontends with Modern Angular &#8211; Part 2: Multi-Version and Multi-Framework Solutions with Angular Elements and Web Components Combining Native Federation and Module Federation SSR and Hydration with Native Federation [&hellip;]<\/p>\n","protected":false},"author":25,"featured_media":27228,"comment_status":"open","ping_status":"open","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-27233","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","post_series-micro-frontends-with-modern-angular"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>SSR and Hydration with Native Federation for Angular - 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\/ssr-and-hydration-with-native-federation-for-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SSR and Hydration with Native Federation for Angular - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"This is post 4 of 6 in the series &ldquo;Micro Frontends with Modern Angular&rdquo; Micro Frontends with Modern Angular &#8211; Part 1: Standalone and esbuild Micro Frontends with Modern Angular &#8211; Part 2: Multi-Version and Multi-Framework Solutions with Angular Elements and Web Components Combining Native Federation and Module Federation SSR and Hydration with Native Federation [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-24T15:52:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-10T12:38:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/Kopfzeile-fuer-Abschnitt.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Manfred Steyer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/Kopfzeile-fuer-Abschnitt.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manfred Steyer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 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\/ssr-and-hydration-with-native-federation-for-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/\"},\"author\":{\"name\":\"Manfred Steyer\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a\"},\"headline\":\"SSR and Hydration with Native Federation for Angular\",\"datePublished\":\"2024-11-24T15:52:00+00:00\",\"dateModified\":\"2025-06-10T12:38:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/\"},\"wordCount\":553,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2489196327.jpg\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/\",\"name\":\"SSR and Hydration with Native Federation for Angular - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2489196327.jpg\",\"datePublished\":\"2024-11-24T15:52:00+00:00\",\"dateModified\":\"2025-06-10T12:38:28+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2489196327.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2489196327.jpg\",\"width\":1000,\"height\":680},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SSR and Hydration with Native Federation for Angular\"}]},{\"@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\/f3de69c1e2bdb5ba04d8d2f5f998b81a\",\"name\":\"Manfred Steyer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8778dfb353992fa3a0d909beee085a088891e5bfce65cdb3631801da527cf11b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8778dfb353992fa3a0d909beee085a088891e5bfce65cdb3631801da527cf11b?s=96&d=mm&r=g\",\"caption\":\"Manfred Steyer\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"SSR and Hydration with Native Federation for Angular - 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\/ssr-and-hydration-with-native-federation-for-angular\/","og_locale":"en_US","og_type":"article","og_title":"SSR and Hydration with Native Federation for Angular - ANGULARarchitects","og_description":"This is post 4 of 6 in the series &ldquo;Micro Frontends with Modern Angular&rdquo; Micro Frontends with Modern Angular &#8211; Part 1: Standalone and esbuild Micro Frontends with Modern Angular &#8211; Part 2: Multi-Version and Multi-Framework Solutions with Angular Elements and Web Components Combining Native Federation and Module Federation SSR and Hydration with Native Federation [&hellip;]","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/","og_site_name":"ANGULARarchitects","article_published_time":"2024-11-24T15:52:00+00:00","article_modified_time":"2025-06-10T12:38:28+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/Kopfzeile-fuer-Abschnitt.jpg","type":"image\/jpeg"}],"author":"Manfred Steyer","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/Kopfzeile-fuer-Abschnitt.jpg","twitter_misc":{"Written by":"Manfred Steyer","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/"},"author":{"name":"Manfred Steyer","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a"},"headline":"SSR and Hydration with Native Federation for Angular","datePublished":"2024-11-24T15:52:00+00:00","dateModified":"2025-06-10T12:38:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/"},"wordCount":553,"commentCount":0,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2489196327.jpg","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/","name":"SSR and Hydration with Native Federation for Angular - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2489196327.jpg","datePublished":"2024-11-24T15:52:00+00:00","dateModified":"2025-06-10T12:38:28+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2489196327.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2489196327.jpg","width":1000,"height":680},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"SSR and Hydration with Native Federation for Angular"}]},{"@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\/f3de69c1e2bdb5ba04d8d2f5f998b81a","name":"Manfred Steyer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8778dfb353992fa3a0d909beee085a088891e5bfce65cdb3631801da527cf11b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8778dfb353992fa3a0d909beee085a088891e5bfce65cdb3631801da527cf11b?s=96&d=mm&r=g","caption":"Manfred Steyer"}}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/27233","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\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=27233"}],"version-history":[{"count":7,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/27233\/revisions"}],"predecessor-version":[{"id":30641,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/27233\/revisions\/30641"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/27228"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=27233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=27233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=27233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}