내 Next.js API 경로가 Vercel 배포 시 캐시된 데이터를 반환하는 이유는 무엇입니까?

Vercel 배포 시 Next.js API 라우팅 데이터 캐시 문제

Next.js v13.2 애플리케이션에서 데이터를 가져오는 API 엔드포인트 Vercel에 배포한 후 데이터베이스에서 특이한 동작이 발생합니다. 동일한 응답이 지속적으로 반환되어 캐싱 문제를 시사합니다.

근본 원인:

기본적으로 Next.js는 API 경로 및 서버 구성 요소에서 가져온 모든 데이터를 캐시합니다. 생산. API 경로에 대한 요청이 이루어지면 데이터베이스에서 새 데이터를 가져오는 대신 캐시된 데이터가 제공됩니다.

해결책:

1. fetch()를 사용한 쿼리별 캐시 제어

fetch() API를 사용하는 경우 재검증 또는 캐시 옵션을 지정하여 기본 캐싱 동작을 재정의할 수 있습니다.

• revalidate: 데이터를 다시 가져오기 전 캐시 기간을 초 단위로 지정합니다.

• cache: 명시적으로 설정 캐시 동작, 옵션은 다음과 같습니다.

  • no-store: 캐싱을 완전히 비활성화합니다.
  • no-cache: 응답을 제공하기 전에 캐시를 다시 검증합니다.
  • reload: 항상 에서 새 데이터를 가져옵니다. 서버.

예:

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

2. 일반화된 캐싱을 위한 경로 세그먼트 구성

fetch()를 사용하지 않거나 경로 세그먼트 수준에서 캐싱을 제어해야 하는 경우 경로 세그먼트 구성을 사용하세요.

• 동적 세그먼트 추가: 내보내기 추가 const 동적 = "force-dynamic"; 레이아웃, 페이지 또는 경로 파일에. 이렇게 하면 해당 세그먼트에 대한 캐시 동작이 비활성화됩니다.

예:

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

import prisma from "./lib/prisma";

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>

위 내용은 내 Next.js API 경로가 Vercel 배포 시 캐시된 데이터를 반환하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!