NextJs 14-使用静态导出生成元数据

Question

我们正在尝试根据从 API 获取的数据添加元信息。我们使用导出静态导出页面。它在开发中完美运行，但是当我尝试对其进行构建时（启用导出的下一个构建），此函数会被多次调用，因此 API 会抛出 429 超时错误。

以下是执行业务逻辑的函数：

export async function generateMetadata(): Promise<Metadata> {
  const portal = await GetPortalTheme().then((res: any) => {
    if (res.data) {
      return res.data.portal;
    }
  });
  const setting = JSON.parse(portal.settings || "{}");
  return {
    title: portal.name || "portal",
    description: "Innovate your out bound call",
    icons: {
      icon: setting.logo?.url,
    },
  };
}

它应该做什么？

此 API 应调用一次，并为所有页面设置元数据。

Answer 1

因此，为了找到解决此问题的解决方案，我们实施了一种在本地存储值的策略，从 API 获取数据后，数据存储在本地变量中。然后我们设置了一个条件，只有当该值不存在时，才调用 API，否则不调用它。

这是我们遵循的方法：

let portalSettings: any;

export async function generateMetadata(): Promise<Metadata> {
  let portal;

  if (!portalSettings) {
    portal = await GetPortalTheme().then((res: any) => {
      if (res.data) {
        return res.data.portal;
      }
    });
    portalSettings = {
      setting: JSON.parse(portal.settings || "{}"),
      name: portal.name,
    };
  }
  return {
    title: portalSettings.name || "portal",
    description: "Innovate your out bound call",
    icons: {
      icon: portalSettings.setting.logo?.url,
    },
  };
}

如果我们可以改进此代码或者您有任何建议，请告诉我。