[241210 TIL] 본캠프 50일차 (Caching)

 

Next.js는 대부분의 영억에서 fetch 함수를 기반으로 캐싱을 하는데, 여기에서의 fetch 함수는 브라우저의 fetch API를 기반으로 Next.js에서 확장한 새로운 fetch API를 뜻한다.

 

그 중에서도 빌드할 때와 요청할 때, 이렇게 크게 두 가지 포인트에서 캐싱을 진행한다.

 

 

Full Route Cache

빌드 시점에 페이지를 렌더링한 결과를 캐싱한다.

 

이를 통해, 서버는 매 요청마다 페이지를 다시 렌더링할 필요없이 미리 생성된 HTML과 데이터를 빠르게 사용자에게 제공할 수 있기 때문에 페이지 로딩 속도가 크게 향상된다.

 

주로 SSG 방식의 페이지에서 사용된다.

 

 

Data Cache

fetch 함수를 기반으로 데이터를 캐싱하고, 서버 요청 간에도 데이터를 지속적으로 활용할 수 있게 해준다.

 

기본적으로 fetch 함수를 사용하면 데이터가 자동으로 캐싱이 되고, 이는 동일한 데이터에 대한 중복 요청을 방지하는 효과가 있다.