Difference between TransferHttpCacheModule vs transferstate api

Question

The server (ssr), while rendering the page, does the request to the API, but the same request is done by browser as well, which means double request for the data that has been already fetched from server.

I found two solution to solve this problem.

First one is to use TransferHttpCacheModule, only thing I have to do is to add this module to appModule

Second one is to use transfer state api directly, which means that I have to add some logic manually depend on transfer state api in every service or resolver, which does http request. For example:

I have to change this resolver

@Injectable()
export class CourseResolver implements Resolve {
    constructor(private coursesService: CoursesService) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable {
        const courseId = route.params['id'];

        return this.coursesService.findCourseById(courseId);
    }
}

To this, to avoid second request from the browser.

@Injectable()
export class CourseResolver implements Resolve {

    constructor(
        private coursesService: CoursesService,
        @Inject(PLATFORM_ID) private platformId,
        private transferState:TransferState) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable {

        const courseId = route.params['id'];
        const COURSE_KEY = makeStateKey('course-' + courseId);

        if (this.transferState.hasKey(COURSE_KEY)) {
            const course = this.transferState.get(COURSE_KEY, null);
            this.transferState.remove(COURSE_KEY);
            return of(course);
        }
        else {
            return this.coursesService.findCourseById(courseId)
                .pipe(
                    tap(course => {
                        if (isPlatformServer(this.platformId)) {
                            this.transferState.set(COURSE_KEY, course);
                        }

                    })
                );
        }
    }
}

My question is what is the difference between this two? which one is better? (why?) or maybe TransferHttpCacheModule does the same thing behind the scenes as the second solution?

user_1160794 · Answer

Using TransferHttpCacheModule (see documentation) is the easiest option, and does what you are trying to achieve in your resolver, but by using an interceptor.

When the module is installed in the application NgModule, it will intercept HttpClient requests on the server and store the response in the TransferState key-value store. This is transferred to the client, which then uses it to respond to the same HttpClient requests on the client.

The difference depends on how you implement your logic.

For instance, from looking at your resolver's code, if it is used 3 times then you'll end up with 2 API requests, since you clear the cache after using it.

When using TransferHttpCacheModule, the caching will stop if there are any POST request and when the application becomes stable; so once you are client side and the page has been rendered and client app took over.

With your code, it'll keep using the cache even when the app runs client side

Difference between TransferHttpCacheModule vs transferstate api

1 Answers