区辩概念：CSR/SSR/SSG 以及 RSC(React Server Component)

最前

本文是对标题中提及的几个概念的简要（浅显）对比，仅作备忘条目；
最新阅读了博文 Making Sense of React Server Components，(吾辈认同博文中提及的相关概念点，对已有知识作必要更新)

正文

先来看 CSR、SSR、SSG 的完整名称：

Client-side Rendering
Server-side Rendering
Static (Site) Generation

见名知义的，以渲染端的不同（或者说页面生成时机的不同）做概念区分。（一般的，社区将这三个视作平行概念，此时， SSR 和 SSG 就分别侧重：前者强调对页面在服务端的按需动态生成，后者是对页面在构建时（静态）生成。

而上述提及博文Making Sense of React Server Components，则将 SSG 作为 SSR 的子概念，如此阐述更偏重于：SSG 实质同样属于服务端渲染技术范畴。以上两种认识都是正确，只是侧重点不同。

额外可了解以下关于页面在浏览器端的性能指标概念：

—— 使用不同渲染方案，以上指标会有一定差异。

还有渲染概念如：ISR，暂不作展开

再谈到 RSC(React Server Component)，一些社区博文中，可能会有类似这样的一些错误标题，比如：“从 SSR 升级使用 RSC” ，多数文章背景：是如何对 nextjs 项目升级，以使用其最新支持的 App Router 路由模式，（其是首批支持 React 18 新特性 RSC 的 React 元框架）

(React 元框架：构建在 React 之上的框架，添加了路由或数据管理等附加功能)

但是，该类标题明显错误在于，RSC 并不是和 SSR 等渲染技术平行的概念，RSC 侧重于组件本身可以在服务端被处理（渲染）；作为独立概念，RSC 可以配合在 SSR 、SSG 等场景中应用。

（这里仍然以 NextJS 举例，作为对 React 更进一步封装的明星框架，以 SSG 、 SSR 的良好支持为出名原因之一。而在官方推出支持 RSC 特性的 App Router 路由模式之前，在其 Pages Router 中，官方提供 api: #getStaticProps 以及 #getServerSideProps 来分别处理 SSG 、 SSR 的场景，

但这毕竟是 NextJS 的自定义 SSR 实现方案，并不是 React 的官方支持特性，所以（配合 #getServerSideProps 、#getStaticProps 声明的页面路由）组件除了运行在服务端，最终仍然会打包进 client js bundle，在客户端运行，并最终对水合结果是否同服务端一致判断）

直到 RSC / 服务端组件由 React 官方推出。所以显然的，使用 RSC 带来的优势包含有：

性能 ——
- 减小 client js bundle 体积，意味着：请求体积减小；
- 需要水合的组件数量减少 / 👉🏻 换个说法：服务端组件不会参与到 —— 客户端组件（"use client"）典型的（服务端渲染与客户端渲染的）水合比较中；（附：关于“水合”的形象比喻：Hydration is like watering the “dry” HTML with the “water” of interactivity and event handlers.）
数据获取 —— 更便捷(更“近”)的获取服务端（数据库）数据；（相比传统客户端组件需要通过自定义请求 API 并对其调用）
...

Server Components can run during the build, letting you read from the filesystem or fetch static content. They can also run on the server, letting you access your data layer without having to build an API.

THX | 外链索引

⭐⭐⭐⭐⭐ | https://www.joshwcomeau.com/react/server-components/ | 质量很高的博文，理清 RSC 概念和用法细节
https://vercel.com/blog/understanding-react-server-components
https://blog.skk.moe/post/refactor-my-blog-using-nextjs-app-router
可略 | https://www.fengkx.top/post/rewrite-blog-with-next
可略 | https://next-learn-starter.vercel.app/posts/ssg-ssr