SSR + 客户端交互组件,首屏经常出现 "服务端渲染的内容 → 客户端接管后闪一下 → 变成正确状态" 的抖动。体验很糟糕。
常见的几个原因:服务端拿不到 window、依赖时间戳的渲染、登录态在客户端才恢复。
我的处理套路:
- 能上 RSC 的全上 RSC,根本不 hydrate。
- 必须客户端交互的,用
useEffect标志位控制,首屏渲染占位。 - 关键交互组件加
suppressHydrationWarning(谨慎用)。
最干净的办法还是把动态内容从首屏剥离。
大家都是怎么治 hydration 抖动的?