请说明在 React 项目中启用服务端渲染的具体实现步骤，并解释其背后的工作原理。

回答思路

1. 【回答框架 1】服务端渲染（SSR）指在服务端将 React 组件渲染成 HTML 字符串，再发送给客户端，主要解决首屏加载慢和 SEO 不友好的问题。
2. 【回答框架 2】实现步骤：使用 renderToString 或 renderToPipeableStream 将组件渲染为 HTML；在客户端通过 hydrate 复用服务端生成的 DOM，并绑定事件与状态。
3. 【回答框架 3】原理核心是 React 的同构渲染，即同一套组件代码在服务端和客户端各自运行一次，服务端负责生成初始 HTML，客户端接管后续交互。
4. 【回答框架 4】数据获取需要在服务端完成，通常借助路由匹配和预取数据，将数据注入到组件或全局状态中，确保首屏渲染的数据完整。
5. 【关键点 1】SSR 使用 renderToString 生成静态 HTML，客户端使用 hydrate 进行事件绑定。
6. 【关键点 2】同构渲染要求组件在服务端和客户端行为一致，避免直接访问浏览器专有对象。
7. 【关键点 3】数据预取是 SSR 的关键环节，需在服务端提前获取并注入数据。
8. 【关键点 4】SSR 能有效改善首屏性能和 SEO，但会增加服务端负载和复杂度。
9. 【易错点 1】在服务端调用 window 或 document 会导致渲染错误，需使用生命周期或动态加载进行隔离。
10. 【易错点 2】未正确使用 hydrate 可能造成事件丢失或重复渲染。
11. 【易错点 3】数据预取失败可能导致客户端水合时状态不一致。