【Next.js】getStaticProps・getServerSidePropsについて解説

今回は、Next.jsのgetStaticProps・getServerSidePropsについての内容になります!

getStaticProps・getServerSidePropsは外部とのデータ連携をする際に必須となりますので、分からない方はこの記事を読んで学んでみませんか?

最後まで読んで頂けると幸いです!

では、Next.jsのgetStaticProps・getServerSidePropsについて解説していきます!

getStaticProps・getServerSidePropsとは?

下記で「getStaticProps・getServerSideProps」について解説していきます!

getStaticProps

本来、Next.jsではビルドの段階でHTMLファイルを生成します!

ですが、これは外部とのデータのやり取りがないケースです!

APIからデータを持ってくるなどの外部とのデータのやり取りがあるケースだと「getStaticProps」を使用する必要があります!

下記のリンクでAPIについて解説していますので詳しく学びたい方はご覧下さい!

そして、このAPIとの連携やDB(データベース)との接続によって外部との連携を行う際に「getStaticProps」を使用します!

getStaticPropsは「pages」ディレクトリ以外では使用できないので注意して下さい!

getServerSideProps

getServerSidePropsも、getStaticPropsと同様に外部データとやり取りをする際に使用します!

getServerSidePropsも「pages」ディレクトリ以外では使用できないので注意して下さい!

これで、getStaticProps・getServerSidePropsの概要について理解できたかと思います!

次の内容では、getStaticProps・getServerSidePropsの違いについて解説していきます!

両者の違い

下記で両者の違いについて解説していきます!

getStaticPropsは「Next build」、つまりビルドのタイミングで実行されます!

開発環境だとリクエスト毎に実行を行うので注意して下さい!

getStaticPropsを持つページは、Pre-renderingでHTMLファイルだけでなくJSONファイルも生成します!

一方、getServerSidePropsは、リクエストのタイミングで実行されます!

開発環境でも本番環境でも等しくリクエスト毎に実行を行います!

getServerSidePropsは、リクエスト毎に結果を出力します。

リクエスト毎にレスポンスを返すので、キャッシュを残すとデータ転送が膨大になってしまいますので、キャッシュを残す機能はありません。

ですので、getStaticPropsよりも読み込みに時間がかかってしまいます!

まとめ

いかがでしたか?

今回の内容はNext.jsのgetStaticProps・getServerSidePropsについて解説について解説させて頂きました。

Next.jsのプロジェクト内で外部との接続をするためにgetStaticProps・getServerSidePropsは必要になりますので是非覚えておいて下さい!