![](/img/trans.png)
[英]React-query + Nextjs using hydration config for SSR doesn't use cached results and always have to wait fetch again
[英]React hydration on SSR
我不完全理解 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 怎么样。 什么时候是水化点,渲染点?
如果没有看到如何在客户端和服务器渲染上设置AuthContext
,我不能 100% 做到这一点,但是从逻辑上讲,这里的区别似乎是AuthContext
在客户端第一次渲染之前已经填充了一个值,但不是在服务器渲染之前。
这就是为什么在第一个示例中您的服务器渲染不包含用户,但您的第一个客户端渲染包含用户。 服务器上的AuthContext
中没有用户填充,客户端上的AuthContext
填充了用户,因此第一个客户端渲染与服务器渲染不同,因此出现错误。
在第二个示例中,因为您正在从 state 读取user
,该用户仅在使用useEffect
的第一个客户端渲染后从AuthContext
设置,所以客户端上的第一个渲染也不包含用户 - 因此服务器渲染和第一个客户端渲染之间没有区别,并且没有错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.