🎃

SSG, ISRのデータ取得はCSR, SSRのどちらか

2021/04/30に公開

最近Next.jsを触り始めたのですが、

1. SSGのデータ取得はCSR, SSRどちらか(どちらも発生するのか)
2. ISRのデータ取得はCSR, SSRどちらか(どちらも発生するのか)

が曖昧だったので調べました。


先に結論

SSG -> ビルド時のデータ取得はSSR
ISR -> revalidate付与時のデータ取得はSSR


1. SSGのデータ取得について

SSGではビルド時にgetStaticPropsによりデータ取得を行います。これはStatic Site Generationの略で基本的には静的サイトを生成するものなので、ビルド時にデータを取得したあとデータに変更があっても再度取得を行うことはありません。

ではgetStaticPropsはCSRなのかSSRなのか?

予想はつきますが、 Next.jsのISR解説ページ に答えがありました。

Note that getStaticProps runs only on the server-side. 
It will never be run on the client-side. (以下略)

getStaticPropsは、サーバーサイドでのみ実行されることに注意してください。
クライアント側で実行されることはありません。また、ブラウザ用のJSバンドルにも含まれません。

getStaticPropsはサーバサイドでのみ実行されます。
確かに、ビルド中にブラウザを起動することなんてないですよね😅
よって、SSGにおけるビルド時のデータ取得はSSRであることがわかりました。


2. ISRのデータ取得について

ISRはSSGにおける「ビルド時以外データ取得が行われない」という欠点を補うためのもので、
ビルド後もデータを取得することができます。よってビルド後にデータ変更があっても、再度取得できるので最新の状態を表示することができます。

であれば、ISRはどのようにしてデータ取得を行っているのでしょうか?
そしてそれはCSR、SSRどちらなのでしょうか。

こちらもNext.jsの技術詳細ページに答えがありました。

With getStaticProps you don't have to stop relying on dynamic content,
as static content can also be dynamic. 
Incremental Static Regeneration allows you to update existing pages
by re-rendering them in the background as traffic comes in.

getStaticPropsを使えば、ダイナミックコンテンツに頼ることなく、
スタティックコンテンツもダイナミックにすることができます。
インクリメンタル・スタティック・リジェネレーションでは、トラフィックに応じて
バックグラウンドで再レンダリングすることで、既存のページを更新することができます。

ISRにおいてもgetStaticPropsによってデータ再取得を行っていることがわかります。
そしてそれはgetStaticPropsの返り値にrevalidateという秒数のオプションを付与することで可能になります。revalidate: 5だと5秒間に来た複数のリクエストのうち初回リクエストの場合にのみデータ取得を行う、ということになるようです。

よって、ISRでrevalidateを指定した際も、getStaticPropsでSSRを行うことがわかりました。

まとめ

SSG -> ビルド時のデータ取得はSSR
ISR -> revalidate付与時のデータ取得はSSR

どちらもgetStaticPropsで取得するため

Discussion