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>

Matthieu Riegler · Accepted Answer · 2023-11-10 11:15:31Z

2

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 !

edited Nov 10, 2023 at 11:15

answered Nov 10, 2023 at 10:50

Matthieu Riegler

59.9k27 gold badges158 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lucas Tesseron Over a year ago

Thanks a lot. I missed this part of the doc and that makes sense to not activate it as the default behavior...!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related