I have a Angular application which is SSR + Hydrated. Hydration works properly in the local. But when deployed on the cloud via a CDN, there is some issue. I got to know this as I can see that the API are being called both in the server as well as the client, because of which there is visible flickering. This is my hydration setup: provideClientHydration( withHttpTransferCacheOptions({ includeHeaders: ['X-XSRF-TOKEN'], filter: (req) => { return !(req.headers.get('skip-hydration-caching') === 'true'); }, }), ), I have not set skip-hydration-caching in the header for this use case, so the API should be cached and not called in the client, according to my expectation. I have also compared the page source of both local and stage to see if there are any differences, since I read that CDNs can strip away some required comment nodes for hydration to work properly. But I found no differences as such. I do not know for sure if its an issue only with transfer state or hydration as well since angular does not log anything in stage/production builds unlike dev build where we can see this msg. Angular hydrated 25 component(s) and 456 node(s), 0 component(s) were skipped. I'm not able to give a reproducible build since it happens only in production/stage environments. Any pointers in the right direction will help. Continue reading...
