Angular SSG + Hydration: How I Implemented Static Generation

When I rebuilt my Angular portfolio, I knew one thing for sure: I wanted it to feel instant. No waiting for JavaScript to bootstrap, no SEO issues, and no awkward loading spinners. Just clean HTML, pre-rendered pages, and a fully interactive Angular app once everything boots. Angular’s SSG (Static Site Generation) and new hydration capabilities were exactly what I needed. In this article, I’ll walk you through how I implemented SSG + Hydration step by step. If you're planning to build a static Angular site or simply want faster page loads with proper indexing, this guide will save you time.

Why I Chose SSG for My Portfolio

SSG is ideal for personal sites, documentation, blogs, landing pages, and anything that doesn’t need server rendering on every request. For my use case, it solved all the right problems:

Instant loading thanks to prerendered HTML
Better SEO, since Google sees full HTML without JS
No backend needed after deployment
Static hosting (cheap, fast, and globally cached)
Perfect compatibility with Angular routes

The goal was simple: Make the site feel native-fast while giving Google everything it needs to index each page properly.

Why Hydration Matters

Prerendering alone only gives you static HTML. Without hydration:

Angular doesn’t attach event listeners
Components don’t become active
No animations, no bindings, no interactions
Your site looks correct, but feels dead

Hydration solves this by bootstrapping Angular without destroying the prerendered HTML. Instead of wiping the DOM and re-rendering everything from scratch, Angular reuses the existing server-generated markup and "wakes it up".

Setting Up Angular SSG

Angular makes SSG extremely simple. If your project is already using the Angular CLI, all you need is:

ng add @angular/ssr

This sets up:

Adds "prerender": true in your angular.json build configuration to enable Static Site Generation (SSG) automatically.
Creates a server.ts file to handle SSR configuration (used for serving the prerendered output).
Enables hydration support so your prerendered HTML becomes fully interactive on the client side.

Just to be clear :

In Angular 17+, when you enable "prerender": true in your angular.json, the build automatically generates static HTML for each route, no need for manual route lists or a custom server.ts file (that’s only required for SSR setups).

After that, you can generate your static pages using:

ng build

This scans your routes and generates static HTML files inside the dist/browser folder. Each route becomes its own prerendered HTML page.

Quick note:

The location of your prerendered files can vary depending on your Angular setup. In most cases, the output will be found under dist/< project-name>/browser, but this depends entirely on your outputPath setting inside angular.json. For example, if you set "outputPath": "dist/browser", the files will be generated directly in that folder instead. It’s also worth noting that Angular 17’s new application builder slightly adjusted some defaults compared to earlier versions, so double-check your angular.json to confirm the final build path before serving your static files.

How to Run the App (Local + SSG Build)

Once SSG and hydration are enabled, you can run your Angular app in two different ways depending on what you want to test.

1. Run the dev server (normal Angular behavior)

If you just want to work on your app in development mode:

ng serve

This runs your app without SSG. It’s fast, live-reloads automatically, and is perfect for daily development.

2. Build the static prerendered site and Preview it locally

To generate the full SSG output and preview:

ng build

npx http-server dist/browser -p 4200

Conclusion

Implementing Angular SSG with hydration is one of the best upgrades I made to my portfolio. It gave me the speed of a static website, the power of a full Angular app, and clean HTML that search engines actually understand. If you're exploring SSG or thinking about optimizing your Angular app for SEO and performance, I hope this guide gives you a strong starting point.

Patrick Linguerri

Angular Frontend Engineer

.What I Learned Building My Own Angular Portfolio .Dynamic Meta Tags in Angular: How I Built a Reusable SEO Service