Since Angular 16 there is a new provideClientHydration function for SSR hydration:
import { provideClientHydration } from '@angular/platform-browser';
export const appConfig: ApplicationConfig = {
providers: [
provideClientHydration(),
...
],
};
However, I can not discern if this is supposed to fully replace the previous solutions like creating two interceptors (one for transferring browser state and one for server state) and importing TransferHttpCacheModule.
I stumbled on this Medium article which seems to suggest that it does replace those solutions, but I haven’t found an official source to confirm this.
Is this the case?
>Solution :
Yes it does !
provideClientHydration() will call withHttpTransferCache() if NoHttpTransferCache isn’t specified.
Since withHttpTransferCache isn’t public here is the current implementation :
It does set the providers for the cache like the TransferHttpCacheModule and you can also see that the interceptor will return the cached values until the app is stable !
export function withHttpTransferCache(): Provider[] {
return [
{
provide: CACHE_STATE,
useFactory: () => {
inject(ENABLED_SSR_FEATURES).add('httpcache');
return {isCacheActive: true};
}
},
{
provide: HTTP_ROOT_INTERCEPTOR_FNS,
useValue: transferCacheInterceptorFn,
multi: true,
deps: [TransferState, CACHE_STATE]
},
{
provide: APP_BOOTSTRAP_LISTENER,
multi: true,
useFactory: () => {
const appRef = inject(ApplicationRef);
const cacheState = inject(CACHE_STATE);
return () => {
appRef.isStable.pipe(first((isStable) => isStable)).toPromise().then(() => {
cacheState.isCacheActive = false;
});
};
}
}
];
}