20.0 Introduction
ISR = 단계적 정적 재생성
NextJS에서 최고의 기능!!
페이지를 렌더링하는 방법들
1. CSR - 완성된 초기 html먼저 보여줌, ReactJS가 데이터 알아서 불러오고.
2. SSR - all or nothing, 완성된 HTML 보여주고, ReactJS는 필요없음.(getServerSideProps)
3. 빌드 될 때 파일 미리 생성해두기(getStaticProps, getStaticPath), interaction없는 static page(F&Q 같은 곳)에 사 - 직전 포스트의 내용
이제는 페이지 불러 올 때 getServerSideProps없이도 로딩상태를 완전히 안보여줄 수 있다.
20.1 ISR part One
ISR사용하면 로딩 안보이고, 서버에서 렌더링 할 필요 없음(getServerSideProps사용 안함). 페이지 즉시 불러 올 수 있음.
유저가 페이지 열면 서버단에서 렌더링 되는게 아님. 이미 랜더링 된 상태.
getStaticProps()의 return 객체에 revalidate에 시간(초)을 넣으면
그 시간마다 페이지가 다시 빌드 됨.
export async function getStaticProps() {
console.log("building comming, statically");
const posts = await client.post.findMany({ include: { user: true } });
return {
props: {
posts: JSON.parse(JSON.stringify(posts)),
},
revalidate: 20,
};
}
export default Community;좀더 정확히 말하면,
1. revalidate에는 20초라는 타이머가 설정되고
2. 유저 몇명이 오든 20초 안에 오면 같은 버전의 페이지를 보여줌.
3. 그리고 20초가 지나서 유저가 오면, 여전히 2번의 유저들과 같은 페이지를 보여주지만, 이 때 revalidate를 해서 다시 빌드를 시작한다.
4. 그리고 그 다음에 온 유저는 그 빌드된 새 버전의 페이지를 보게 됨.
즉, revalidate시간이 지나도 사람 안오면 굳이 빌드 안함.
https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration
이를 테스트 해보려면 npm run dev로는 안됨.
개발자 모드이기 때문에 계속 최신 화면 보여주기 때문.
그러니 npm run build 하고, npm run start해야 함.