CODEWITHSUNDEEP
reactjsnext.jslazy-loadingimage-optimization
Lev Pleshkov
Lev Pleshkov

Reputation: 415

How to serve images from remote storage to client with Next.js

This is a little bit more of a speculative question regarding the best practices of serving the images from remote object storage.

According to Next.js docs, one should load remote data to server components whenever possible. If that also accounts for images, the client would be able to receive the images with all the benefits the framework offers (e.g. optimised size and format, SEO, hide API keys, eliminate layout shift, etc).

  1. Wouldn't that mean that instead of being loaded directly to the client, the image is first loaded from remote storage to the server and only then to the client?
  2. And if so, do the optimization benefits still overweight the extra traffic induced to the server by this approach when implementing the page with tens of images*?

* I'm especially interested in the case when images are like some product photos, i.e. can be publicly available.

Upvotes: 0

Views: 454

Answers (1)

kca
kca

Reputation: 6121

  1. Wouldn't that mean that instead of being loaded directly to the client, the image is first loaded from remote storage to the server and only then to the client?

Those images should ideally be cached on the server, so that there is only one connection between client and server (and only occasionally an update connection between remote storage and server). If there is no caching, then yes, then it is two connections instead of one.

  1. And if so, do the optimization benefits still overweight the extra traffic induced to the server by this approach when implementing the page with tens of images?

If so, there are still some things to consider.

Some points that come to my mind are these (including caching, for the sake of completeness):

  • The data can be cached on the server
  • Images can be optimized, so that only a smaller image is sent to the client
  • You might not want the client to know the data sources or be confused about the data sources
  • The client might have blocked some connections and wants to allow only your domain
  • Your website might want to have a strict Content Security Policy, and if the image URLs vary a lot, it can be problematic or impossible to e.g. add all the URLs to the img-src directive

If nothing of the above (and nothing of the points listed under Fetching data on the server) apply to you, then you are right, it's just another connection for each image.

Upvotes: 1

Related Questions