如何使用 Angular 17 SSR 在服务器上执行 HttpClient Get 请求？

Question

我目前第一次将 SSR 与 Angular 结合使用。我创建了一个带有路由的基本应用程序和一个可以导航到执行

HttpClient.get

请求的组件。

使用 UI 按钮导航到我的组件时

当我导航到前端中的正确组件时，SSR 服务器似乎不会等待 get 请求完成，然后将渲染的组件发送到前端。因为我在平台服务器上用 if 检查包围了 get 请求，所以根本没有显示任何数据。

在正确的路线路径上刷新应用程序时

但是，当我导航到正确的路由路径并刷新浏览器时，SSR 服务器确实会将包含数据的渲染组件发送到前端。

<li>

数据源自get请求：

我的问题是，服务器端渲染组件是如何工作的？这样的异步http调用是如何以及何时执行和等待的？

更新 我尝试使用

    private fetchData(): void {
        this.http
            .get<Todo[]>('https://basss.free.beeceptor.com/todos')
            .pipe(tap(t => console.log(t)))
            .subscribe(todos => {
                this.todos = todos;
            });
    }

并使用

    private fetchData(): void {
        if (isPlatformServer(this.platformId)) {
            this.http
                .get<Todo[]>('https://basss.free.beeceptor.com/todos')
                .pipe(tap(t => console.log(t)))
                .subscribe(todos => {
                    this.todos = todos;
                    this.transferState.set(this.myKey, todos);
                });
        } else if (isPlatformBrowser(this.platformId)) {
            this.todos = this.transferState.get(this.myKey, []);
        }
    }

这两种解决方案仅在包含此代码的组件是初始加载的路由时才有效。当我使用前端导航到该组件时，它根本不起作用。 （路线是懒加载的）

Answer 1

我尽可能地复制了你的应用程序，它确实有效。查看 我在 StackBlitz 上的版本。如果链接不起作用（StackBlitz“打开 GitHub 存储库”功能仍处于测试阶段），您可以查看我的 GitHub 存储库。

请注意，Beeceptor 每天每个端点的请求限制为 50 个（请参阅定价）。一旦达到此限制，您将收到 429（请求过多）HTTP 响应。

因此，我的建议是您首先检查此限制。否则，请将您的代码与我的代码进行比较。我不认为你的问题与SSR有任何关系。可能是路由配置问题。查看

src/app/app.routes.ts

了解路线，查看

src/app/app.config.ts

了解提供商。

另一种可能是您的开发服务器（Vite）出现问题。停止它，然后运行

ng cache clean

并使用

ng serve

重新启动它。