SSGstatic site generation
🐈 WHAT IS SSG?
SSGは静的化とも言われる特殊な手法で、ヘッドレスCMSを盛り上げることになった筆頭技術の一つです。
ユーザーがアクセスするよりも前に予めAPIを叩き、全ての情報を反映させた静的ファイルを生成します。
これにより、ユーザーがアクセスするタイミングでのAPIアクセスが不要となり、高速な表示が可能になります。
ただし、データにリアルタイム性がなく、データ更新の度にそれなりの時間をかけて静的ファイルをビルドし直す必要があるという欠点があります。
🌊 DATA FLOW
- Next.jsが静的ファイルをビルドする
- このタイミングでサーバーは予めAPIを叩いて全情報を取得する
- 全ページ分の静的ページを生成する
- ユーザーがリクエストを送信する
- すでに生成されているページが表示される
👍 GOOD
- 生成済みのHTMLを取得するのでSEOに問題がない
- 表示/遷移が早い
👎 BAD
- 表示されるデータがリアルタイムのものではない
- データ更新時に再ビルドする必要があり時間がかかる