TransferHttpCacheModule 与 TransferState api 之间的区别

Question

服务器 (ssr) 在渲染页面时向 API 发出请求，但浏览器也会发出相同的请求，这意味着对已从服务器获取的数据进行双重请求。

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

第一个是使用TransferHttpCacheModule，我唯一要做的就是将此模块添加到appModule

第二种是直接使用传输状态 api，这意味着我必须在每个执行 http 请求的服务或解析器中手动添加一些依赖于传输状态 api 的逻辑。例如：

我必须更改此解析器

@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请求且应用程序稳定时，缓存将停止；因此，一旦您位于客户端并且页面已呈现且客户端应用程序接管。

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