在 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)

===> 發生錯誤文本內容不匹配。 服務器：“無用戶”客戶端：“用戶”

第二

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填充了用戶，因此第一個客戶端渲染與服務器渲染不同，因此出現錯誤。

在第二個示例中，因為您正在從 state 讀取user ，該用戶僅在使用useEffect的第一個客戶端渲染后從AuthContext設置，所以客戶端上的第一個渲染也不包含用戶 - 因此服務器渲染和第一個客戶端渲染之間沒有區別，並且沒有錯誤。