🚀 ニフティ’s Notion

ビルド時にAPIの情報などを取得して静的ファイルを作る。アクセス時はその静的ファイルを取得してページを表示

• ビルド時にHTMLを生成し、リクエスト時はそれを使いまわす

1. あらかじめ静的ファイルにビルドしておく
   • API先のデータなどはビルド時に取得し、埋め込まれる（図でいう ①APIリクエスト , ②レスポンス（JSON） ）
2. ユーザーはアクセス時、ビルドされた静的ファイルを取得しWebサイトを表現

• Next.js では getStaticProps などを読んでビルドする
  • nextjs
• sveltejs

• アクセス時は静的ファイルが返るだけなので、レスポンスが非常に早い
• 作成済のHTMLを返すので SEO に強い

• ビルド時に全ての情報を取得してビルドするので、コンテンツ量が増えるとビルド時間も増える
• 頻繁に情報が更新されるサイトでは使うことが困難
  • APIが持ってこれるのはあくまでビルド時の状態

• React向け:
  • Vercel
  • Gatsby
• Vue.js向け: Nuxt
• Svelte向け: Sveltekit
• Astro

SSGはレスポンスが速いが、ページデータを更新し直すことができない。そこで出てきたのがSSGとSSRの合いの子的な方法。

アクセスされた時にSSGのビルドが実行される。これは一定時間は使い回され、時間経過後は再度ビルドが実行される。

1. ユーザーがページにアクセスする
2. SSGのビルドが走る
3. 生成結果をユーザーに返す
4. 二回目以降はキャッシュされたビルド結果のHTMLが返される
5. キャッシュが古くなったと見なされた場合、裏側でビルドが走り、最新のページになるようにアップデートする

• SSGのレスポンス速度を得つつ、データ更新が可能
• アクセスしたページしかリビルドされないため、全ページリビルドする時間を考えなくて良い

• ページ更新タイミングがキャッシュに左右されるため、更新タイミングが予測しづらい
• 複数台のサーバがある場合、キャッシュ共有の仕組みが必要

以上の話を元に、歴史について少し。