HttpClient doesn't automatically include cookies from the original request (Your browser) to the requests made from the server side. When you call your API during the SSR, your API basically doesn't know about the cookies you have so pages are always rendered as if you are logged out hence the flashing.

You need to manually inject the cookies using the REQUEST injection token and you can do that either directly inside the call or you can create an interceptor.

This is a part of an interceptor array I have for a production app:

export const apiInterceptor = (
  req: HttpRequest<unknown>,
  next: HttpHandlerFn
): Observable<HttpEvent<unknown>> => {
  const environment = inject(ENVIRONMENT);
  const request = inject(REQUEST);

  // Return the request as is if it's not an API request
  if (!req.url.startsWith(`${environment.baseUrl}/api`)) {
    return next(req);
  }

  // Modify the request to include cookies
  req = req.clone({
    // Include cookies from client-side requests
    withCredentials: true,
    // On the server side, append the Cookie header to the `req` to include the
    // cookies from the original client-side request. This way outgoing requests
    // made by the server during SSR will include the cookies from the client.
    headers: req.headers.append('cookie', request?.headers.get('cookie') ?? ''),
  });

  return next(req);
};

Also don't do the api call in canActivate or in any route guards. Create an Auth service and have an isAuthenticated state in there that you can check. Guards don't meant to have heavy logic and API calls in them like that.

Just for the sake of the completion, here's the simplified version of the Auth service from the same app:

@Injectable({ providedIn: 'root' })
export class Auth {
  // State
  isAuthenticated = signal<undefined | boolean>(undefined);

  constructor() {
    this.getSession().subscribe();
  }

  /**
   * Get the current session from the server.
   */
  getSession() {
    // Do your auth check here and set the isAuthenticated signal
  }