Next13中结合Suspense使用generateMetadata及自定义加载组件不显示问题

generateMetadata 是在服务器生成页面完整 HTML 之前执行的异步函数，它的后端请求会阻塞整个页面的 HTML 发送。也就是说，在 fetchDetail 请求完成、metadata 生成完毕前，客户端根本收不到任何页面内容，自然看不到 Suspense 包裹的自定义骨架。

另外要明确：Suspense 是 React 组件层面的特性，只能用于组件树中，无法在 generateMetadata 这类独立异步函数里使用。

方案一：页面级 loading.jsx（推荐） #

Next.js 13 App Router 支持为单个页面创建专属加载组件，完全满足你“不同页面用不同骨架”的需求。这个组件会在服务器处理页面数据（包括 generateMetadata 的请求）时，立即在客户端显示，无需等待服务器返回完整页面。

实现步骤 #

1. 在你的页面目录（比如 app/[lang]/anime-detail/）下创建 loading.jsx 文件，直接复用你的自定义骨架组件：

// app/[lang]/anime-detail/loading.jsx
import AnimeDetailLoader from './loader'

export default function Loading() {
  return <AnimeDetailLoader />
}

2. 保留原页面中的 Suspense，用于处理 AnimeDetailContent 内部子组件的异步加载逻辑；而页面级的 loading.jsx 会负责整个页面（包括 metadata）加载时的全局骨架展示。

这样用户访问页面时，客户端会立刻看到自定义骨架，直到服务器完成所有数据准备后，再替换为实际页面内容。

方案二：复用请求优化加载速度 #

如果不想用 loading.jsx，可以通过复用请求减少重复调用，加快整体加载速度，但仍无法解决 metadata 请求阻塞页面 HTML 发送的问题（用户还是要等 metadata 生成完才能看到页面）。

修改原代码，将 fetchDetail 请求提取为共享函数，让 generateMetadata 和页面组件复用同一请求（Next.js 会自动对相同的 fetch 请求去重）：

import { Suspense } from 'react'
import { getDictionary } from '@/lib/dictionary'
import AnimeDetailContent from './content'
import AnimeDetailLoader from './loader'
import { fetchDetail } from '@/services/anime-api'

// 共享请求逻辑，避免重复调用后端接口
async function getAnimeDetail(animeId) {
  return fetchDetail({ animeId })
}

export async function generateMetadata({ params: { animeId } }) {
  const animeDetail = await getAnimeDetail(animeId)
  return {
    title: `${process.env.NEXT_PUBLIC_APP_NAME} || ${animeDetail.title}`
  }
}

async function AnimeDetailPage({ params: { lang, animeId } }) {
  const dictionary = await getDictionary(lang)
  const detailPageTranslation = dictionary.page.detail
  // 提前获取数据，传给子组件避免重复请求
  const animeDetail = await getAnimeDetail(animeId)

  return (
    <div className="px-1 pt-20 container lg:mx-auto min-h-screen">
      <Suspense fallback={<AnimeDetailLoader />}>
        <AnimeDetailContent
          animeId={animeId}
          translation={detailPageTranslation}
          animeDetail={animeDetail}
        />
      </Suspense>
    </div>
  )
}

export default AnimeDetailPage

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