NextJs中使用state设置动态Head标签查看页面源码值为空的问题

开发者阿泽

2026-8-27

问题核心原因

首先明确一个基础认知：浏览器右键「查看页面源代码」展示的是服务端首次直出的原始静态HTML，只有服务端渲染阶段生成的内容会出现在这里。客户端hydration完成后，通过state更新、异步逻辑修改的内容，只会实时更新浏览器内存中的DOM，不会修改这份原始静态源码，你打开DevTools的Elements面板检查head节点，就能看到meta标签实际已经正常渲染。

你遇到的现象本质是两个问题叠加导致的：

你的代码中getServerSideProps返回的props字段是data，但类组件里没有在constructor接收props初始化state，也没有通过getDerivedStateFromProps生命周期把props里的接口数据同步到state的myDescription、name字段。服务端执行render的时候，this.state里这两个字段本身就是undefined，所以首次直出的HTML里，不管是Head里的description还是h1里的name，初始值都是空的。
你看到页面h1内容正常显示，是客户端hydration完成后，你未贴出的生命周期逻辑给state赋了值，客户端触发重渲染补上了h1的内容。next/head的渲染逻辑和普通DOM完全一致，不存在特殊的加载优先级问题，你把Head放到myContent里也没用，本质是首次服务端渲染时拿不到state里的值。

修复方案

如果需要动态meta内容出现在页面源代码（即满足SEO抓取要求，服务端渲染阶段就生成完整内容），不要额外绕一层state，直接使用getServerSideProps返回的props渲染Head内容，不要依赖客户端生命周期才会赋值的state。
参考修正代码：

import Head from 'next/head'
import React from 'react'

class ContentPage extends React.Component {
  myContent() {
    const { pageData } = this.props
    return <h1>{pageData.name}</h1>
  }

  render() {
    const { pageData } = this.props
    return (
      <>
        <Head>
          <meta name='description' content={pageData.myDescription} /> 
        </Head>
        {this.myContent()}
      </>
    )
  }
}

export async function getServerSideProps() {
  const fetchMyData = await fetch('https://myapi.com')
  const fetchedMyData = await fetchMyData.json()   

  return {
    props: {
      pageData: {
        name: fetchedMyData.entries.name,
        myDescription: fetchedMyData.entries.description
      }           
    }
  }
}

export default ContentPage

如果你的动态Head内容不需要SEO兼容，纯客户端交互时修改，不需要纠结「查看页面源代码」为空的问题，这是客户端渲染内容的正常表现，实际DOM里的meta标签是正常生效的。
补充注意：Next.js会自动合并同一页面中多个位置声明的Head标签，不需要强制把所有Head内容写到同一个位置，只要保证服务端渲染阶段用到的动态值能直接从props获取即可。

内容的提问来源于stack exchange，提问作者buzz