SSR水化反应

Question

我不完全理解React的Server Side Rendering。两个例子之间发生了什么不同的行为？

First

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中，当我请求这个组件路由来检查服务器端响应时，两者的响应是相同的(No User)。

重要的是什么？useEffect只在客户端执行，我知道，但是第一个也更新为“没有用户对用户”怎么样？水化点是什么时候，渲染点？

Answer 1

如果不了解在客户机和服务器呈现上如何设置AuthContext，我就不能100%地这样做，但是在逻辑上向后看，这里的区别似乎是，在客户机第一次呈现之前，AuthContext已经填充了一个值，而不是在服务器呈现之前。

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

在第二个示例中，由于您从状态读取user，状态仅在第一个客户端使用useEffect呈现后从AuthContext设置，因此客户机上的第一个呈现也不包含用户，因此服务器呈现与第一个客户端呈现没有区别，也没有错误。