TransferHttpCacheModule 与 transferstate api 之间的区别

Question

服务器（ssr）在渲染页面时向 API 发出请求，但同样的请求也由浏览器完成，这意味着对已经从服务器获取的数据进行双重请求。

我找到了两种解决方案来解决这个问题。

第一个是使用TransferHttpCacheModule ，我唯一要做的就是将此模块添加到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. 例如：

我必须更改此解析器

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

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

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

为此，避免来自浏览器的第二次请求。

@Injectable()
export class CourseResolver implements Resolve<Course> {

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

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Course> {

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

        if (this.transferState.hasKey(COURSE_KEY)) {
            const course = this.transferState.get<Course>(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);
                        }

                    })
                );
        }
    }
}

我的问题是这两者有什么区别？ 哪一个更好？ （为什么？）或者TransferHttpCacheModule在幕后做与第二种解决方案相同的事情？

Answer 1

使用TransferHttpCacheModule （请参阅文档）是最简单的选择，并且可以在解析器中实现您想要实现的功能，但需要使用拦截器。

当模块安装在应用程序 NgModule 中时，它会拦截服务器上的 HttpClient 请求，并将响应存储在 TransferState 键值存储中。 这被传输到客户端，然后客户端使用它来响应客户端上相同的 HttpClient 请求。

差异取决于您如何实现逻辑。

例如，通过查看解析器的代码，如果它被使用了 3 次，那么您最终会收到 2 个 API 请求，因为您在使用后清除了缓存。

使用TransferHttpCacheModule时，如果有任何 POST 请求，当应用程序稳定时，缓存将停止； 所以一旦你是客户端并且页面已经被渲染并且客户端应用程序接管了。

使用您的代码，即使应用程序在客户端运行，它也会继续使用缓存