React SSR下设备检测渲染图片出现Prop `src` did not match警告如何解决

方案1：服务端解析User-Agent生成统一设备标识 #

服务端返回desktop的原因是没有正确解析请求携带的User-Agent（UA）头，你可以在服务端从请求头中提取UA字符串，解析后得到设备类型，作为props透传给页面和Image组件，保证服务端和客户端初始渲染的device值完全一致，从根源消除不匹配。
示例代码（Next.js 服务端逻辑）：

import UAParser from 'ua-parser-js'

export async function getServerSideProps(context) {
  const userAgent = context.req.headers['user-agent'] || ''
  const parser = new UAParser(userAgent)
  const isMobile = parser.getDevice().type === 'mobile'
  return {
    props: {
      device: isMobile ? 'mobile' : 'desktop'
    }
  }
}

方案2：客户端侧渲染图片，跳过服务端渲染校验 #

如果不想修改服务端逻辑，可以选择让Image组件仅在客户端完成渲染，规避服务端和客户端渲染结果不一致的问题：

1. 关闭组件的服务端渲染（以Next.js为例）：

import dynamic from 'next/dynamic'
const Image = dynamic(() => import('./Image'), { ssr: false })

2. 或者修改Image组件，在客户端挂载后再更新图片地址，同时忽略hydration警告：

import { useState, useEffect } from 'react'

interface Props {
  image: string;
  alt: string;
  device?: string;
}

export const Image = (props: Props) => {
  const { image, alt, device: defaultDevice = 'desktop' } = props;
  const [clientDevice, setClientDevice] = useState(defaultDevice)
  
  useEffect(() => {
    import('react-device-detect').then(mod => {
      setClientDevice(mod.isMobile ? "mobile" : "desktop")
    })
  }, [])

  const imgPreset = getPreset(clientDevice);
  return (
    <img
        src={image + '?' + imgPreset}
        alt={alt}
        suppressHydrationWarning
    />
  );
};

方案3：使用原生响应式图片能力，规避设备判断 #

你可以直接用HTML原生的srcset/sizes属性实现按设备加载对应规格的图片，完全不需要做设备类型判断，浏览器会自动根据当前视口尺寸选择最合适的图片加载，天然不存在hydration不匹配问题：

interface Props {
  image: string;
  alt: string;
}

export const Image = (props: Props) => {
  const { image, alt } = props;
  const mobilePreset = getPreset('mobile')
  const desktopPreset = getPreset('desktop')
  return (
    <img
        src={`${image}?${desktopPreset}`}
        srcSet={`${image}?${mobilePreset} 480w, ${image}?${desktopPreset} 1200w`}
        sizes="(max-width: 768px) 480px, 1200px"
        alt={alt}
    />
  );
};

这种方案符合Web标准最佳实践，适配性更强，也不需要额外维护设备检测逻辑。

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