一篇关于React服务端组件如何工作的好文章《How React server components work: an in-depth guide》

# 为什么要用React服务端组件？
1. 服务端组件可以直接访问服务端的数据源，比如数据库、内部API或者文件IO等，就像asp/PHP那样
2. 服务端可以使用一些大的类库而不必担心影响客户端提及，比如在服务端将Markdown直接渲染为HTML，就不必在客户端加载markdown解析的js

# React服务端组件是如何渲染的？
1. 服务端组件会在服务端被序列化成JSON
2. 整个组件树中服务端组件会被渲染成一个HTML，然后序列化成JSON
3. 客户端组件会用占位符代替，并声明引用的js脚本，到客户端后需要按照js路径去下载和重新渲染客户端组件。

# 为什么要序列化成JSON而不直接输出HTML？
使用JSON结果更容易在客户端重建React组件树，不需要解析HTML，可以混合客户端组件。

# 比起纯客户端React组件获取数据渲染有什么优势？
不需要下载大量客户端js，不需要等待js加载可以第一时间显示HTML内容。

# 比起服务端渲染SSR有什么优势？
SSR的话，浏览器加载完HTML不能直接生成React组件，需要下载js在客户端二次渲染才能交互，而服务端组件可以更细粒度的决定哪些需要在客户端重新渲染成React组件，哪些不需要，甚至可以决定客户端模块加载渲染的优先级。

具体内容可以参考原文：
http://t.cn/A6i7SZjK

#前端之美#