SSG SSR ISR

公開日

2022-08-26

投稿者

Ryousuke Kamei

#tag

#SSG #SSR #ISR

SSG (Get Static Props)

・SSGメリット

初回のビルドを前もって行う(事前生成される)、ユーザーが「ページ見たい！」とリクエストをしてからかなりの速度で表示することができる企業の説明とか事業内容とかの情報更新の機会が少ないサービスで使える

・SSGデメリット

最新のデータを常に画面に反映できるわけではない（それをすると毎回ビルドをする必要がある = ビルドを行うと他のページも全てビルドし直すため処理が大変 = 処理が遅くなる）

SSR (Server Side Rendering)

・SSRメリット

レンダリング処理をサーバー側でやるからブラウザの負担が減る＝ブラウザのスペックの高くない機器でも安定した表示速度を保つことができる。

画面表示までの時間い（ブラウザ上で初回レンダリングしないから）

更新頻度の高いSNSとかに強い

・SSRデメリット

ブラウザの負担は減るけどサーバー側の負荷は増す

サーバー(NodeJs)使える環境が必要まあNext.js使ってりゃ問題ない

ISR (Incremental Static Regeneration)

SSGとSSRの中間のようなもの

SSGにrevalidateを指定する事でISRになる

使い所としては

ちょこちょこ更新するような場面(ブログなど)において有効

revalidateで秒数指定して

指定秒数後、新しいHTML(キャッシュ)を生成してくれて(秒数間は古いキャッシュがかえされ続ける)、秒数経過後一度古いキャッシュを返してから

以降のリクエストに関しては新しいキャッシュを返してくれる。

忘れた時用

export const getStaticProps:GetStaticProps = async () => {
  const { results } = await responsePage({}); 
  return {
    props: {
      pages: results ? results : [],
    },
    revalidate: 10,
  };
};