如何使用 Next.js 将远程存储中的图像提供给客户端

问题描述 投票:0回答:1

这是一个关于从远程对象存储提供图像的最佳实践的推测性问题。

根据 Next.js 文档,应该将远程数据加载到 服务器组件 只要有可能。如果这也考虑到了图像,那么客户端将能够接收具有框架提供的所有优势的图像(例如优化的尺寸和格式、SEO、隐藏 API 密钥、消除布局偏移等)。

  1. 这是否意味着图像不是直接加载到客户端,而是首先从远程存储加载到服务器,然后才加载到客户端?
  2. 如果是这样,在实现具有数十个图像的页面*时,优化的好处是否仍然会超过通过这种方法给服务器带来的额外流量?

* 我对图像类似于某些产品照片(即可以公开)的情况特别感兴趣。

reactjs next.js lazy-loading image-optimization
1个回答
0
投票
  1. 这是否意味着图像不是直接加载到客户端,而是首先从远程存储加载到服务器,然后才加载到客户端?

理想情况下,这些图像应该缓存在服务器上,以便客户端和服务器之间只有一个连接(远程存储和服务器之间偶尔会有更新连接)。 如果没有缓存,那么就是两个连接而不是一个,是的

  1. 如果是这样,在实现包含数十张图像的页面时,优化的好处是否仍然会超过这种方法给服务器带来的额外流量?

如果是这样,还有一些事情需要考虑。

我想到的一些要点是这些(包括缓存,为了完整起见)

  • 数据可以缓存在服务器上
  • 可以优化图像,以便仅将较小的图像发送给客户端
  • 您可能不希望客户知道数据源或对数据源感到困惑
  • 客户端可能阻止了某些连接并希望仅允许您的域
  • 您的网站可能需要严格的内容安全策略,如果图像 URL 变化很大,则可能会出现问题或不可能,例如将所有 URL 添加到
    img-src
    指令

如果上述任何内容(以及在服务器上获取数据下列出的要点均不适用),那么你是对的,这只是每个图像的另一个连接。

© www.soinside.com 2019 - 2024. All rights reserved.