TransferHttpCacheModule 与 transferstate 之间的区别 api

Question

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

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

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

第二种是直接使用传输状态api，这意味着我必须在每个服务或解析器中手动添加一些依赖于传输状态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请求，当应用程序稳定时，缓存将停止；所以一旦你是客户端并且页面已经呈现并且客户端应用程序接管了。

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

TransferHttpCacheModule 与 transferstate 之间的区别 api

Difference between TransferHttpCacheModule vs transferstate api

server-side-rendering

angular-universal

angular