head 标签未出现在视图源中：next:js
我已经创建了我的下一个 js appp，在其中实现了我的head标签，但是当我通过右键单击查看源时，我看不到我的标题和元标签，我该如何实现这一点？
尽管头标签丢失了，但view souce 可以在其中找到inspect element
<Head>
<title> {itm.Name} - wixten </title>
<link rel="shortcut icon" href="/wixten.png" />
<meta
name="viewport"
content="initial-scale=1.0, width=device-width"
/>
<meta name="description" content={itm.Summary} />
<meta charSet="utf-8" />
<meta property="og:title" content={itm.Name} />
<meta property="og:description" content={itm.Summary} />
<meta property="og:image" content="images/wixten.png" />
<meta property="og:locale" key="og:locale" content="en_US" />
<meta property="og:type" key="og:type" content="website" />
<meta
property="og:url"
key="og:url"
content={`${baseurl}${itm._id}`}
/>
</Head>
我正在codesandbox中添加完整代码
https://codesandbox.io/s/sweet-franklin-gpht9?file=/pages/index.js
我面临的问题是这个网站
https://wixten.com/query/61f4f5f9e41f700023c833c0
您的标题和元标记不会出现在源代码中，因为您在页面加载后从客户端获取它们。
为了将它们包含在源代码中，需要通过服务器端渲染 (SSR) 或静态站点生成 (SSG) 提前获取它们。下一个文档将彻底介绍这些选项。
假设您想走 SSR 路线，您需要执行以下操作：
export async function getStaticProps(context) {
const res = await axios.get(...);
return {
// will be passed to the page component as props
props: {
Item: res.data
},
}
}
然后你可以在你的组件中使用它，如下所示：
function MyPageComponent({ Item }) {
return (
<Head>
<title>{Item.name}</title>
</Head>
)
}
| 归档时间： |
|
| 查看次数： |
6706 次 |
| 最近记录： |