App Router 환경에서 fetch API를 사용할 때, 캐싱을 비활성화하고 매 요청마다 서버에서 동적으로 데이터를 가져오게 하려면 옵션을 어떻게 설정하나요?

App Router 환경에서 fetch API를 사용할 때 캐싱을 비활성화하고 매 요청마다 서버에서 데이터를 가져오려면 cache: 'no-store' 옵션을 사용합니다.

fetch 함수의 두 번째 인자로 { cache: 'no-store' }를 전달하면 Next.js는 해당 요청에 대한 응답을 캐싱하지 않습니다. 이렇게 하면 서버 컴포넌트에서 데이터를 가져올 때 항상 최신 데이터를 가져올 수 있습니다.

const data = await fetch('api/data', { cache: 'no-store' });

또 다른 방법으로는 revalidate: 0을 사용하는 방법도 있지만, cache: 'no-store'가 캐싱을 완전히 비활성화하는 더 확실한 방법입니다. dynamic 키워드를 사용하여 페이지 또는 컴포넌트를 dynamic rendering하도록 설정하는 것도 같은 효과를 낼 수 있습니다. SSR 환경에서 데이터를 동적으로 가져올 때 유용합니다.