Next.js静态站点图片滚动时重复加载问题求助

1. 配置静态图片的缓存策略 #

浏览器重复请求图片，大概率是服务器/Next.js未设置合适的缓存头，导致图片无法被持久缓存。在next.config.js中添加静态资源缓存配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    unoptimized: true,
  },
  async headers() {
    return [
      {
        source: '/images/:path*', // 替换为你的图片实际存放路径，如public/images下则用此规则
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

该配置会让浏览器将图片缓存1年并标记为不可变，避免重复请求。

2. 确保图片路径稳定 #

检查photo、photo2等变量对应的图片路径，避免每次渲染生成带随机参数的动态URL，改用固定静态路径（如/images/photo1.webp），防止浏览器判定为新资源。

3. 优化图片加载属性 #

给<img>标签添加loading="eager"和decoding="async"属性，帮助浏览器更合理处理加载与缓存：

<img src={photo} className="img" loading="eager" decoding="async" />

loading="eager"会在页面加载时就加载所有图片（适配你20MB总大小的场景），避免滚动触发重复加载；decoding="async"让浏览器异步解码图片，不阻塞页面渲染。

4. 验证缓存生效状态 #

打开浏览器DevTools（F12）切换到Network面板，取消勾选Disable cache，滚动页面后查看图片请求的Size列：若显示from disk cache或from memory cache，说明缓存已生效。

内容的提问来源于stack exchange，提问作者brianso123