在 SSR 上反应水合答案

【问题标题】：React hydration on SSR在 SSR 上反应水合
【发布时间】：2020-06-05 02:09:41
【问题描述】：

我还没有完全理解 React 的 Server Side Rendering。两个示例之间发生了哪些不同的行为？

第一

function Test() {
  const context = useContext(AuthContext)
  const { user } = context

  return (
    user ? <h1>User</h1> : <h1>No User</h1>
  )
}

export default withApollo({ ssr: true })(Test)

===> 发生错误文本内容不匹配。服务器：“无用户”客户端：“用户”

第二

function Test() {
  const context = useContext(AuthContext)
  const [ user, setUser ] = useState(null)

  useEffect(() => {
     setUser(context.user)
  }, [])

  return (
    user ? <h1>User</h1> : <h1>No User</h1>
  )
}

export default withApollo({ ssr: true })(Test)

===> 没有错误。

有什么不同？为什么第一个出错而第二个没有？在 Postman 中，当我请求此组件路由以检查服务器端响应时，两者的响应相同（无用户）。

有什么意义？我知道 useEffect 只在客户端执行，但是第一个也更新为 No User to User 怎么样。水化点，渲染点是什么时候？

【问题讨论】：

标签： reactjs next.js server-side-rendering

【解决方案1】：

如果没有看到 AuthContext 是如何在客户端和服务器渲染上设置的，我不能 100% 做到这一点，但是从逻辑上向后看，这里的区别似乎是 AuthContext 之前已经填充了一个值客户端的第一次渲染，但不是在服务器渲染之前。

这就是为什么在第一个示例中您的服务器渲染不包含用户，但您的第一个客户端渲染包含用户。服务器上AuthContext 中没有用户填充，客户端上AuthContext 中填充了用户，因此第一个客户端渲染与服务器渲染不同，因此出现错误。

在第二个示例中，因为您正在从仅从AuthContext 设置的状态中读取user，所以在第一个客户端使用useEffect 渲染之后，在客户端上的第一个渲染也不包含用户 - 因此服务器渲染和第一个客户端渲染之间没有区别，也没有错误。

【讨论】：