Oct.Cool
·
技术篇：CSR、SSR、SSG、ISR 与客户端、服务端组件
💡
原文中文，约15000字，阅读约需36分钟。
📝
内容提要
本文介绍了四种主要的渲染方式：客户端渲染（CSR）、服务端渲染（SSR）、静态站点生成（SSG）和增量静态生成（ISR）。每种方式的概念、执行过程、优缺点及应用场景均有详细说明。CSR适合单页应用，SSR提高首屏加载速度，SSG适合内容不频繁更新的站点，而ISR则允许在保持快速加载的同时灵活更新内容。文中还提到React Server Component（RSC）与Client Component（RCC）的区别。
🎯
关键要点
- 客户端渲染（CSR）是指在客户端执行渲染，适合单页应用（SPA），优点是用户交互后页面更新更快，缺点是初始加载时间可能较长，对SEO不利。
- 服务端渲染（SSR）是在服务器上生成完整的HTML内容，优点是首屏加载速度快，有利于SEO，缺点是增加服务器负载。
- 静态站点生成（SSG）在构建时生成静态HTML页面，优点是加载速度极快，减少服务器负载，缺点是内容更新不及时，不适合频繁更新的数据。
- 增量静态生成（ISR）允许在构建后逐步更新静态页面，优点是快速加载和灵活更新，缺点是初次渲染可能延迟，增加了复杂性。
- React Server Component（RSC）允许在服务器端渲染组件，减少客户端负担，提高性能，但增加了开发复杂度。
- React Client Component（RCC）在客户端运行，能够处理用户交互，优点是丰富的交互性，缺点是增加JavaScript体积。
❓
延伸问答
什么是客户端渲染（CSR）？
客户端渲染（CSR）是在客户端执行渲染，适合单页应用，用户交互后页面更新更快，但初始加载时间较长，对SEO不利。
服务端渲染（SSR）有什么优缺点？
SSR的优点是首屏加载速度快，有利于SEO；缺点是增加服务器负载，客户端交互可能延迟。
静态站点生成（SSG）适合什么样的应用场景？
SSG适合内容不频繁更新的站点，如博客或文档站点，因其加载速度极快且减少服务器负载。
增量静态生成（ISR）如何工作？
ISR允许在构建后逐步更新静态页面，用户请求时返回旧页面，后台异步再生成新页面，确保快速加载。
React Server Component（RSC）与React Client Component（RCC）有什么区别？
RSC在服务器端渲染，减少客户端负担；RCC在客户端运行，处理用户交互，增加JavaScript体积。
选择使用SSR还是CSR时需要考虑哪些因素？
选择SSR时需考虑首屏加载速度和SEO需求，选择CSR时需考虑用户交互体验和服务器负载。
➡️
