I've been struggling with SEO for my Angular Single Page Application. I know Angular Universal used to be the go-to for Server-Side Rendering, but with the recent updates in Angular 17/18 regarding "Non-destructive Hydration," I'm confused. Does this replace Universal? If I want to rank high on Google and have fast "Time to Interactive," what is the current best practice for setting up SSR in a modern Angular project?
3 answers
It's actually a rebranding and an evolution! "Angular Universal" has been integrated into the core Angular CLI as @angular/ssr. The new "Non-destructive Hydration" is a massive improvement because the browser no longer flickers by destroying and re-creating the DOM when the client-side JS kicks in. For the best SEO, you should definitely enable SSR during your ng new setup or add it later with ng add @angular/ssr. It ensures search engines see your full content immediately while the user gets a smooth transition once the app becomes interactive.
Is there any significant impact on server costs when switching from a standard SPA to full SSR with hydration?
The new @defer blocks are also amazing for performance. Use them alongside SSR to load heavy components only when they enter the viewport.
Great point, Thomas! Deferrable views combined with SSR hydration really make Angular feel as fast as a static site.
There is a slight increase in CPU usage on your server because you're now rendering HTML for every request, Richard. However, for most business use cases, the SEO benefits and the drop in bounce rates due to faster initial loads far outweigh the extra few dollars in hosting. You can also use "Prerendering" (SSG) for static pages to keep costs down while still getting all the SEO "juice" you need.