navigator is undefined in SSR and therefore the image cannot be loaded, even if it is a crawler

[borjapazr]

How should the behavior be with Angular Universal and the SSR? According to the documentation, the userAgent check is done to detect if it is a crawler, but the in execution on the server side, the navigator object is undefined and therefore cannot get the value of the userAgent. Thus, even if a crawler tries to retrieve the page, the image will not have the src attribute and therefore will not be able to load it.

For example, if I make a request with Postman simulating a crawler, the response is as follows.

This is because the navigator object is undefined, as can be seen in the following images.

So, when it is SSR, wouldn't it be better to retrieve the User Agent from the header?

Thanks in advance!

[tjoskar]

Hi @borjapazr, sorry for the delay.

To be honest, the SSR support is not well thought out and I have never used Angular with SSR so I'm happy to take change suggestions.

The idea right now is that modern search engine bots support javascript so the application will load the images on the client side, not the backend side. Eg.

1. The bot sends a request to the SSR server.
2. The package (ng-lazyload-image) won't do anything due to isPlatformServer(this.platformId) on this line: https://github.com/tjoskar/ng-lazyload-image/blob/main/src/shared-hooks/hooks.ts#L74 and these lines:

   ng-lazyload-image/src/lazyload-image.directive.ts

   Lines 60 to 62 in dd170a5

   	if (this.hooks.isDisabled()) {
   	return null;
   	}

3. The server returns the image tag unchanged (eg. <img [lazyLoad]="'https://...'"/> as you stated above)
4. The client will now execute the javascript on the client.
5. The image will now be loaded right away and not be lazyloaded due to these lines:

   ng-lazyload-image/src/shared-hooks/hooks.ts

   Lines 77 to 79 in dd170a5

   	skipLazyLoading(attributes: Attributes): boolean {
   	return this.isBot(attributes);
   	}

It is confusing and maybe wrong that isBot always returns false on the server. That should be fixed, at least so the code is clearer.

So, when it is SSR, wouldn't it be better to retrieve the User Agent from the header?

Absolutely! But is that possible? I tried to google this but could not find a nice solution for this, but as I said earlier I have no experience with SSR and Angular.