跳到主要内容

用 RSC 重写一遍时踩到的坑

服务端组件让数据获取变简单了,但边界一旦画错,代价会以水合错误的形式还回来。

目录

把整站迁到 App Router 之后,最常出现的错误不是类型报错,而是水合不一致。

不要在渲染期读浏览器状态

任何在服务端渲染时无法确定的值 —— localStorage、matchMedia、new Date() —— 都不要在首帧使用。

我的做法统一改成:服务端给一个稳定的默认值,挂载后再用 useEffect 换成真实值。

把客户端边界尽量压低

一个 'use client' 会让整棵子树都进客户端包。所以它应该尽可能靠近真正需要交互的那个按钮。

边界画在组件树的越高处,代价越大。
分享X / Twitter
你可能也想读

你可能也想读

评论

来说第一句吧

写评论

不会公开
选填,审核通过后会显示在称呼旁边
评论已提交,审核后显示。
订阅收信

喜欢的话,可以订阅收信

大约每月 1–2 封 · 没有广告,也没有转发 · 只用来发信,不会分享给任何人。

联系我

说说你在做什么,以及需要什么帮助。

通常 1–2 个工作日内回复