如何通过一次API请求同时渲染页面并生成元数据？

在Next.js App Router中，可通过以下两种方式实现仅发起一次API请求，同时满足页面渲染和元数据生成的需求：

方法一：利用Next.js自动请求去重（推荐） #

Next.js在同一服务器请求周期内，会自动对相同的API请求进行去重。只要你的getContentInfo函数内部基于标准fetch API实现，Next.js会自动缓存请求结果，确保generateMetadata和页面组件的调用只会触发一次实际的API请求。

若getContentInfo是自定义函数，可确保其内部使用fetch并合理配置缓存策略（服务器端默认缓存策略为force-cache），示例如下：

async function getContentInfo({ id, language }) {
  const res = await fetch(`https://your-api-url/content/${id}?lang=${language}`, {
    // 可选：显式指定缓存策略，默认服务器端已启用force-cache
    cache: 'force-cache'
  });
  if (!res.ok) {
    throw new Error('获取内容失败');
  }
  return res.json();
}

原页面代码无需修改，Next.js会自动处理请求去重，实际仅发送一次API请求。

方法二：显式封装带内存缓存的数据获取函数 #

如果getContentInfo不依赖fetch（比如使用第三方HTTP库），可自行封装带内存缓存的函数，确保同一请求周期内重复调用返回相同结果：

const contentCache = new Map();

async function getContentInfo({ id, language }) {
  const cacheKey = `${id}-${language}`;
  // 命中缓存则直接返回
  if (contentCache.has(cacheKey)) {
    return contentCache.get(cacheKey);
  }

  // 替换为你的实际数据获取逻辑
  const data = await yourCustomApiCall({ id, language });
  contentCache.set(cacheKey, data);
  return data;
}

原页面的generateMetadata和Home组件保持原有调用方式即可，第一次调用会将结果存入缓存，第二次调用直接读取缓存值，不会重复发起API请求。

注意事项 #

• 内存缓存仅在当前服务器请求周期内有效，不会跨请求缓存，避免数据一致性问题。
• 若需长期缓存，可结合Next.js的unstable_cache API（注意该API目前为不稳定状态，后续可能调整），或使用Redis等外部缓存服务。

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