SSG,SSR,ISR,CSRについて

Next.jsには、データの取得方法が4種類分けることができます。

簡単にSSG,SSR,ISRについて説明していきます。

SSG(Static Site Generation)

こちらはページをbuild時に静的生成するものになります。

build時に生成するので、更新の必要のある記事一覧やトップ画面などには向きません。

逆に、会社概要などの変更頻度の低いページに使用できるでしょう。

メリットとしては、

ページ表示速度が高速。
サーバーへの負荷がかからないので、サーバー料金を抑えられる

などがあります。

デメリットとしては、

更新の必要があった際には、再度build処理を走らせないといけない。
開発時にも変更したい場合、build処理を走らせないといけないので、開発速度が落ちる。

などがあります。

コード例は下記になります。

export const getStaticProps = async () => {　// ①
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }　// ②
} 
 
export default function Page({repo}) { // ③
  return repo.stargazers_count
}

対象のページ内にgetStaticPropsという関数を宣言し、その中で呼び出したいAPI処理を実装します。
返却したい値をpropsの中にobjectとして返します
使用したいページで、propsとして使用できます。

※ getStaticProps,propsは同じ名前でなければなりません。

これで、静的生成の準備は完了です。

build後にnpm run startで検証できるようになりました。

SSR(Server-Side Rendering)

こちらは、毎回API通信をリクエストする際にサーバー側でfetchをし、クライアントにHTMLファイルに反映後に返却するものになります。

変更頻度の低いページに使用するのは、あまり良くないでしょう。

逆に、変更頻度の高いコメント機能や記事一覧などに向いています。

メリットとしては、

SSGほどではないが、ページ表示速度がCSRよりも高速。
サーバーでHTMLファイルを構築するのでSEOに有利。
データの反映をリアルタイムで検知できる。

などがあります。

デメリットとしては、

毎回リクエストをするので、サーバー負荷が重い。(サーバー料金が高くなる)

などがあります。

コード例は下記になります。

export const getServerSideProps = async () => { // ①
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }　// ②
}
 
export default function Page({ repo }) {　// ③
  return repo.stargazers_count
}

対象のページ内にgetServerSidePropsという関数を宣言し、その中で呼び出したいAPI処理を実装します。
返却したい値をpropsの中にobjectとして返します
使用したいページで、propsとして使用できます。

※ getServerSideProps,propsは同じ名前でなければなりません。

ISR(Incremental Static Regeneration)

こちらは簡単にいうと、SSGとSSRのいいとこ取りのようなものです。

build時に静的生成をした後に、一定時間経過後に再度buildをサーバー側で自動で実行してくれます。

何がいいかというと、記事のようにそんなに頻度は高くないが、1,2日に一回ぐらいは更新するぐらいな時に向いています。

メリットとしては、

SSGと同じでページ表示速度が高速。
一定期間が経過後、再度buildをしてくれるのでパフォーマンスも上がるし、サーバー負荷も軽減できる。

などがあります。

デメリットとしては、

リアルタイム性の求められるTwitterの投稿みたいなところでは、即座に反映できない。

などがあります。

コード例は下記になります。

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

export async function getStaticProps() { // ①
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const posts = await res.json()
 
  return {
    props: {
      posts,
    },// ②
    revalidate: 10, // ③
  }
}

 
export default Blog

対象のページ内にgetStaticPropsという関数を宣言し、その中で呼び出したいAPI処理を実装します。(SSGと同じ)
返却したい値をpropsの中にobjectとして返します。(SSGと同じ)
再度buildしたい秒数を2つ目の返却地に設置する。

※ getStaticProps,props,revalidateは同じ名前でなければなりません。

※ revalidateの秒数はミリ秒ではなく、秒です。

まとめ

今回は、Next.jsのSSG,SSR,ISRについて説明しました。

Reactには存在しないNext.jsだけの機能でパフォーマンス向上、サーバーの負荷軽減の期待ができます。

SSG,SSR,ISRを使い分けるだけで、UX体験向上、サーバー費用の軽減などの効果が期待できるので使った方がいいかなと思いました。

引用: https://theanshuman.dev/articles/what-the-heck-is-ssg-static-site-generation-explained-with-nextjs-5cja

革新技術

SSG,SSR,ISR,CSRについて

SSG(Static Site Generation)

SSR(Server-Side Rendering)

ISR(Incremental Static Regeneration)

まとめ

革新技術