Dav*_*han 6 html lazy-loading image reactjs server-side-rendering
我正在编写一个基于 React 的应用程序，它使用 SSR 生成适合搜索引擎和初始客户端负载的内容，并在客户端使用 React.hydrate()。都好。
在带有标签的页面上，我在 img 上同时使用 src、srcSet 和 size 属性，以允许客户端选择合适的图像大小。再次，一切都很好。
但是，至少在 Safari 中，当同时使用 src 和 srcSet 时，会加载 src 资源以及相关的 srcSet 资源。我可以在浏览器网络检查器中看到这一点。删除 src 属性会导致浏览器仅加载 srcSet 资源之一。
虽然我可以修复客户端，但这意味着 img 标签在搜索引擎爬虫方面不完整，没有 src 属性。我假设爬虫不使用 srcSet 但我想他们可以这样做。我可以通过使用具有空 SVG 或 1x1 GIF/PNG 的 src 属性的数据 URI 使 img 标记更加完整，但这无助于确保爬虫可以访问适当分辨率的图像资源。网站的性质至少表明图像资源应该可以在搜索引擎上找到，作为一种将访问者吸引到适当内容的方式。
我查看了几个延迟加载 React 组件，它们似乎都遇到了这个问题或其他问题的某种组合。
有谁知道这是否是 Safari 特定的错误，或者是否有针对客户端延迟加载时图像 SSR 的通用解决方案？理想情况下，在不调用次优客户端行为的 SSR 生成代码上，src、srcSet 和大小的首选组合是什么？
注意：延迟加载是可取的，因为它的图片库/索引页面包含大量图像，而移动/低带宽是一个关键的人群。