概要
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秒経つまでは保存された内容が表示される。
コメント