客户端渲染和服务端渲染#

CSR#

CSR的缺点#

• SEO不理想

• 计算UI 获取数据会减慢速度，随着js包大小的增加，带来的问题日益增多

SSR#

适合社交美女动态个性化的内容，本质上是一种全有或者全无的事务！

SSR的缺点#

在JS包（react以及特定代码）下载之前，页面交互处于等待状态 这就是水合

• 组件开始渲染之后不能暂停或者等待，而且如果数据来自服务器，便会带来更大的延迟

• 添加交互性必须等待所有组件的JS在客户端加载完成之后，即浏览器中的组件树必须与服务器生成的组件树完全匹配

• 在任何一个组件可交互之前，所有组件都需要完成整个树hydrate

React带来的方案#

Suspense#

• 选择性水合
• 服务器上流式传输

Suepense带来的优势主要有两方面，比如我们可以在数据未获取完成的时候就让React开始其余部分流式传输，当数据处理完成之后，React再通过流式传输

缺点#

• JS异步传输
• 用户需要下载很多数据吗
• 所有组件都需要水合吗

React Server Components(RSC) 新的架构#

• 客户端组件
• 服务端组件

保存在服务器上，直接访问资源，安全 ，改进数据获取，缓存，FCP更快