nextjs の getServerSideProps について

Question

Nest.js で SSR を行っています。
getServerSideProps から fetch してデータを取得しますが、ページ遷移時（二回目以降）も毎回 fetch してデータを取得してきてしまいます。

確か、僕の記憶だと Nuxt.js の場合は props に保存して、二回目以降はそれを参照する感じで、キャッシュされるので速かったのですが、Next.js は違うみたいです。
Next.js で二回目以降のページ遷移のスピードを速くしたいのですが、ベストはありますか？

client side でデータを取ってきて、store を使用する方法もあるのですが、ベストを知りたいです。

Answer 1

getServerSidePropsはサーバーサイドで毎回実行されるので、キャッシュ等の機能はありません。

ユーザーの行動などにより、ページが無数に増えたり更新されるような画面でないのであれば、getStaticPropsを利用するのが良いと思います。
こちらはビルド時にAPIを実行し、HTMLを生成してくれる物なので更新頻度が低いような所に向いています。

逆にユーザーの行動により、ページが増えたり更新される頻度が高いような画面ではISRが利用出来ます。
ISRはgetStaticPropsをさらに便利にしたような物で、ビルド時だけではなくサーバー動作中にも動的にHTMLを静的生成してくれる機能です。

これらの機能を使うとページの動作は早くはなりますが実装の複雑さは増してしまうので、SWRやreact-queryのようなクライアント側でAPIをキャッシュするライブラリに一任するのも一つの手かなと思います。

Comments

[best_engineer]

ありがとうございます。
SWR は確かに最近聞く技術で正直、まだついていけてませんでした。
助かります。

[best_engineer]

ちなみになのですが、ダイナミックな path url だと getStaticProps は使うべきではないですよね？
例えば、以下のような URL です。

http://hogehoge.com/edit/{postId}

[best_engineer]

例えば以下のようなパターンがあるのですが、そもそも認証が必要な API （token が必要だったりするので）などは build 時の静的ページのレンダリングがきついので、避けた方がいいかもしれないですね。

https://github.com/sallamy2580/nextjs-real-world-example/blob/master/pages/editor/%5Bpid%5D.tsx

[Karibash]

> ちなみになのですが、ダイナミックな path url だと getStaticProps は使うべきではないですよね？

DynamicRoutesでもISRを利用する事でgetStaticPropsを利用する事はできますね。
裏側では静的ページを返却しつつ、静的ページを再生成するような仕組みになっています。
下記がNext.js公式のサンプルなので参考にして頂ければと。
https://reactions-demo.vercel.app/
https://github.com/vercel/reactions/blob/master/pages/index.js#L58

> 例えば以下のようなパターンがあるのですが、そもそも認証が必要な API （token が必要だったりするので）などは build 時の静的ページのレンダリングがきついので、避けた方がいいかもしれないですね。

認証が入るようなところは静的ページには出来ないのでgetServerSidePropsを使うのが良いと思います。
SSRする分のレスポンスの遅さを許容出来ないのであれば、Client側で認証関連のAPIを別途叩くのが良いかなと。
あとはAPI自体をキャッシュさせてレスポンスを早くしてあげるっていう手段もありますね。

Answer 2

Next.jsは、データのキャッシュの機能はありませんが、getStaticPropsを用いることで、事前に静的なページを生成することができます。getStaticPropsを利用すると、２回目以降はデータを再取得する必要がなくなります。
この仕組は、SSG（静的サイト生成）と呼ばれています。

getStaticPropsの詳しい説明は、公式ドキュメントを参照してみてください。
https://nextjs.org/docs/basic-features/data-fetching/get-static-props

Comments

[best_engineer]

ありがとうございます。
二回目以降とは具体的にどのようなことでしょうか？
一度、html を生成したページをサーバーサイドからもらって、再び同じページに遷移した時のことでしょうか？