DEV Community
·
客户端渲染（CSR）与服务器端渲染（SSR）、水合及选择性水合
💡
原文英文，约1100词，阅读约需4分钟。
📝
内容提要
在React中，水合过程将预渲染的HTML转化为可交互的内容。浏览器解析HTML生成DOM和CSSOM，随后下载并执行JavaScript，React重建虚拟DOM并添加事件监听器。选择性水合技术提升加载速度，仅对关键UI部分进行水合。与客户端渲染相比，服务器端渲染提供更快的初始加载和交互性。
🎯
关键要点
- 水合过程将预渲染的HTML转化为可交互内容，涉及HTML解析、DOM和CSSOM创建。
- 浏览器解析HTML并生成DOM，同时下载并处理CSS形成CSSOM。
- JavaScript执行后，React重建虚拟DOM并与服务器渲染的HTML进行协调。
- 选择性水合技术优先处理关键UI部分，提高加载速度。
- 服务器端渲染（SSR）提供更快的初始加载和交互性，相比客户端渲染（CSR）更有效。
- 服务器生成完整的HTML并发送给客户端，浏览器解析后进行渲染。
- 客户端渲染（CSR）需要下载和执行JavaScript来生成DOM，初始加载较慢。
- 服务器操作（Server Actions）在服务器上准备数据，确保组件渲染所需的数据可用。
- 选择性水合只对页面的特定部分进行水合，减少初始JavaScript执行时间。
- 使用Suspense和懒加载技术进行代码拆分，减少初始加载时间和带宽使用。
❓
延伸问答
什么是水合过程，它在React中如何工作？
水合过程是将预渲染的HTML转化为可交互内容的过程，React通过附加事件监听器和状态来实现这一点。
选择性水合技术有什么优势？
选择性水合技术优先处理关键UI部分，提高加载速度，减少初始JavaScript执行时间。
服务器端渲染（SSR）与客户端渲染（CSR）有什么区别？
SSR提供更快的初始加载，因为浏览器接收的是完整的HTML，而CSR需要下载和执行JavaScript来生成DOM，初始加载较慢。
如何在服务器端渲染中准备数据？
在服务器端渲染中，可以通过服务器操作（Server Actions）来准备数据，例如从数据库或API获取数据。
什么是懒加载，它如何改善性能？
懒加载是一种技术，它将JavaScript包拆分为更小的块，仅在需要时加载，从而减少初始加载时间和带宽使用。
水合过程中的DOM和CSSOM是如何创建的？
浏览器解析HTML生成DOM，同时下载和处理CSS形成CSSOM，二者结合创建渲染树。
➡️
