[Next.js] getStaticProps関数とは

管理者

1年前

概要
例
ISR（Incremental Static Regeneration）

概要

Next.jsのページコンポーネントにて、「SSG（Static Site Generator）させたい=ビルド時に実行したい」処理はgetStaticProps関数の中に記述する。

例

import {useEffect, useState} from 'react'
import {GetStaticProps, NextPage} from 'next'

type SsgProps = { msg: string }
const Ssg: NextPage<SsgProps> = ({msg}) => {
  const [msg2, setMsg2] = useState('')
  useEffect(() => {
    setMsg2('これはCSR')
  }, [])
  return (
    <>
      <p>{msg}</p>
      <p>{msg2}</p>
    </>
  )
}
export const getStaticProps: GetStaticProps<SsgProps> = async () => {
  const msg = 'これはSSG' // 通常はAPIなどを使ってデータを取得する
  return {
    props: {
      msg,
    }
    // revalidate: 60, // この行があるとISRでのレンダリングとなる
  }
}
export default Ssg

上記の例の場合、msgはSSGとなるためこれはSSGはブラウザに返されるHTMLに含まれるが、msg2はCSRとなるためこれはCSRはブラウザに返されるHTMLには含まれない。

ISR（Incremental Static Regeneration）

getStaticProps関数の戻り値のオブジェクトにrevalidateプロパティが存在する場合、ISRでのレンダリングとなる。
例えば、revalidate: 60とすると有効期限が60秒となる。
npm run buildの後にnpm run startを実行すると60秒経つまでは保存された内容が表示される。