Resource called twice in SSR Application

I'm working with a SSR Angular 20 and noticed Resource could be called twice :

Here a exemple of code :

Service :

code = signal<string | undefined>(undefined);
authCode = resource<
{ message: string; tokens: { accessToken: string; refreshToken: string } },
string | undefined
>({
params: this.code,
loader: async ({
params,
}): Promise<{
message: string;
tokens: { accessToken: string; refreshToken: string };
}> => {

const res = await fetch(
`${environment.API_URL}/auth/callback?code=${params}`
);
const data = await res.json();
if (!res.ok) {
throw new Error(data.error);
}
const parsedData = this.tokensSchema.parse(data);
return {
message: parsedData.message,
tokens: parsedData.tokens,
};
},
});
setCode(code: string) {
this.code.set(code);
}


Component :

readonly #callBackService = inject(AuthCallbackService);
code = input.required<string>();
tokens = this.#callBackService.authCode;
ngOnInit(): void {
if (this.code()) {
this.#callBackService.setCode(this.code());
}
}


In this scenaio, the Resource is called twice.

Added this code to check if I'm on server side :

if (typeof window === 'undefined') {
return {
message: '',
tokens: {
accessToken: '',
refreshToken: '',
},
};
}


And only one call was triggered.

Continue reading...