I created a simple Angular app that uses SSR and shows an XKCD cartoon as follows:
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
template: `
<div>{{ cartoonText }}</div>
<img [src]="cartoonImg" [alt]="cartoonImgAlt" />
`,
styleUrl: './app.component.css'
})
export class AppComponent implements OnInit {
cartoonText = 'Cartoon';
cartoonImg = undefined;
cartoonImgAlt = 'Cartoon Image';
constructor(
private http: HttpClient,
) { }
ngOnInit() {
console.log('AppComponent ngOnInit: Fetching xkcd cartoon')
this.http.get('https://xkcd.com/info.0.json')
.subscribe({
next: (cartoon: any) => {
this.cartoonText = cartoon['safe_title'];
this.cartoonImg = cartoon['img'];
this.cartoonImgAlt = cartoon['alt'];
},
error: (err) => {
console.log(err);
}
});
}
}When I run ng serve and render the page on the browser, the server side code makes a call to the API and renders on the page:
If I take a look at the response of the localhost network call, I get the following:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module" src="/@vite/client"></script>
<meta charset="utf-8">
<title>SeoDemo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css">
<style ng-app-id="ng">
/*# sourceMappingURL=app.component.css.map */
</style>
</head>
<body>
<!--nghm-->
<app-root _nghost-ng-c1820058225="" ng-version="17.2.3" ngh="0" ng-server-context="ssr">
<div _ngcontent-ng-c1820058225="">The Wreck of the Edmund Fitzgerald</div>
<img _ngcontent-ng-c1820058225="" src="https://imgs.xkcd.com/comics/the_wreck_of_the_edmund_fitzgerald.png" alt="You know that asteroid that almost destroyed Earth in the 90s? Turns out the whole thing was secretly created by Michael Bay, who then PAID Bruce Willis and Ben Affleck to look heroic while blowing it up!">
</app-root>
<script src="polyfills.js" type="module"></script>
<script src="main.js" type="module"></script>
<script id="ng-state" type="application/json">
{
"1579649947": {
"b": {
"month": "3",
"num": 2910,
"link": "",
"year": "2024",
"news": "",
"safe_title": "The Wreck of the Edmund Fitzgerald",
"transcript": "",
"alt": "You know that asteroid that almost destroyed Earth in the 90s? Turns out the whole thing was secretly created by Michael Bay, who then PAID Bruce Willis and Ben Affleck to look heroic while blowing it up!",
"img": "https://imgs.xkcd.com/comics/the_wreck_of_the_edmund_fitzgerald.png",
"title": "The Wreck of the Edmund Fitzgerald",
"day": "22"
},
"h": {
},
"s": 200,
"st": "OK",
"u": "https://xkcd.com/info.0.json",
"rt": "json"
},
"__nghData__": [
{
}
]
}</script>
</body>
</html>I was expecting that I would need to transfer the state from the server side to the client so that the client does not need to make the API call again. But I see in the above response from SSR that the state is also being sent. And hence, the client side code does not make the duplicate API call. This is desirable, but I am confused as to how this happened without me sending the state from the server to the client using the TransferState class. Is this a default behavior in Angular v17 that the state is automatically transferred from SSR to CSR, or do I still need to transfer the state?
Following is the link to TransferState API in Angular: https://angular.io/api/core/TransferState