소개
NextJS를 공부하면서 서버측 렌더링이 무엇인지, 클라이언트측 렌더링이 무엇인지 감을 잡기가 어려웠습니다.
하지만 계속 코딩을 하고 익숙해지다 보니 어느 정도 감이 오는 것 같아요.
혼란스러우면 SSG, SSR, ISR을 간략히 복습해보겠다.
NextJS는 기본적으로 모든 페이지를 사전 렌더링합니다.
사전 렌더링 과정에는 SSG와 SSR이 있습니다.
SSG & SSR
정적 사이트 생성(SSG)과 서버측 렌더링(SSR) 사이 HTML 파일이 생성될 때차이가 있습니다.
참고로 SSG는 공식 문서에서 정적 생성으로 표시되어 있습니다.
SSG
HTML 파일이 빌드될 때 = 프로젝트가 빌드될 때
정적 생성은 사용자가 요청을 보내기 전에 페이지를 생성해도 괜찮은 경우에 사용됩니다.
즉, 이 방법은 생성 후에도 정적 콘텐츠가 표시되는 페이지를 생성하는 데 적합합니다.
데이터는 생성 단계에서만 검색되며 고정 사용을 위해 JSON 형식으로 저장됩니다.
특성
1. 각 요청에서 미리 생성된 HTML 파일을 재사용합니다.
2. 성능상의 이유로 정적 생성을 권장합니다.
3. 정적으로 생성된 페이지는 CDN에 캐시됩니다.
4. getStaticProps, getStaticPaths
5. 예시) 마케팅 페이지, 블로그 게시물, 제품 목록, 도움말 및 문서 등
장점
1. 모든 데이터를 로드하지 않음으로써(데이터 필터링) 성능이 보장됩니다.
2. 충전 과정이 빠릅니다.
SSR
HTML 파일이 생성될 때 = 모든 요청
서버 사이드 렌더링은 항상 최신 상태를 유지해야 할 때 사용됩니다. (데이터 검색과 관련하여)
특성
1. 항상 최신 상태를 유지할 수 있습니다. (사용자 요청이 있을 때마다 HTML 파일이 생성되기 때문에)
2. CDN에 캐싱되지 않기 때문에 SSG에 비해 상대적으로 느릴 수 있습니다.
3. 사용자 요청이 증가함에 따라 성능 문제가 발생할 수 있습니다.
4. getServerSideProps
5. 예시) 관리자페이지, 분석차트 등
ISR
정적 생성으로 페이지를 생성할 때의 단점은 고정 데이터만 표시된다는 것입니다.
한편, CSR 방식(클라이언트 사이드 렌더링)을 사용하여 데이터를 로드할 때 업데이트된 데이터도 로드할 수 있습니다.
NextJS에는 서버 측에서 최신 데이터를 가져오는 방법도 있습니다.
이것이 ISR(Incremental Static Regeneration)입니다.
특성
1. getStaticProps 함수에서 반환된 객체에 revalidate 키를 추가합니다. (단위 시간은 초)
2. 유효성 재확인 옵션에 입력된 시간(초) 동안 주기적으로 페이지가 재생성됩니다. NextJS는 어떤 데이터가 변경되었는지 알지 못하고 주기적으로 페이지를 재생성합니다. (정적 HTML + 주기적으로 재생성됨)
3. 빌드 이후에만, 즉 프로덕션 모드에서만.
온디맨드 재검증
https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration
데이터 검색: 증분 정적 재생성 | Next.js
증분 정적 새로 고침을 사용하여 런타임에 정적 페이지를 생성하거나 업데이트하는 방법을 알아봅니다.
nextjs.org
공식 문서에서 설명해주세요.
참고로 스트래피 CMS를 사용한다면 웹후크를 이용하여 온디맨드 재검증을 활용할 수 있다.
On-Demand Revalidation 기능의 이점은 무엇입니까?
재검증 옵션에서 설정한 시간(초) 이후에만 변경된 데이터에 액세스할 수 있는 대신,
데이터가 변경된 직후 변경 사항을 확인할 수 있습니다.