Next.js 14中用于社交媒体预览的自定义Meta标签减慢了页面渲染速度

tvokkenx 于 2023-11-18 发布在其他

关注(0)|答案(1)|浏览(135)

我正在使用Next.js 14，希望动态自定义Meta标签，以增强Discord和Twitter等社交平台上的网站预览。我需要显示的元数据需要后端调用，我已经按照Next.js documentation使用generateMetadata()实现了。
然而，我遇到了一个性能问题：合并generateMetadata()会显著降低页面渲染速度。在此之前，初始HTML几乎是即时加载的，API数据提取发生在加载后。
以前，我使用了一种解决方法，从请求对象中提取用户代理来确定请求者是Discord还是Twitter，如果是，我将调用我的API后端来生成必要的元数据;如果没有，我会跳过这一步，以避免不必要的加载时间，因为它对于常规的浏览器显示是多余的。随着generateMetadata()的引入，我不再能够访问请求对象，也无法识别用户代理。
我正在寻找关于如何实现这一点的建议或最佳实践。有没有一种方法可以访问用户代理或替代方法来有条件地生成Meta标签而不影响页面加载速度？

next.js

来源：https://stackoverflow.com/questions/77444119/custom-meta-tags-in-next-js-14-for-social-media-previews-slow-down-page-renderin

1条答案

按热度按时间

lztngnrs1#

在开发环境中，这是意料之中的事情。我在生产环境中使用了类似于下面的示例（过于简化）的代码，并且没有看到任何性能问题：

interface Props {
  params: { id: string };
}

export default async function MyPage(props: Props): Promise<JSX.Element> {
  return <>{props.params.id}</>
}

export async function generateMetadata(props: Props): Promise<Metadata> {
  return await getUserMetadata(props.params.id);
}

字符串
无论如何，如果这也发生在生产中，那么它要么是您的网站上的错误，要么是Next.js中的错误，最好在存储库中发布为issue。

赞(0）回复(0）举报 2023-11-18

我来回答

Next.js 14中用于社交媒体预览的自定义Meta标签减慢了页面渲染速度

1条答案

相关问题

热门标签

最新问答