ありがとうございます。
二回目以降とは具体的にどのようなことでしょうか？
一度、html を生成したページをサーバーサイドからもらって、再び同じページに遷移した時のことでしょうか？
Nest.js で SSR を行っています。
getServerSideProps から fetch してデータを取得しますが、ページ遷移時（二回目以降）も毎回 fetch してデータを取得してきてしまいます。
確か、僕の記憶だと Nuxt.js の場合は props に保存して、二回目以降はそれを参照する感じで、キャッシュされるので速かったのですが、Next.js は違うみたいです。
Next.js で二回目以降のページ遷移のスピードを速くしたいのですが、ベストはありますか？
client side でデータを取ってきて、store を使用する方法もあるのですが、ベストを知りたいです。
回答2件
0
getServerSidePropsはサーバーサイドで毎回実行されるので、キャッシュ等の機能はありません。
ユーザーの行動などにより、ページが無数に増えたり更新されるような画面でないのであれば、getStaticPropsを利用するのが良いと思います。
こちらはビルド時にAPIを実行し、HTMLを生成してくれる物なので更新頻度が低いような所に向いています。
逆にユーザーの行動により、ページが増えたり更新される頻度が高いような画面ではISRが利用出来ます。
ISRはgetStaticPropsをさらに便利にしたような物で、ビルド時だけではなくサーバー動作中にも動的にHTMLを静的生成してくれる機能です。
これらの機能を使うとページの動作は早くはなりますが実装の複雑さは増してしまうので、SWRやreact-queryのようなクライアント側でAPIをキャッシュするライブラリに一任するのも一つの手かなと思います。
投稿2022/12/12 08:27
総合スコア49
0
Next.jsは、データのキャッシュの機能はありませんが、getStaticPropsを用いることで、事前に静的なページを生成することができます。getStaticPropsを利用すると、２回目以降はデータを再取得する必要がなくなります。
この仕組は、SSG（静的サイト生成）と呼ばれています。
getStaticPropsの詳しい説明は、公式ドキュメントを参照してみてください。
https://nextjs.org/docs/basic-features/data-fetching/get-static-props
投稿2022/12/09 04:03
総合スコア83
回答へのコメント
良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2022/12/12 09:23
2022/12/13 07:21
2022/12/13 07:24
2022/12/13 10:21