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

Question

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

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

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

有人知道这是为什么吗?我能做些什么来修复它？

谢谢。

Answer 1

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

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

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