API requests are triggered in both SSR and browser

Question

I'm looking for kind soul that can explain to me or point me to a resorce where I can learn about SSR in Angular.

My problem

At first a little background.

Using RouterModule I have added rule that every link (that was not cached earler) should use resolver like so:

const routes: Routes = [
    // other routes
    {
        path: "**",
        loadChildren: () => import("./static-page/static-page.module").then((m) => m.StaticPageModule),
        resolve: {
            staticPage: StaticPageResolver
        }
    }
];

this resolver fetches data from API via HTTP call

next in my component there is a subscriber that collects fetched data and displays it on the page.

this.router.data.subscribe((value) => {
    this.staticPage = (value["staticPage"] as StaticPage) ?? null;
    this.changeDetectionRef.markForCheck();
});

now to the point.
This staticPage is fetched in SSR and then again in the browser.
I feel like this is a waste of resources which impacts performance. Some of those API calls are massive and last around .5s which in this configuration are doubled.

What I tried

I have tried disabling api calls in resolver when in browser wit h isPlatformBrowser but then my page loads with all the content and after constructor, ngOnInit or other lifecycle triggers whole page content dissapears like no api call was ever performed.

Moving these api calls to the browser is out of the question and my SEO master is going to kill me for this.

There isn't a lot that I have tried but honestly I'm out of ideas.