SSR 页面非关键区域交互延迟：用渐进式…

当服务端渲染页面包含非关键、无需立即交互的区域时，用渐进式 hydration 延迟这些区域的 JS 与 hydration，优先让关键区域可交互。

适用场景

解决思路

1. 将非关键组件包在 `<Suspense>` 边界中，并提供合适的 fallback。
2. 使用 `React.lazy()` 配合代码分割，延迟加载首屏以下或很少使用的组件。
3. 在 React 18+ 中利用 selective hydration，它会自动优先处理用户已交互区域。
4. 在 Next.js 中对真正只在客户端使用的 widget 使用 `next/dynamic` 并设置 `{ ssr: false }`。
5. 使用 React concurrent mode 实现渐进式 hydration：把每个 chunk 的 hydration 作为任务；当有更高优先级任务（如用户输入）时，暂停 hydration 并切换到处理用户输入。
6. 使用 `lazy()`、`Suspense()` 提供声明式 loading 状态，在 chunk 懒加载期间显示加载指示器。
7. 使用 `SuspenseList()` 定义懒加载组件的优先级。
8. 将渐进式 hydration 与 Server Components 结合：组件可从服务端重新获取并随着流式传输在客户端渲染，而不是等待整个 fetch 完成。
9. 参考 Preact/Next.js POC：使用 `pool-attendant-preact` 库以 Preact x 实现 partial hydration。
10. 使用 `next-super-performance` 这个 Next.js 插件（基于上述库）改善客户端性能。
11. 使用 `pool-attendant-preact` 的 `withHydration` API 标记更需要交互的组件，使它们优先 hydration。
12. 对剩余组件在客户端使用 `hydrate()` API 进行 hydration，例如 `hydrate([Teaser])`。
13. 实现时确保所有组件仍使用 SSR 生成 HTML。
14. 实现时将代码拆分为单个组件或 chunk。
15. 实现时支持这些 chunk 在客户端按开发者定义的顺序 hydration。
16. 实现时确保已 hydration 的 chunk 不阻塞用户输入。
17. 实现时为延迟 hydration 的 chunk 提供某种 loading indicator。
18. 从 DOM 树根部开始 hydration，但让各个片段在一段时间内逐个激活；某些分支可暂停 hydration，等到进入 viewport 或其他触发条件再恢复。
19. 使用代码分割延迟执行每次 hydration 所需的资源加载，从而减少让页面可交互所需的 JavaScript。
20. 根据条件 hydration 组件，例如当组件在视口中可见时。
21. 对页面中大多静态、在视口外和/或不常需要的组件做懒加载。
22. 通过代码分割减少 bundle size，减少加载时执行的代码，从而缩短 FCP 与 TTI 之间的时间。
23. 使用渐进式 hydration 避免常见 SSR Rehydration 陷阱：服务端渲染的 DOM 树被销毁后立刻重建。
24. 只请求最小必要 JavaScript，延迟不重要部分的 hydration，只在用户需要时才 hydration 节点。
25. 对主要为静态、只有少量交互元素的网站，不必为屏幕上每个组件发送巨大的 React bundle；页面加载时只 hydration 某些部分，其余按需 hydration。

适用边界 · 注意事项

• 当整个页面都是交互式的，所有组件都需要立即 hydration 时。
• 当管理 hydration 边界的复杂性超过性能收益时。
• 对于总 JavaScript 已经很小且 hydration 很快的小页面。