Next.js製のSPAのトップページをSSG化する

0

2022年04月16日 8:25

こんにちは、ISSUEの寒河江です。
ISSUEではNext.jsを使ってCSRとSSRを分けてページを作成しています。

トップページは、CSRしています。
レビューやユーザーを毎回ロードして表示していますが、
ここは高頻度に変更を加える必要がなかったのでSSG化してみようと思います。

完成物

https://i-ssue.com/ にアクセスすると、すぐにページが表示されます。
若干遅れて、画像が表示されます。
以前のようにデータをロードするローディング画面は表示されせん。

スクリーンショット 2022-04-16 17 15 05

GetStaticProps をインポート

型をインポートします。
img

ページの表示前にデータを取得する

getStaticProps関数を用意すれば、
ビルドした時にデータを読み込んでページに渡してくれます。

img

読み込んだデータをページに渡す

型を作って、propsで渡します。
変数として受け取れば、あとはこの変数を使ってページを表示すれば完了です!

img

# Next.js
# React.js
0

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。

-

ランク

目次を見る