React Suspense在Next.js中失效，shadcn/ui骨架 fallback 不显示

1. 开启Next.js Image组件的Suspense支持 #

Next.js的Image组件默认不会触发Suspense，必须显式开启suspense={true}和loading="lazy"属性，示例代码：

import Image from 'next/image'
import { Suspense } from 'react'
import { Skeleton } from '@/components/ui/skeleton'

// 正确用法
<div className="relative">
  <Suspense fallback={<Skeleton className="absolute inset-0 z-10 h-full w-full bg-gray-200 dark:bg-gray-800" />}>
    <Image
      src="/example.jpg"
      alt="示例图片"
      width={500}
      height={300}
      loading="lazy"
      suspense={true} // 关键配置
    />
  </Suspense>
</div>

2. 修复骨架的布局定位问题 #

你添加了position:absolute和z-10，但缺少父容器的position:relative，导致骨架脱离文档流后无法正确占位。给Suspense的直接父容器加上relative类，同时用inset-0让骨架完全填满父容器，确保和图片的占位尺寸一致。

3. 检查Suspense的边界范围 #

确保Suspense直接包裹触发Suspense的组件（比如配置好的Image），不要在中间嵌套无关组件。如果是远程图片，还要确认next.config.js中已添加图片域名到images.domains数组，避免加载异常导致Suspense不触发。

4. 排查样式冲突 #

检查是否有自定义样式覆盖了骨架的默认样式，比如opacity:0、display:none或者层级被其他元素压制。可以临时给骨架添加明确的背景色（如bg-gray-200），测试是否能正常显示。

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