Next.js路由切换时闪现旧图片：[trainers].tsx动态路由图片加载异常

问题原因 #

• 动态路由跳转时，同一个Trainers组件会被React复用，不会销毁重建，内部的Image组件实例也会被复用
• Next.js原生Image组件默认会保留上一次渲染的图片内容，直到新的src对应的图片完全加载完成后才会替换内容，这个加载间隙就会出现旧图片短暂显示的问题
• 额外排查点：如果你的路由跳转加了shallow: true配置，会导致getServerSideProps不会重新触发，初始的props.program还是旧路由的数据，useQuery需要等待客户端请求完成才会更新新数据，会进一步拉长旧图片的显示时间

修复方案 #

最直接的修复方案 #

给Image组件绑定和路由参数/图片地址唯一对应的key属性，强制路由参数变化时销毁旧的Image实例，渲染新的实例，避免复用旧内容：

<Image
  key={trainers} // 也可以替换为key={data.preview}，只要保证和新页面的图片唯一对应即可
  src={data.preview}
  layout={"fill"}
  objectFit={"cover"}
  alt={"preview"}
/>

可选优化方案 #

• 移除路由跳转时的shallow: true配置，保证路由切换时getServerSideProps正常触发，提前拿到新页面的图片地址，减少客户端请求的等待时间
• 可以新增加载状态判断，路由切换时先显示骨架屏或者父容器的黑色背景，等新图片加载完成后再显示图片，进一步避免闪烁
• 给Image组件添加placeholder="blur"配置，搭配对应的blurDataURL显示模糊占位图，替换旧图片的显示内容

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