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

【问题标题】：Meta tags missing on dynamic pages for NextJS ApplicationNextJS 应用程序的动态页面上缺少元标记
【发布时间】：2020-10-30 19:36:10
【问题描述】：

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

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

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

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

谢谢。

【问题讨论】：

看起来很奇怪。我认为next.js 将在服务器端渲染上将所有内容包装在<Head> 中。您能否展示一下您是如何在[userID].js 中添加元标记的？
我正在努力解决同样的问题。我通过<Head> 在使用动态路由的页面中添加的元标记，即使只是硬编码的，也不会被拾取。

标签： javascript next.js

【解决方案1】：

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

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

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

【讨论】：