NextJS SSR中使用React Hooks的影响及useState的SEO疑问

完全没必要避免使用useState来实现点击显隐这类UI交互，它不会对你的SEO造成负面影响，原因如下：

1. SSR与useState的工作逻辑
   当你通过getServerSideProps完成数据获取后，服务器会基于组件的初始状态（包括useState的初始值）渲染出完整的HTML字符串并返回给客户端。搜索引擎爬虫抓取的就是这部分服务器渲染的初始HTML内容，后续通过setState触发的UI状态变更，是纯客户端的交互行为——爬虫不会模拟点击操作，所以根本不会触及这部分动态变化的内容。

2. 和useEffect的本质区别
   你提到的useEffect会影响SEO，是因为它是在客户端水合（hydration）完成后才执行的钩子。如果页面的核心内容依赖useEffect去获取数据或渲染，那这部分内容不会出现在服务器返回的HTML里，爬虫自然抓不到。但useState的初始状态是在服务器渲染阶段就确定并渲染的，后续的状态修改只是客户端的UI更新，完全不影响爬虫能抓取到的初始内容。

举个实际场景的例子：

export async function getServerSideProps() {
  // 服务器端获取所有需要的SEO相关数据
  const data = await fetchData();
  return { props: { data } };
}

export default function Page({ data }) {
  const [showDetail, setShowDetail] = useState(false);

  return (
    <div>
      {/* 这部分核心内容由服务器渲染，爬虫能正常抓取 */}
      <h1>{data.title}</h1>
      <p>{data.summary}</p>
      
      {/* 点击显隐的交互仅在客户端生效，初始状态（隐藏）已在服务器渲染 */}
      <button onClick={() => setShowDetail(!showDetail)}>
        {showDetail ? '隐藏详情' : '查看详情'}
      </button>
      {showDetail && <div>{data.detail}</div>}
    </div>
  );
}

在这个例子里，爬虫会抓取到标题、摘要，以及对应初始状态的HTML结构，点击交互完全是用户在浏览器里的操作，和SEO无关。

总结：只要你的页面核心SEO内容都是通过getServerSideProps获取并在服务器端完成渲染的，useState这类用于客户端交互的钩子可以放心使用，无需担心SEO问题。

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