DEV Community
·
客户端渲染（CSR）与服务器端渲染（SSR）、水合及选择性水合
内容提要
在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和懒加载技术进行代码拆分，减少初始加载时间和带宽使用。
延伸解读
水合过程的重要性
水合过程是将预渲染的HTML转化为可交互内容的关键步骤。通过解析HTML并生成DOM和CSSOM，浏览器能够快速渲染页面。理解这一过程有助于开发者优化应用的加载速度和用户体验，尤其是在使用SSR时，用户可以更快地看到内容。
选择性水合的优势
选择性水合技术允许只对关键UI部分进行水合，从而提升加载速度。这种方法减少了初始JavaScript的执行时间，使得用户在与页面交互时能更快获得响应。开发者应关注如何有效利用这一技术，以提升应用的性能。
SSR与CSR的比较
服务器端渲染（SSR）与客户端渲染（CSR）在初始加载速度和交互性上存在显著差异。SSR提供了更快的内容展示，而CSR则需要等待JavaScript执行后才能渲染DOM。选择合适的渲染方式对提升用户体验至关重要，尤其是在内容丰富的应用中。
延伸问答
什么是水合过程，它在React中如何工作？
水合过程是将预渲染的HTML转化为可交互内容的过程，React通过附加事件监听器和状态来实现这一点。
选择性水合技术有什么优势？
选择性水合技术优先处理关键UI部分，提高加载速度，减少初始JavaScript执行时间。
服务器端渲染（SSR）与客户端渲染（CSR）有什么区别？
SSR提供更快的初始加载，因为浏览器接收的是完整的HTML，而CSR需要下载和执行JavaScript来生成DOM，初始加载较慢。
如何在服务器端渲染中准备数据？
在服务器端渲染中，可以通过服务器操作（Server Actions）来准备数据，例如从数据库或API获取数据。
什么是懒加载，它如何改善性能？
懒加载是一种技术，它将JavaScript包拆分为更小的块，仅在需要时加载，从而减少初始加载时间和带宽使用。
水合过程中的DOM和CSSOM是如何创建的？
浏览器解析HTML生成DOM，同时下载和处理CSS形成CSSOM，二者结合创建渲染树。
