Next.js 14特定动态路由中Suspense不生效问题求助

问题原因 #

1. 缺失Suspense导入：你的page.js代码中使用了<Suspense>组件，但未从React中导入，这是导致Suspense不生效的基础错误。
2. 服务器组件预渲染机制：你的Post组件是async服务器组件，page组件同样属于服务器组件。在Next.js App Router中，嵌套的服务器组件会在服务器端完成所有数据获取与渲染，再将完整HTML发送给客户端——这意味着客户端不会看到Suspense的fallback提示，空白是因为服务器处理数据时客户端未收到任何内容，而非Suspense未生效。

解决办法 #

1. 修复基础导入问题 #

首先在[id]/page.js中补充Suspense的导入：

import { Suspense } from 'react'
// 其余代码保持不变

2. 方案一：客户端组件+动态导入实现加载状态 #

将Post改为客户端组件，配合动态导入让Suspense在客户端触发加载提示：

修改[id]/components/post.js：

'use client'

import { useState, useEffect } from 'react'
import prisma from "@/prisma/client"

export default function Post(props) {
  const [post, setPost] = useState(null)

  useEffect(() => {
    const fetchPost = async () => {
      const data = await prisma.art.findUnique({
        where: { id: Number(props.id) }
      })
      setPost(data)
    }
    fetchPost()
  }, [props.id])

  return <div>{post?.id}</div>
}

修改[id]/page.js：

import { Suspense, lazy } from 'react'
// 动态导入客户端组件
const Post = lazy(() => import('./components/post'))

export default function page({ params }) {
  return (
    <div className="mt-[80px] container text-white mx-auto">
      <Suspense fallback="loading..." key={params.id}>
        <Post id={params.id} />
      </Suspense>
    </div>
  )
}

3. 方案二：服务器组件流式渲染显示加载状态 #

如果想保留服务器组件的SEO与服务器端数据获取优势，可通过模拟延迟测试流式渲染效果（App Router默认支持流式渲染）：

修改[id]/components/post.js：

import prisma from "@/prisma/client"

export default async function Post(props) {
  // 模拟数据获取延迟，用于测试Suspense fallback
  await new Promise(resolve => setTimeout(resolve, 2000))
  
  const post = await prisma.art.findUnique({
    where: { id: Number(props.id) }
  })

  return <div>{post.id}</div>
}

确保[id]/page.js已导入Suspense：

import { Suspense } from 'react'
import Post from './components/post'

export default function page({ params }) {
  return (
    <div className="mt-[80px] container text-white mx-auto">
      <Suspense fallback="loading..." key={params.id}>
        <Post id={params.id} />
      </Suspense>
    </div>
  )
}

这种方式下，服务器会先发送包含fallback的HTML给客户端，待数据获取完成后再发送Post组件内容，客户端会看到加载提示。

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