Reactのさまざまなデータフェッチ方法を比較して理解して正しく使用する - useEffect編

昨今のReact・Next.js界隈では様々なデータフェッチの仕組みが提供されていますが、一体どのような場面でどのデータフェッチ方法を使用したらベストなのでしょうか？ 開発のためにたくさんの選択肢が出てきた今、きちんとそれぞれの特長を知って正しく適当に使ってあげたいものですね🌟 そこで、 ☝🏻CSRで基本的な「クライアントサイドデータフェッチ」として useEffect hooksを用いたデータフェッチ ✌🏻「クライアントサイドデータフェッチ」に加えて「クライアントサイドキャッシュの仕組みを利用して状態管理ができる」ことで有名なデータフェッチライブラリのSWR, TanStack Query 🤟🏻「サーバサイドデータフェッチ」として(1)Next.jsでのgetServerSidePropsを利用したデータフェッチ・(2)App Router組み込みのキャッシュ機構とRSCを用い

[kiririmode]

useEffectを利用して初期レンダリング時にAPIコールする設計とその注意点

[shingo-sasaki-0529]

単純に、useEffect を人類が素で使うのまぁまぁしんどいからライブラリで包んで Opinionated な統一された手法に縛られる方が楽な気がしてきた。