Next.js SSR中<Head>标签未服务端渲染的问题求助

我使用Next.js、Yarn和Redux开发项目，尝试通过API获取SEO数据并通过SSR渲染页面，但<Head>标签实际在客户端渲染，导致Screaming Frog等SEO爬虫工具无法识别页面标题和描述。以下是我的代码，恳请帮忙排查：

页面组件代码 #

import { getMeta } from '@/helpers/globalHelpers';
import Head from 'next/head';
import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement, selectValue, bulkUpdate, reset } from '@/slicers/propertySlice';
import Link from 'next/link';

export default function Home({ meta }) {

  const data = useSelector(selectValue);
  const dispatch = useDispatch();

  console.log(meta);

  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="og:title" content={meta.title} />
        <meta name="og:description" content={meta.metadescription} />
        <meta name="description" content={meta.metadescription} />
        <meta name="keywords" content={meta.keywords} />
        <title>{meta.title}</title>
      </Head>

      Hello world!
    </>
  )
}

export async function getServerSideProps({ resolvedUrl }) {

  const pageData = await getMeta(resolvedUrl);

  return {
    props: { meta: pageData[0] }
  }
}

_document.js代码 #

import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        <Script src="assets/js/jquery.min.js"></Script>
        <Script src="assets/bootstrap/js/bootstrap.min.js"></Script>
        <Script src="assets/js/aos.min.js"></Script>
        <Script src="assets/js/bs-init.js"></Script>
        <Script src="assets/js/checkbox-show-hide.js"></Script>
        <Script src="assets/js/dropdown-saver.js"></Script>
        <Script src="assets/js/floatsearch.js"></Script>
        <Script src="assets/js/heroclean.js"></Script>
        <Script src="assets/js/location-list.js"></Script>
        <Script src="assets/js/mobilemenu.js"></Script>
      </body>
    </Html>
  )
}

• 验证SEO数据获取正确性
  检查getServerSideProps中getMeta返回的pageData[0]是否包含完整且有效的title、metadescription、keywords字段，无undefined或空值。可在getServerSideProps中添加日志打印pageData，部署环境查看服务器日志，确认服务端已正确获取数据。

• 解决Redux hydration不匹配问题
  组件中使用了useSelector和useDispatch，若服务端与客户端的Redux初始状态不一致，会触发hydration不匹配，导致Next.js重新渲染客户端内容覆盖服务端生成的Head标签。
  解决方案：确保Redux在服务端渲染时的初始状态与客户端一致。可在getServerSideProps中获取Redux所需初始数据并通过props传递，或使用next-redux-wrapper这类工具同步服务端与客户端的store状态。

• 检查Next.js版本与Head组件用法
  确认使用的Next.js版本兼容性，旧版本可能存在SSR下Head标签处理问题，建议升级至稳定版。同时，_document.js中的<Head>仅放置全局meta标签，页面内的<Head>放置页面专属内容，避免标签冲突覆盖。

• 查看服务端原始渲染HTML
  打开浏览器“查看页面源代码”（非开发者工具Elements），检查<head>部分是否已包含渲染好的title和meta标签。若源代码中存在，爬虫应能识别；若不存在，说明服务端未完成渲染，需排查getServerSideProps或组件渲染逻辑。

• 确认getServerSideProps执行状态
  确保getServerSideProps在服务端正常执行，未被客户端绕过。可添加日志或使用curl命令请求页面（如curl http://localhost:3000），查看返回HTML的<head>内容是否符合预期。

内容的提问来源于stack exchange，提问作者Ekin Ata Muallaoğlu