Next.js 服务端渲染场景下如何正确使用 React Hook？

当前代码触发运行报错，本质是两个硬性规则限制：

1. React Hook 的使用边界约束：所有React Hook 必须在React函数组件、自定义Hook的作用域内调用。getServerSideProps是完全脱离React组件树、在Node.js服务端独立运行的异步函数，不满足Hook的运行前提，直接调用会触发React的Hook规则校验报错。
2. 运行环境的API限制：useLocalStorage这类Hook的底层逻辑依赖浏览器环境下的window.localStorage全局对象，Node.js服务端环境本身不存在该全局变量，就算绕过Hook规则校验，运行时也会直接抛出localStorage is not defined错误。

所有和本地存储相关的Hook调用，必须放到页面的React组件作用域内，配合水合兼容逻辑实现，完全不需要、也不允许放到服务端运行的getServerSideProps代码块中，可参考以下正确写法：

// pages/xxx.tsx 页面组件
import { useLocalStorage } from '你的useLocalStorage实现路径'

// getServerSideProps 仅处理纯服务端逻辑，完全不涉及浏览器端专属操作
export async function getServerSideProps() {
  // 仅处理服务端可完成的逻辑，比如从数据库、第三方接口拉取公共页面数据
  return {
    props: {}
  }
}

export default function Page() {
  // 仅在React组件内部调用本地存储Hook
  const { data } = useLocalStorage()

  return (
    <div>
      <p>读取到的本地存储内容：{data ?? '加载中'}</p>
    </div>
  )
}

如果业务逻辑确实需要把浏览器端localStorage存储的内容传给服务端做处理：

• 不要在服务端代码中尝试直接读取浏览器本地存储
• 客户端发起页面跳转、数据请求时，将localStorage中对应的业务值塞入请求头、查询参数或请求体中
• 在getServerSideProps的入参ctx中读取传递过来的参数，完成服务端逻辑计算

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