캐싱 종류

Next.js에서 사용할 수 있는 주요 캐싱 유형

1. Static Generation (SSG)
2. Server-Side Rendering (SSR)
3. Incremental Static Regeneration (ISR)
4. API Routes 캐싱
5. 브라우저 캐싱
6. CDN 캐싱

 

Static Generation (SSG)

- Next.js에서 모든 페이지를 빌드 타임에 미리 생성하여 정적인 HTML 파일로 저장

- 사용자 요청 시 서버 측 연산 없이 미리 생성된 정적 파일을 제공

- getStaticProps / getStaticPaths 사용 되는 주요 함수

Server-Side Rendering (SSR)

- 사용자가 페이지를 요청할 때마다 서버에서 HTML을 동적으로 생성

- 최신 데이터를 항상 제공할 수 있지만, 서버 부하가 커질 수 있습니다.

- getServerSideProps 사용 되는 주요 함수

 

Incremental Static Regeneration (ISR)

- SSG의 장점을 유지하면서도 특정 간격으로 페이지를 재생성하여 최신 상태를 반영

- SSG의 성능과 SSR의 최신 데이터 제공 장점을 결합.

- getStaticProps 사용 되는 주요 함수

 

API Routes 캐싱

- API Routes에서 HTTP 캐싱 헤더를 설정하여 클라이언트가 요청할 때 캐시된 데이터를 사용

- res.setHeader

브라우저 캐싱

- 브라우저 캐싱을 통해 정적 파일(이미지, CSS, JS 등)을 브라우저에 저장