getStaticProps getStaticPaths getServerSideProps について

Nextjs が v9.3 より Data fetching 用の関数が追加されました。

ただ日本語のわかりやすい記事がなかったので、備忘録がてら。

Nextjs はまだ知見が浅いので、間違ってたらすいません。

結論

以下のケースで使用しましょう。

getStaticProps

build 時に実行される、プリレンダリング用の関数。

プリレンダリング時に page コンポーネントに props を流し込むケースで使うみたいです。

react-snap みたいなイメージ？

getStaticPaths

build 時に実行される、プリレンダリング用の関数。

ダイナミックルーティング、つまり動的なルーティングでプリレンダリングを行いたい場合に使います。

pages/watch/[id].js みたいなケースなら、先にsm1.htmlとかsm2.htmlを吐いてくれるみたいです。

getStaticPaths がないと正常動作しないみたいです、そりゃそーだって感じですが。

これも react-snap に近いですね。

getServerSideProps

プリレンダリングを使用しないケースで、サーバ側で先に props を流し込みたい場合に使います。

getInitialProps

ほぼ使用しない？

もう少し詳しく

getStaticProps と getServerSideProps は同時に使えない

getStaticProps によってプリレンダリングされるので当たり前っちゃ当たり前ですね。

後追いでデータを取得する場合は useEffect を使えば良いんですかね、もしくは getInitialProps？

ちょっと理解が足りておらず…。

getStaticPaths の fallback の使いみち

build 時に getStaticPaths が実行されて、id が [sm1, sm2] と返ってきたとします。

その後 sm3 にアクセスがきた場合、sm3 はプリレンダリングで対応できません。

この場合、fallback: false が設定されていると 404 で処理されます。

逆に fallback: true が設定されている場合、getStaticProps が実行されプリレンダリングがまた走るみたいです。

そう考えるとfallback: falseを設定するケースがぱっと思いつかないんですが、どーなんですかね。

ユーザがページを追加するケースでなければ不要なのかな？個人のブログとか？

そんな感じです。

ぱっと思ったのは、上記 2 つはプリレンダリング用の関数であるため、パフォーマンスの向上目的で使用されるのでは…？と。

なので一旦 getServerSideProps で全部組んじゃって、サーバ負荷が高くなってきたら getStaticProps と getStaticPaths を導入したら良いのかなーと思いました。

まだ実践で使用したことがないため結構憶測多めです、間違ってたら後ほど修正します。