该在哪里 Fetch Data

很有意思的视频，到底在哪里 Fetch，会带来什么样的好处？

如果在每个组件里分别 Fetch 的话，会导致 waterfall，外层的组件会等待深层的组件请求完成后，才开始渲染，这回造成比较差的 Performance。
如果不考虑可维护性在外层 Fetch 的话，确实可以解决这个问题，但是 API 的变动会导致代码难以维护。
如果不让外层的组件等待，页面就会发生 Cumulative Layout Shift，也就是一层层的把东西挤下去，这样就会出现点击错误。

FaceBook 之前是通过 Relay + Graphql 来解决的，后者会仅 Fetch 需要的数据，以减少 Fetch 的时间，前者则是组合各个 fetch 来避免 waterfall。

其实 Sever Component 的主要作用就是把数据注入放在了 server 上，以减少客户端 query 的次数。

还会有一些状态管理的问题。在 Server Component 重新 fetch 数据时，嵌在 Server Component 里的 Client Component 的状态不会被重置，因为其用的是 RSC，而不是 HTML。