NextJS 13动态元数据部署Vercel后不更新问题求助

问题描述 #

在NextJS 13中通过后端REST API动态生成页面元数据（title、description等），本地运行正常，但部署到Vercel后，仅首次请求API获取数据，后续API数据更新时，网站元数据不会同步更新。

原因分析 #

NextJS 13的App Router默认对页面进行静态优化，generateMetadata函数的执行结果会被Vercel缓存。除非触发项目重新构建，否则缓存的元数据不会自动更新，导致API数据变更后无法同步到页面。

解决方案 #

通过配置缓存策略或页面动态渲染规则，强制generateMetadata每次请求都拉取最新API数据，以下是几种可行方案：

方案1：在API请求中禁用缓存（推荐） #

修改getMetaApi函数，为请求添加缓存控制规则，确保每次都从API获取最新数据。

改用原生Fetch（NextJS对Fetch有原生缓存支持）

export const getMetaApi = async (page) => {
  try {
    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/get-meta/${page}`, {
      // 完全禁用缓存，每次请求都拉新数据
      cache: 'no-store',
      // 可选：设置缓存过期时间，比如每60秒重新验证一次
      // next: { revalidate: 60 }
    });
    return await response.json();
  } catch (err) {
    console.log(err);
  }
};

保留Axios的修改方式

如果坚持使用Axios，通过请求头覆盖缓存策略：

export const getMetaApi = async (page) => {
  try {
    const response = await Axios.get(`get-meta/${page}`, {
      headers: {
        'Cache-Control': 'no-store, max-age=0'
      }
    });
    return response.data;
  } catch (err) {
    console.log(err);
  }
};

方案2：强制页面动态渲染 #

在about-us/page.tsx中添加动态渲染配置，确保每次用户访问时都重新执行generateMetadata：

// 强制页面为动态渲染，每次请求都重新生成元数据
export const dynamic = 'force-dynamic';

// 或者设置缓存重新验证时间（比如每60秒更新一次缓存）
// export const revalidate = 60;

export async function generateMetadata(): Promise<Metadata> {
  // 原函数代码保持不变
  const meta = await getMetaApi("about");
  return {
    // ... 原元数据配置
  };
}

关键说明 #

• cache: 'no-store'：完全禁用请求缓存，适合需要实时更新的场景，但会增加API请求次数。
• revalidate: 数字：设置缓存过期时间，到期后NextJS会在后台自动重新生成页面并更新缓存，平衡实时性和性能。
• dynamic: 'force-dynamic'：强制页面每次请求都动态生成，适合需要完全实时的场景，但性能开销较大。

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