nextjs의 14버전에서 data fetch

지형님, 안녕하세요! 좋은 질문 남겨주셔서 감사합니다.

두가지 질문 남겨주신 걸로 이해하고 답변드려볼게요 🙂

첫번째 질문

어디가 어떻게 확장되었는지가 궁금합니다!

Web API로서 존재하는 Fetch API는 옵션으로 next 라는 값을 받지 않습니다. 하지만 Next.js의 fetch 함수에서는 next라는 값이 존재합니다. 아래의 예시를 보시면 아실 수 있습니다. revalidate 옵션을 부여하기 위해 next라는 객체를 정의합니다.

// 10초 동안 유효한 캐시를 생성합니다.
// `getStaticProps`가 `revalidate` 옵션을 사용하는 경우와 유사합니다.
fetch(URL, { next: { revalidate: 10 } });

조금 더 이해를 돕기 위해 다음 질문으로 넘어가서 맥락을 계속 설명드릴게요.

두번째 질문

그리고 13버전 이전에는 fetch에서 캐싱이 되지 않았던 것일까요?

확장된 fetch 함수는 Next.js 13에서 처음 소개되었습니다. 이전에는 데이터 캐싱을 제어하기 위해 getStaticProps, getServerSideProps을 사용해야 했습니다. 이는 모두 페이지 단위로 데이터를 캐싱하는 전략입니다.

아래는 확장된 fetch 함수를 소개하는 글을 번역한 내용입니다.

네이티브 fetch 웹 API도 React와 Next.js에서 확장되었습니다. 가져오기 요청을 자동으로 중복 제거하고 컴포넌트 수준에서 데이터를 가져오기, 캐시 및 재검증하는 하나의 유연한 방법을 제공합니다. 즉, 이제 하나의 API를 통해 정적 사이트 생성(SSG), 서버 측 렌더링(SSR), 점진적 정적 재생성(ISR)의 모든 이점을 사용할 수 있습니다. (출처: Next.js 블로그)

이전과 같이 페이지 단위로 데이터를 캐싱하던 전략으론 서버 컴포넌트의 장점을 살릴 수 없다고 판단했을 것 같습니다. Next.js 13부터 컴포넌트 단위로 서버에서 비동기 함수를 호출해야 하는 일이 늘어남에 따라 이전보다 유연하게 캐시, 재검증을 제어하기 위해 fetch 함수를 확장해 제공하고 있습니다.

질문에 대한 답변이 되었으면 좋겠네요!

설명이 부족한 부분이 있다면 언제든 편히 질문 남겨주세요!

감사합니다.

하조은 드림