angular - TransferHttpCacheModule 与 transferstate api 之间的区别

Question

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

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

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

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

我必须改变这个解析器

@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(请参阅 documentation )是最简单的选择，并且通过使用拦截器实现您在解析器中尝试实现的目标。

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.

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

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

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

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