How to perform an HttpClient Get request on the server using Angular 17 SSR?

Question

I'm currently using SSR in combination with Angular for the first time. I created a basic application with routing and one of my components that can be navigated to does an HttpClient.get request.

When navigating to my component using UI buttons

It seems like the SSR server does not wait for the get request to be finalized before the renderd component is send to the frontend when I navigate to the correct component in the frontend. Because I surrounded the get request with an if check on platform server, no data is shown at all.

When refreshing the app on the correct route path

However, when I navigate to the correct route path and refresh my browser the SSR server does send a rendered component WITH data to the frontend. The <li> data originates from the get request:

My question is, how does server side rendering the components work? How and when are such async http calls executed and waited for?

UPDATE I tried using

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

And using

    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, []);
        }
    }

Both of these solutions are only working when the component containing this code is the initially loaded route. It does simply not work when I navigate towards this component using my frontend. (the route is lazy loaded)

Answer 1

I replicated your app as much as possible and it just works. Check out my version on StackBlitz. If the link does not work (the StackBlitz "Open a GitHub repository" feature is still in beta), you can check out my GitHub repository instead.

Be aware that Beeceptor has a limit of 50 requests per day and per endpoint (see pricing). Once you reach this limit, you will get a 429 (Too Many Requests) HTTP response.

So, my advice is that you check for this limit first. Otherwise, compare your code with mine. I don't think your issue has anything to do with SSR. It could be a routing configuration issue. Check out src/app/app.routes.ts for routes and src/app/app.config.ts for providers.

Another possibility is that your development server (Vite) had an issue. Stop it, then run ng cache clean and restart it with ng serve.

Consider configuring the HTTPClient provider with withFetch. See provideHttpClient for more information.

UPDATE
So, if I understand what you were really asking, you want to fetch the data from the mock API on the SSR server instead of client-side. But why? Even if you achieve this, think about the consequences. Since the fetch request is asynchronous, it will not only delay the response from the SSR server (increasing TTFB) but it will also increase the total size of the HTTP response. One the main reasons to use SSR is improve perceived load time.

Check out Rendering on the Web to learn more about SSR.