Angular 17 Hydration - POST requests triggered both client/server side while GET requests are only server side?

Question

I'm testing the brand new release of Angular 17 with Universal SSR and non-destructive hydration and I've noticed a peculiar behavior.

In my test component, I have both GET and POST requests being made through async pipe Observable.

The get() observable consumer triggers the HTTP request only on the server side (there is no XHR call for this request in my brower network tab). This seems to me to be the desired behavior as the requested page is already filled with the data by the express server)

The post() observable consumer triggers the HTTP request on both side. The response is already here in the generated HTML from Express but the POST request is triggered a second time by the client (I see it in my browser network tab).

What I'm missing here ?

Here is a repro repo

Here's a snippet of my code:

export class AppComponent {

  getReq$: Observable<any>;
  postReq$: Observable<any>;

  constructor(
    private http: HttpClient,
  ) {
    this.getReq$ = this.get();
    this.postReq$ = this.post();
  }

  get(): Observable<HttpResponse<any>> {
    return this.http.get<any>(
      'https://dummyjson.com/products/1'
      , {});
  }

  post(): Observable<HttpResponse<any>> {
    return this.http.post<any>(
      'https://dummyjson.com/products/add'
      , {})
  }
}

<div *ngIf="getReq$ | async as resp">
    <b>get request response</b>
    {{resp | json}}
</div>

<div *ngIf="postReq$ | async as resp">
    <b>post request response</b>
    {{resp | json}}
</div>

Answer 1

This is due to the HttpTransferCache default options.

If you want to also cache POST requests you will need to specifically enable it while setting up the hydration feature:

provideClientHydration([
  withHttpTransferCacheOptions({includePostRequests: true})
])

This is also possible on a request basis :

HttpRequest has a transferCache property which if set to true for the POST request, will cache it !