ISR 이란?
이미 빌드된 웹에, 정적 페이지를 새롭게 추가하거나, 업데이트 할 수 있도록 하는 Next.js 기능
( next build 를 지원하는 곳에서 작동한다 )
ISR 사용법
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://.../posts')
const posts = await res.json()
return {
props: {
posts,
},
// Next.js가 페이지를 재생성 시도
// - 새로운 요청 들어왔을때, 최대 10초에 한번 생성
revalidate: 10,
}
}
// 이 함수는 서버사이드에서, 빌드시에 실행(호출)됨
// 서버사이드에서 다시 호출되어도, path는 다시 생성되지 않는다.
export async function getStaticPaths() {
const res = await fetch('https://.../posts')
const posts = await res.json()
// 우리가 미리 렌더링(pre-render)하길 원하는 paths를 posts기반으로 가져오기
const paths = posts.map((post) => ({
params: { id: post.id },
}))
// 이 paths는 빌드시에만 미리 렌더링된다.
// { fallback: blocking } 은 서버사이드에서 페이지를 렌더링한다
// 만약 paths가 존재하지 않는다면, Next.js가 자동으로 paths를 생성한다. (on-demand)
return { paths, fallback: 'blocking' }
}
export default Blog
unstable_revalidate() - beta
revalidate는 유효시간 경과후 해당 페이지를 방문하는 사람이 존재해야, 캐시를 제거 할 수 있지만,
unstable_revalidate() 를 사용하면, 새로 업데이트된 페이지의 캐시를 수동으로 제거할 수 있다.
[ 사용하기 좋은 예 ]
헤드리스 CMS 콘텐츠를 생성, 업데이트 할때
전자상거래 메타데이터 변경할때(가격, 설명, 카테고리 등등)
// pages/api/revalidate.js
export default async function handler(req, res) {
// 이 요청이 올바른지 확인하기 위해 암호 확인
if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
return res.status(401).json({ message: 'Invalid token' });
}
try {
await res.unstable_revalidate('/path-to-revalidate');
return res.json({ revalidated: true });
} catch (err) {
// error 발생시, Next.js가 마지막으로 생성된 페이지를 보여준다.
return res.status(500).send('Error revalidating');
}
}
getStaticProps에서 revalidate()를 사용할 필요가 없다.
revalidate()를 생략하면, on-demand 페이지에 unstable_revalidate() 요청시에만 재검증한다.
반응형