"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > Next.js 캐싱: 효율적인 데이터 가져오기로 앱 속도 향상

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

2024-11-08에 게시됨
검색:202

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

에서 캐싱을 효과적으로 사용하는 방법을 분석하겠습니다.

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

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

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

Next.js Caching: Turbocharging Your App with Efficient Data Fetching

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

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

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

Next.js Caching: Turbocharging Your App with Efficient Data Fetching

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

Next.js Caching: Turbocharging Your App with Efficient Data Fetching

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

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

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

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

Next.js Caching: Turbocharging Your App with Efficient Data Fetching

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

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

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

Next.js Caching: Turbocharging Your App with Efficient Data Fetching

Next.js Caching: Turbocharging Your App with Efficient Data Fetching

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

불안정한 방법 사용

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

Next.js Caching: Turbocharging Your App with Efficient Data Fetching

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

Next.js Caching: Turbocharging Your App with Efficient Data Fetching

프롭 드릴링 건너뛰기

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

Next.js Caching: Turbocharging Your App with Efficient Data Fetching

Next.js Caching: Turbocharging Your App with Efficient Data Fetching

Next.js Caching: Turbocharging Your App with Efficient Data Fetching

마무리

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

출처:
Next.js 캐싱

릴리스 선언문 이 기사는 https://dev.to/samaghapour/nextjs-caching-turbocharge-your-app-with-efficient-data-fetching-51hb?1에서 복제됩니다. 침해가 있는 경우에는 [email protected]으로 문의하시기 바랍니다. 그것을 삭제하려면
최신 튜토리얼 더>

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3