React Server Component がよくわからない

aliyome
·

CSR でコンポーネント単位でデータを fetch すると責務を閉じ込められるけど fetch 回数が増えて UX が悪い。FCP、TTI、LCPが遅い

CSR でページコンポーネント単位でデータを fetch すると fetch 回数が減って UX が良くなるけど props のバケツリレーが大変。FCP、TTI、LCPが遅い

SSR するとハイドレーションが必要になるけどすぐに表示される。FCPが早い、TTI、LCPが遅い

SSG でページコンポーネント単位でデータを fetch するとハイドレーションが必要になるけどすぐに表示される。FCP、LCPが早い、TTIが遅い。

RSC だけ使って SSR するとコンポーネント単位でデータを fetch して責務を閉じ込められて、ハイドレーションが不要(JSのバンドル不要)ですぐ表示される。FCP、LCPが早い、TTIがほぼ無い再レンダリングされないので動的なページが作れない

RSC + 'use client' でクライアント境界を作ると、クライアント境界の内側のみハイドレーションが必要ですぐ表示される。FCP、LCP、TTIが早い

こういうこと?🧐