在 SSR 上反应水合作用

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)

===> 发生错误文本内容不匹配。服务器："No User" 客户端："User"

第二

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 中，当我请求此组件路由以检查服务器端响应时，两者的响应相同（无用户）。

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

Answer 1

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

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

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

在 SSR 上反应水合作用

React hydration on SSR

reactjs

server-side-rendering

next.js