Next.js 13.2 API 엔드포인트에서 캐싱 문제를 방지하는 방법은 무엇입니까?

Next.js 13.2 API 엔드포인트에서 데이터 캐싱 문제를 해결하는 방법

데이터를 검색하는 API 엔드포인트를 사용하여 Next.js 애플리케이션을 배포하는 경우 외부 소스에서 개발자는 기본 데이터 소스의 변경 사항에 관계없이 캐시된 데이터가 일관되게 표시되는 문제에 직면할 수 있습니다. 이 동작은 프로덕션 환경의 API 경로 및 서버 구성 요소에 대한 Next.js의 캐싱 메커니즘으로 인해 발생할 수 있습니다.

이 캐싱 문제를 해결하기 위해 Next.js는 캐싱 동작을 제어하기 위한 여러 옵션을 제공합니다.

재검증 또는 캐시 옵션과 함께 Fetch() 사용

데이터 가져오기에 fetch()를 사용하는 경우 개발자는 재검증 또는 캐시 옵션을 지정하여 쿼리당 캐싱 동작을 제어할 수 있습니다.

<code class="js">fetch('https://...', { next: { revalidate: 10 } });
// OR
fetch('https://...', { cache: 'no-store' });</code>

재검증 옵션은 캐시를 다시 가져오기까지의 시간(초)을 지정합니다. 캐시 옵션을 사용하면 브라우저가 응답을 캐싱하지 못하도록 방지하는 no-store와 같은 값을 사용하여 보다 세부적인 제어가 가능합니다.

사용자 정의 캐싱 규칙을 위한 경로 세그먼트 구성 사용

fetch()가 사용자 정의 캐싱 규칙과 함께 사용되거나 axios와 같은 라이브러리를 사용하거나 데이터베이스와 직접 상호 작용하는 경우 개발자는 Route Segment Config를 사용할 수 있습니다. Route Segment Config를 사용하면 경로별로 캐싱 동작을 정의할 수 있습니다.

<code class="js">// layout.js OR page.js OR route.js ??

import prisma from "./lib/prisma";

/*
  Bleow option is when you want no caching at all, there are more options
  on the doc depending on your needs. 
*/
export const dynamic = "force-dynamic";

async function getPosts() {
  const posts = await prisma.post.findMany();
  return posts;
}

export default async function Page() {
  const posts = await getPosts();
  // ...
}</code>

동적을 "force-dynamic"으로 설정하면 Next.js는 지정된 경로에 대한 캐싱을 비활성화합니다. 개발자는 Next.js 문서에 설명된 대로 특정 캐싱 요구 사항에 따라 추가 옵션을 탐색할 수 있습니다.

위 내용은 Next.js 13.2 API 엔드포인트에서 캐싱 문제를 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!