Seo – Why Angular 17 SSR cannot render data from api on server side

Create a project with angular v17 and SSR

In my app.component.ts i retrieve list of products from my api.

constructor(    
    private product: ProductService
  ) {
    this.product.getProductos().subscribe(p => {
      this.productos = p;      
    });
  }

In my app.component.html i display the list of products

  <li *ngFor="let producto of productos">
          {{ producto.nombre }} - {{ producto.precio  }}
   </li>

When I visit the url, in the first network request where the server-side rendered html document is loaded, the products obtained from the api are not displayed.

I have tried forcing the call server side

 constructor(
    private product: ProductService,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {
    if (isPlatformServer(this.platformId)) {
      this.product.getProductos().subscribe(p => {
        this.productos = p;
      });
    }

My app.config

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideClientHydration(
      withNoHttpTransferCache()     
    ),
    provideHttpClient(
      withFetch()
    )
  ]
};

I need to render that data on the server side to optimize the website’s SEO.

If anyone has run into this problem of trying to render dynamic data server-side and solved it, I would appreciate a response.