javascript - NextJS 应用程序的动态页面上缺少元标记

Question

我有一个 NextJS 应用程序，下面是页面的布局方式：

App
--pages
----_app.js
----index.js
----company.js
----users
------[userID].js

所以，我有一个动态页面 [userID].js，它通过路由器获取用户 ID，以显示不同用户的信息。我正在使用 next/head 动态生成元标记。当我加载页面并检查元素时，我可以在那里看到元标记。但是当我为动态页面 [userID].js 执行“查看源代码”时，我看不到元标记。当我“查看源代码”时，我可以看到所有其他页面的元标记。

有谁知道这是为什么以及我能做些什么来解决它？

谢谢。

Answer 1

Next.js 路由器是一个客户端路由器。如果您基于用户信息创建元标记，这取决于 Next.js 路由器，它将被添加到客户端。

因此，您会在 DevTools Elements 面板中看到它，因为客户端 JS 已执行但不会在页面源中看到它，因为它只是普通的服务器响应而没有 JS 执行。

这听起来不像是一个需要解决的问题。getServerSideProps但是，如果这些元标记必须在第一次呈现时出现，您可以在服务器端呈现页面。但是，您将失去此页面的静态优化。