1

Let's say we have this Post component:

@Component({
  template: `
    <div 
      *ngIf="post$ | async as post" 
      [innerHTML]="post.content">
    </div>
  `,
})
export class Post implements OnInit {
  post$!: Observable<Post>;

  constructor(private http: HttpClient, private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.post$ = this.route.paramMap.pipe(
      switchMap((params) => {
        const slug = params.get('slug') ;
        return this.http.get<Post>(`${env.apiUrl}/posts/${slug}`);
      })
    );
  }
}

When we pre-render posts pages:

ng run myapp:prerender --routes-file routes.txt

Their data are fetched and the HTML is generated successfully. But when we launch the generated static content, they still RE-fetch the data.

Is it possible to prevent that RE-fetch ? or it is not recommended ?

acmoune
  • 2,981
  • 3
  • 24
  • 41

1 Answers1

1

It is built-in, use the TransferHttpCacheModule

It allows to serialize the data which has been fetched on server side in a script element of the generated HTML code. Then in the browser, the TransferHttpCacheInterceptor intercept every HTTP request and checks into that data if there is a corresponding entry. It uses <http_verb>.<url> as the key.

Every cache entry is invalidated as soon as it has been used, so that future requests with the same <http_verb>.<url> key are sent to the backend.

Guerric P
  • 30,447
  • 6
  • 48
  • 86
  • Ok, I already did all that. I think the problem is that I am in fact using `apollo-angular` (https://apollo-angular.com/docs/data/queries#basic-queries). It seems to not integrate that behavior be default, I should have precise it. Is it possible to make it with `apollo-angular` too ? – acmoune Dec 16 '21 at 12:12
  • I think I better ask another question, with another code snippet – acmoune Dec 16 '21 at 12:13
  • I don't know `apollo-angular` but if you have issues related to the interceptors order, you may be interested in [this question](https://stackoverflow.com/questions/53352294/how-to-use-http-transfer-state-when-using-relative-urls). Basically the conclusion is that the module declaration order matters to determine the interceptors order. – Guerric P Dec 16 '21 at 12:38
  • @acmoune I actually browsed `apollo-angular` repository and I noticed that it was a wrapper around `@apollo/client` which is a more generic client. As it doesn't use Angular's `HttpClientModule`, it won't integrate with `TransferHttpCacheModule` – Guerric P Dec 16 '21 at 12:45
  • `apollo-angular` support SSR, but you must use the HttpLink (https://apollo-angular.com/docs/performance/server-side-rendering/#server-side-rendering). I saw my problem. The way I put my Loading gif, it will always show up, whether the request went out or not. It is fixed. Thank you very much @Guerric – acmoune Dec 16 '21 at 12:52
  • OK glad you fixed it! – Guerric P Dec 16 '21 at 12:55
  • Have any of you been able to get this working for POST requests? – Andrew Howard Feb 19 '23 at 19:40