getServerSidePropsを使用してもローディングを描画する方法

Next.js で画面描画時に必要なデータを取得する GET の Api を呼び出す場合、クライアント側で呼ぶべきかサーバー側で呼ぶべきか、はたまた build 時に呼んでおくべきかなど、以下のように選択肢が多岐に渡ると思います。

• CSR
• SSR
• SSG
• ISR

これらの使い分けに対する理解が曖昧な人って結構多いよなーと思っていたのですが、さっき偶然にもわかりやすく綺麗にまとめられたドキュメントを見つけました。

• Understanding Next.js Data Fetching (CSR, SSR, SSG, ISR)
• How to choose between Next.js CSR, SSR, SSG, and ISR

英語ですが、とてもわかりやすいドキュメントなので理解が足りていない方はぜひ一読してもらえればと思います。

で、SSG や ISR はともかくとして、個人的には『クライアント側で呼び出すくらいなら全部サーバー側に寄せれば良いんじゃね？』って思っていたりするのですが。

とはいえ getServerSideProps で取得する場合、どうしても気になるのがデータを取得するまでの画面描画だったりします。

要するにサーバーでデータを取得している間にローディング画面でも挟めれば良いのになーと思っていたのですが。

普通にできるみたいですね、全然知らなかった。

Example app with page loading indicator

思いっきり公式のサンプルでありました、シンプルでとても良い実装だと思います。

ただ一点注意として、ローディングはあくまで同サイト内のページ遷移間、つまり SPA 内のルーティングにしか効きません。

そのため初回アクセス時はブランクなページが表示され続けます、こればっかりは回避できないかと。

Next.js における Api の呼び出しをどこで行うかについては結構ケースバイケースだとは思うのですが。

変にこだわりを持つのではなく、結局ユーザビリティと開発のバランスを意識した設計にすることが大切かなーと思います。

その上で getServerSideProps で呼び出しても初回アクセス以外はローディングを挟めるし、基本はサーバー側に寄せちゃえば良いと思うんですが、どーなんでしょうか。