I have an Angular 14 SPA rendered using CSR which I am now planning to migrate to an SSR based approach (maybe using Angular Universal) to make the site 'SEO friendly'.
The pages rendered by my app rely on multiple upstream API calls to fetch the data to build and render the page.
While with CSR this could have been done asynchronously, the API calls being made on the client after the initial skeleton of the page was loaded (with loaders and spinners galore), the problem with the SSR approach is that all these API calls must finish for the page to be completely rendered on the server before being returned to the client, thus increasing the TTFB (time to first byte). Keeping in mind that I am doing this to make the site SEO friendly, I would like all this data to be rendered so it can be crawled by the search engine on the initial page load.
In this scenario SSR doesn't quite seem to live up to the promise of a faster time to FCP (first contentful paint), as rendering the HTML needed for this paint itself depends on upstream API calls, which therefore are the bottleneck in this process.
What approaches could be used to mitigate this? Here's some approaches I have explored so far:
- Streaming - https://shopify.dev/custom-storefronts/hydrogen/framework/streaming-ssr
- Dynamic rendering - serve SSR pages to crawlers and CSR to humans - though I think it still does not solve the high TTFB for crawlers which could potentially affect SEO - https://prerender.io/blog/how-to-be-successful-with-dynamic-rendering-and-seo/
- SSR with CDN caching - keeping in mind that our site's content is user location specific, time sensitive and changes frequently