Next.js で React Server Components を試してみた

こんにちは、フォルシアエンジニアの籏野です。 先日Next.js 13.4が発表され、App Router が Stable 版になりました。 App Router では最新の React の機能を利用することが可能になっており、その中でも特に注目したいのが React Server Components です。 これまでの Next.js では SSR 時にフェッチしたデータを利用する場合、getServerSidePropsやgetStaticPropsを利用していました。 これらの関数で取得したデータをコンポーネントに props として渡して SSR を行っていましたが、props のバケツリレーが長くなってわかりづらくなったり、非同期の処理に時間がかかって初期の描画が遅くなるといった問題がありました。 React Server Components(以後、RSC)の大きな特徴とし