Question

我对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。水化点是什么时候，渲染点是什么？

Answer 1

如果不了解如何在客户端和服务器渲染上设置AuthContext，我就不可能100％做到这一点，但是按照逻辑上的倒退来看，这里的区别似乎是AuthContext已经被填充在客户端第一次渲染之前具有一个值，但在服务器渲染之前没有该值。

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

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

在SSR上反应水合

1 个答案: