Next.js 캐싱: 효율적인 데이터 가져오기로 앱 속도 향상

Next.js의 캐싱은 단순히 시간을 절약하는 것이 아닙니다. 중복된 네트워크 요청을 줄이고, 데이터를 최신 상태로 유지하며, 앱이 최고의 성능을 발휘하도록 만드는 것입니다.
데이터를 더 오랫동안 캐시된 상태로 유지하거나 필요에 따라 새로 고치려는 경우 Next.js는 필요한 모든 도구를 제공합니다. 이 글에서는 Next.js에서 캐싱을 효과적으로 사용하는 방법을 자세히 설명하겠습니다

Next.js는 fetch API를 확장하여 캐싱과 관련된 강력한 기능을 제공합니다. cache: 'no-store' 및 cache: 'force-cache'와 같은 간단한 가져오기 옵션을 사용하면 데이터가 캐시되는 시기와 방법을 쉽게 제어할 수 있습니다.

캐시가 있는 항상 최신 상태: 'no-store'(unstable_noStore()와 동일)

매번 새로운 데이터를 원하시나요? 캐시: 'no-store'를 사용하는 것이 좋습니다. 이 가져오기 옵션은 캐시를 완전히 건너뛰고 요청이 있을 때마다 최신 데이터를 가져옵니다. 실시간 정확성이 필요할 때 완벽합니다. 어제 가져온 결과가 남지 않습니다.

참고: 서버 구성 요소에서 캐시를 건너뛰려면 unstable_noStore()를 사용할 수도 있습니다. 구문은 나중에 변경될 수 있으므로 안정성을 위해 cache: 'no-store'를 고수하세요.

캐시로 데이터 재사용: 'force-cache'(불안정한_cache()와 동일)

반면에 캐시된 데이터(자주 변경되지 않는 정적 콘텐츠를 생각해 보세요)를 사용해도 괜찮다면 cache: 'force-cache'를 사용하세요. 나중에 사용할 수 있도록 응답을 저장하고 중복 네트워크 요청을 건너뜁니다.

참고: unstable_cache()도 데이터를 캐시하지만, 향후 예상치 못한 상황을 피하려면 stable cache: 'force-cache'를 사용하는 것이 더 안정적입니다.

재검증을 통해 최신 상태로 유지

특정 시간이 지났거나 이벤트로 인해 캐시된 데이터를 새로 고쳐야 하는 경우가 있습니다. 운 좋게도 Next.js를 사용하면 캐시된 데이터를 여러 가지 방법으로 재검증할 수 있습니다.

시간에 따라 재검증: next.revalidate

데이터를 주기적으로(예: 매시간 또는 매일) 새로 고쳐야 하는 경우 가져오기 요청에서 next.revalidate 옵션을 사용하여 유효성 재검사 기간을 설정할 수 있습니다. 지정한 시간 이후에 최신 데이터를 가져오고 나머지 시간에는 캐시를 유지합니다.

fetch('https://api.example.com/data', {
  next: { revalidate: 3600 }  // Revalidate data every hour (3600 seconds)
});

태그를 사용한 주문형 재검증: revalidateTag()

이제 양식 제출이나 새 블로그 게시물 게시 등 중요한 일이 발생할 때 Next.js에 캐시된 데이터의 특정 비트를 새로 고치도록 지시할 수 있다고 상상해 보세요. 캐시된 데이터에 태그를 할당한 다음 필요할 때마다 해당 태그를 다시 검증할 수 있습니다.

이렇게 하면 다음 예정된 재검증을 기다리지 않고 필요할 때 캐시의 일부를 수동으로 새로 고칠 수 있습니다.

불안정한 방법 사용

모험적인 유형이라면 서버 구성 요소에서 직접 unstable_noStore() 및 unstable_cache() 메서드를 사용하여 캐싱 동작을 관리할 수도 있습니다. 이러한 내용은 "불안정"하므로 나중에 변경될 수 있습니다(또는 읽고 있는 시점에 변경되었을 수 있음).

또는 캐싱을 사용하는 경우 불안정_cache()를 사용하는 방법은 다음과 같습니다.

프롭 드릴링 건너뛰기

여기에 깔끔한 요령이 있습니다. 여러 구성 요소(예: 레이아웃, 페이지 및 일부 내부 구성 요소)에서 동일한 데이터를 가져오는 경우 맨 위에서 한 번 가져와서 아래로 전달해야 하는 것에 대해 스트레스를 받지 마세요. 여러 구성 요소에서 해당 데이터를 여러 번 요청하면 성능이 저하됩니다. Next.js는 서버 렌더링 중에 가져오기 요청을 자동으로 기억합니다. 즉, 동일한 데이터를 여러 번 가져오는 경우 네트워크에 한 번만 도달하고 결과를 여러 구성 요소에서 공유할 만큼 똑똑합니다.

마무리

Next.js는 cache: 'no-store' 및 cache: 'force-cache' 또는 좀 더 실험적인 불안정한_noStore() 및 불안정한_cache() 메소드. next.revalidate 및 revalidateTag와 같은 재검증 전략을 추가하면 땀을 흘리지 않고도 데이터를 최신 상태로 유지하는 데 필요한 모든 것을 얻을 수 있습니다.

출처:

Next.js 캐싱

위 내용은 Next.js 캐싱: 효율적인 데이터 가져오기로 앱 속도 향상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!