📌 SSG (Static Site Generation)
🔹 동작 과정
빌드 시에 HTML이 생성되고 매 요청마다 HTML을 재사용 함.
자세한 내용 : HTML은 next build 명령어를 사용할 때 생성됨. 그 후에는 CDN으로 캐시가 되어지고 요청마다 HTML을 재사용 함.
🔹 장점
-
빠른 로딩 속도
이유 : 모든 페이지가 빌드 시에 미리 생성되기 때문
-
서버 부하 감소
이유 : 미리 생성된 HTML만 제공하기 때문
-
JS를 필요로 하지 않음
-
SEO 에 좋음
-
CDN 캐시 가능
-
보안이 뛰어남
🔹 단점
-
데이터 변경에 불편
이유 : 사이트의 데이터가 변경될 때마다 전체 사이트를 다시 빌드해야 함
-
정적인 내용
-
실시간 데이터가 아님
🔹 사용되는 경우
요청마다 동일한 정보로 반환하는 경우
- ex. 마케팅 페이지, 블로그 게시물
🔹 App Router에서 사용하는 법
generateStaticParams활용
참고 : Statically rendering (SSG) dynamic routes with the Next.js App Router
📌 ISR (Incremental Static Regeneration)
🔹 동작 과정
서버 측에서 주기적으로 HTML을 서버에서 생성해두고 내려줌(처음 빌드 시점에 만들어두고, 설정한 주기마다 다시 렌더링하여 HTML을 생성)
🔹 장점
-
빠른 로딩 속도
-
서버 부하 감소
이유 : 모든 요청에 대해 실시간으로 페이지를 생성하지 않기 때문
-
JS를 필요로 하지 않음
-
SEO 에 좋음
-
CDN 캐시 가능
-
보안이 뛰어남
-
데이터 실시간 반영
이유 : 정해진 시간 간격으로 새로운 요청이 들어오면 페이지를 재생성
🔹 단점
-
실시간 데이터가 아님
-
사용자별 정보 제공의 어려움
이유 : my page 같은걸 사용자 별로 다 HTML을 미리 생성해 놓을 순 없다
🔹 사용되는 경우
동적이지만 자주 변경되지 않는 사이트인 경우
- ex. 블로그
참고 자료
복습 목적 블로그 입니다.