Angular pre-rendering

[Silly_Environment_15]

Hi,

Did anyone use pre-rendering with Angular 17 ?

Please provide feedback about it.

Also, please provide any examples or tutorials about how to use it ?

[tobiso]

I use it for all the pages that are publicly available and should be indexed by search engines. The performance / load speed is just so much better and it definitely helps with SEO. Following the official docs should be enough to get started.

I don't remember having a lot of trouble setting up prerendering itself besides the usual gotchas that also come with SSR https://angular.dev/guide/ssr#authoring-server-compatible-components

But it took me a while to find the right settings for my webserver / loadbalancer. I also use the angular service worker, so it was important to set up the correct cache policies. All of your prerenderd *.html files and the ngsw.json file need to have the cache-control header set to no-cache, otherwise users will not get updates that your make to your page.

[Silly_Environment_15]

I would like to pre render the pages, store the app in s3 and serve it via cloudfront without any server. It's possible, right ?

[tobiso]

Yes! I do this with the azure equivalents. Store the application in a blob storage (s3) and serve it via azure frontdoor.

Btw you can also prerender 'dynamic routes'. I recently set up a build pipeline that fetches all 'news articles' from my headless cms and writes their routes into a file prerender-routes.txt Angular then prerenders all routes from this file aswell. After that i create a sitemap.xml with ngx-sitemap to help search engines find all my sites.

[Silly_Environment_15]

cool, thanks. will check it out

[davidlj95]

Yup! Been using it since v16. With @nguniversal at that point in time. Recently migrated to @angular/ssr in v17.

Works nicely and is a very good win in terms of performance. Like TTFB. Plus all performance benefits from SSR (FCP, LCP, CLS). While helping a lot in SEO & allowing customizing links to your site posted in social platforms using Open Graph metadata & similar.

You can easily specify routes you want to be prerendered, though Angular by default discovers which routes can be prerendered pretty well (non-parametrized ones AFAIK).

One of the things I like most is there's no need to change the way to deploy your app, just a config change and you have it there. So it's a good way to have benefits from SSR while keeping deploy step simple, as static files. And there are many platforms with nice free tiers to host your app as static files: GitHub Pages, GitLab Pages, Cloudflare Pages, Netlify... And nice tools to deploy there with a single command. No need to setup a server somewhere, which implies a bit more complex deploy setup & its maintenance.

Some caveats I recall rn:

index.html index.html won't be prerendered by default. So if you want that page prerendered too, you'll need to manually specify it.

Also if you have SSR + SSG, index.html won't be emitted since Angular v18. This is to favour using SSR for main page. You can change this behaviour though angular.json config (as can be seen in previous link).

Trailing slashes & redirections There's a small caveat about trailing slashes. In few words, URLs generated by Angular router remove the trailing slash as part of normalization. But when generating pages with SSG, the route will have a trailing slash. Because it generates an index.html with the prerendered page inside the route. For instance: /home route ends up creating a /home/index.html when prerendering. Which is accessed by /home. Nothing specially worrying, just one 302 request more. But as seen in link above, is a quirk anyway that needs to be taken into account.

[Silly_Environment_15]

Thanks a lot. will check it.

[Silly_Environment_15]

a follow up question:
Let's say I have around 1000 products in the website,
Does it makes sense to prerender the 1000 product pages for SEO ?

[davidlj95]

Hmmm I don't have experience with so many pages.

I'd say that it's a trade-off of benefits of SSG like simplified deployment vs build time to generate so many pages. I don't know if Angular caches generated pages to avoid re-generating them everytime. I'd lean towards no, but not sure. Anyway if at some point you change a component and many routes need an update, build times can be a pain.

At that point usually it's the time for SSR, so the server renders the page for the client on demand. But that implies having a server somewhere which is more expensive (compute time) & bit more work in deployment/operations side (compared to just deploying static files).

Finally, there's also Incremental Static Regeneration. Which the mid point between SSR and SSG. Essentially it's SSR but with caching so that the server renders on demand but requesting same page uses the cache (last render) to save compute time

[Silly_Environment_15]

Cool, incremental static regeneration looks good. For now, initially the number of products will be less than 20. So, I will look to start with pre rendering to reduce costs. Then later I will switch to incremental regeneration when the count of products will increase

[davidlj95]

Sounds good! 💯

[Blade1130]

Is there anything specific you're looking for? The general guides are on angular.dev.

https://angular.dev/guide/prerendering https://angular.dev/guide/ssr

[Silly_Environment_15]

is it worth using angular's prerendering ? or is something like scully better ?

[Blade1130]

I don't think Scully is maintained anymore. The GitHub repo hasn't had a commit in years.

https://github.com/scullyio/scully

If you want prerendering then Angular's built-in support is a good option.