質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

受付中

nextjs の getServerSideProps について

tuioku
tetoris

総合スコア39

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

2回答

1グッド

1クリップ

275閲覧

投稿2022/12/09 02:00

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

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

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

uky😄を押しています

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

0

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

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

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

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

投稿2022/12/12 08:27

Karibash

総合スコア49

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

tuioku

2022/12/12 09:23

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

2022/12/13 07:21

ちなみになのですが、ダイナミックな path url だと getStaticProps は使うべきではないですよね? 例えば、以下のような URL です。 http://hogehoge.com/edit/{postId}
Karibash

2022/12/13 10:21

> ちなみになのですが、ダイナミックな 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自体をキャッシュさせてレスポンスを早くしてあげるっていう手段もありますね。

0

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

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

投稿2022/12/09 04:03

dtakkiy

総合スコア83

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

tuioku

2022/12/09 05:33

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

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。