在 SEO 非优先、需要完全交互式单页体验的 React…

适用于内部工具、仪表盘或 SPA 等 SEO 非优先且需要无刷新交互的 React 应用。

适用场景

解决思路

1. 服务端只渲染最简 HTML 容器，把内容展示、数据获取、模板和路由交给在浏览器/客户端执行的 JavaScript。
2. HTML 中只放单个根 `<div id="root"></div>`，由客户端 JavaScript 负责内容显示和更新，并原地更新已渲染 HTML，避免服务器往返。
3. 用 React 的 `createRoot(document.getElementById('root')!).render(<Clock />)` 挂载根组件。
4. 在组件内用 `useState` 和 `useEffect` 处理实时状态，例如用 `setInterval` 每秒执行 `setTime(new Date())`，并在 effect 清理函数中执行 `clearInterval(id)`。
5. 把大部分应用逻辑放在客户端执行，通过 API 调用与服务器交互以获取或保存数据，几乎所有 UI 都在客户端生成。
6. 首次请求时加载整个 Web 应用；用户点击链接导航时不向服务器请求新页面渲染，而是在客户端运行代码改变视图/数据。
7. 按事件驱动进行数据获取：页面可先无数据加载，再在 page-load 或 button-click 等事件中用 API 调用获取数据；注意数据大小可能增加加载/交互时间。
8. 保持初始 JavaScript bundles 小（< 100-170KB minified/gzipped），以加快 First Contentful Paint。
9. 使用代码拆分和懒加载延迟非关键 JavaScript。
10. 对面向公众且 SEO 和初始加载性能重要的页面，考虑改用 SSR/SSG。
11. 使用 Service Worker 和 application shell caching 改善离线和重复访问性能。
12. 为初始页面加载设置紧凑的 JavaScript 预算：初始 bundle < 100-170KB minified/gzipped，之后按功能需要加载代码。
13. 预加载关键资源：在 HTML 的 `<head>` 中加入 `<link rel="preload" as="script" href="critical.js" />`，让浏览器在页面渲染机制开始前加载 `critical.js`，避免阻塞页面渲染。
14. 懒加载非关键资源：识别非关键资源并仅在需要时加载；例如聊天 widget 组件通常不应在页面加载时立即加载。
15. 代码拆分：用 Webpack 等 bundler 将代码拆成多个 bundle，并在运行时动态加载，避免单个巨大 bundle；代码拆分也支持懒加载 JavaScript 资源。
16. 用 Service Worker 缓存 application shell，即驱动 UI 的最小 HTML、CSS、JavaScript，支持离线访问；剩余内容按需渐进加载，提供接近原生单页应用体验。

适用边界 · 注意事项

• 不适用于 SEO 关键页面：搜索引擎需要服务端渲染 HTML 来索引内容。
• 不适用于内容密集型站点：用户会在 JavaScript 加载执行前看到空白页。
• 不适用于 Time to First Contentful Paint 是核心指标时：CSR 会把所有渲染推迟到客户端。