` inside a `

`, and third-party scripts that change the page early cause mismatch errors. Angular DevTools highlights the component at fault, and `ngSkipHydration` on its host is the documented last resort. ### Keep deferred content in the server HTML On the server, a `@defer` block renders only its `@placeholder`, in SSR and prerendering alike. Reviews, specs or FAQs inside a plain `@defer` never reach the HTML crawlers read. To see whether that happens on your site, run a product route through the Googlebot simulator (https://encited.com/free-tools/crawler-simulator/googlebot-simulator) and search the response for a sentence from the reviews. Add a `hydrate` trigger and Angular renders the main content on the server, then hydrates it in the browser when the trigger fires: html Copy Download @defer (hydrate on viewport) { < app-product-reviews [productId] = " id() " /> } @placeholder { < p > Customer reviews } `hydrate` triggers need incremental hydration, which `provideClientHydration()` turns on by default since Angular 22. On Angular 19 to 21, add `withIncrementalHydration()`. ### Browser-only code during server rendering Angular's docs list `window`, `document`, `navigator` and `location` as unavailable on the server. Constructors and class hooks such as `ngOnInit` and `ngOnChanges` run during server rendering too, so code in them has to work on both sides. Angular skips only the render callbacks, `afterNextRender` and `afterEveryRender`, on the server. Put browser-only code there. New apps have been zoneless by default since Angular 21. In a zoneless app, the server waits for router navigations and `HttpClient` requests before it sends the page. Data from `fetch()` or a client SDK such as Firebase's needs `PendingTasks`, or the server sends the page before the data arrives: ts Copy Download import { Component, PendingTasks, afterNextRender, inject, signal } from '@angular/core'; @ Component ({ selector: 'app-store-hours', template: `

{{ line }}

`, }) export class StoreHours { private tasks = inject (PendingTasks); hours = signal < string [ ] > ([ ]); constructor () { this. tasks. run (async () => { const res = await fetch ('https://api.yourstore.com/hours'); this. hours. set (await res. json ()); }); afterNextRender (() => { const preferred = localStorage. getItem ('preferredStore'); // browser only: personalize after the page is on screen }); } } Don't branch a template on `isPlatformBrowser` to show different content on the server. Angular's docs warn it causes hydration mismatches and layout shifts. ### Return a real 404 ts Copy Download import { Component, RESPONSE_INIT, inject } from '@angular/core'; @ Component ({ selector: 'app-not-found', template: `

Page not found

`, }) export class NotFound { constructor () { const response = inject (RESPONSE_INIT); if (response) { response. status = 404; } } } Put `{ path: '**', component: NotFound }` last in your routes and keep `**` on `RenderMode.Server`. `RESPONSE_INIT` is `null` during prerendering and in the browser, so only a server-rendered route can set the status. Redirects from `redirectTo` go out as real HTTP redirects from SSR. ### Angular Universal SEO: moving to @angular/ssr Angular Universal served Angular 16 and earlier, with `ng add @nguniversal/express-engine` and scripts such as `npm run build:ssr` and `serve:ssr`. In Angular 17 it moved into the Angular CLI as `@angular/ssr`, and `ng update` to 17 included a migration from `@nguniversal`. Angular Universal SEO tutorials that use those commands target old versions. On Angular 17 or later, use `@angular/ssr`. Angular 22 deprecated `CommonEngine` in favor of `AngularNodeAppEngine`. A `server.ts` that still imports `CommonEngine` predates the current server API. ## Build-time prerendering (SSG) in the Angular CLI `RenderMode.Prerender` routes become HTML files at build time. Crawlers get the fastest response, and nothing runs per request. It fits pages that look the same for every visitor and change when you deploy. For a site with no server at all, set `outputMode` to `static` in `angular.json`: json Copy Download { "projects": { "your-store": { "architect": { "build": { "options": { "outputMode": "static" } } } } } } Angular then writes one HTML file per prerendered route and no server bundle. Deploy `dist/your-store/browser` to Firebase Hosting, Netlify, Cloudflare Pages or S3. After each build, `dist/your-store/prerendered-routes.json` lists every route that got a file, so you can confirm new pages made it in. Limits: - Data is fixed at build time. A price or stock change waits for the next deploy. - Angular's docs warn that prerendering many pages through `getPrerenderParams` adds build time and deploy size. - Redirects on prerendered routes become `` tags. Put permanent redirects in your host's config so crawlers get a 301. ## Angular SEO meta tags: titles, descriptions, canonicals and JSON-LD With SSR, prerendering or a pre-render layer, your Angular SEO meta tags are in the HTML every crawler reads. In a client-rendered app, only Googlebot sees them, after rendering. ### Page titles Set a `title` on each route, or a resolver when the title comes from data: ts Copy Download import { inject } from '@angular/core'; import { ResolveFn, Routes } from '@angular/router'; import { ProductService } from './product.service'; const productTitle: ResolveFn < string > = (route) => inject (ProductService). getName (route. paramMap. get ('id')!); export const routes: Routes = [ { path: '', component: Home, title: 'Handmade mugs and bowls | YourStore' }, { path: 'products/:id', component: ProductPage, title: productTitle }, ]; To add your site name to every title in one place, provide a custom `TitleStrategy`. ### Description, Open Graph, canonical and JSON-LD `Meta.updateTag()` updates a tag, or creates it when it's missing, so running it on the server and again in the browser leaves one tag. Canonical links have no Angular service, and Angular doesn't support `