Next.js 메타데이터가 업데이트되지 않나요? 이유는 다음과 같습니다

generateMetadata를 업데이트하고 재배포해도 링크를 공유하면 이전 제목이나 이미지가 계속 표시됩니다. 캐싱 레이어인지 코드 실수인지 확인하는 방법은 다음과 같습니다.

재현 가능한 예

이는 올바른 것처럼 보이지만 콘텐츠가 변경된 후에도 오래된 메타데이터를 계속 제공합니다.

export async function generateMetadata({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`).then(r => r.json());

  return {
    title: post.title,
    openGraph: {
      images: [post.image],
    },
  };
}

여기서 fetch 호출은 기본적으로 Next.js의 데이터 캐시에 의해 캐시됩니다. post.title 또는 post.image가 CMS에서 변경되면 이 함수는 캐시 유효성을 다시 검사할 때까지 새 값을 볼 수 없습니다. 명시적인 전략이 없으면 다음 전체 빌드까지는 불가능할 수 있습니다.

메타데이터가 업데이트되지 않는 이유

기본 가져오기가 캐시됩니다.

기본적으로 generateMetadata 내부의 fetch()는 앱 라우터에 무기한 캐시됩니다. 명시적인 재검증 기간을 설정하여 문제를 해결하세요.

const post = await fetch(url, { next: { revalidate: 60 } }).then(r => r.json());

또는 해당 요청에 대한 캐싱을 완전히 선택 해제하세요.

const post = await fetch(url, { cache: "no-store" }).then(r => r.json());

경로는 정적으로 생성됩니다.

재검증이 구성되지 않은 상태에서 경로가 generateStaticParams를 사용하는 경우 메타데이터를 포함한 전체 경로가 빌드 시 구워집니다. 페이지 수준에서 export const revalidate = 3600;를 추가하면 주기적 재생성이 강제됩니다.

CDN 또는 에지 캐시가 이전 HTML을 제공하고 있습니다.

빌드가 올바른 경우에도 Vercel의 Edge Network, Cloudflare 또는 앱 앞의 다른 CDN가 수정 사항보다 먼저 캐시된 HTML 응답을 제공할 수 있습니다. 응답 헤더를 확인하세요.

curl -I https://yoursite.com/blog/post-slug

x-vercel-cache: HIT 또는 유사한 CDN 헤더를 찾으세요. HIT는 최신 배포가 아닌 캐시된 복사본을 보고 있다는 의미입니다.

opengraph-image.ts가 새로운 데이터를 수집하지 않습니다

파일 기반 opengraph-image.ts 규칙을 사용하는 경우 Next.js는 기본적으로 빌드 시 정적 이미지를 생성합니다. 내부의 동적 콘텐츠에는 다른 서버 구성 요소와 동일한 캐싱 규칙이 적용되므로 최신 상태로 유지해야 하는 경우 명시적인 재검증을 추가하세요.

실제로는 귀하의 것이 아닌 플랫폼의 캐시입니다.

가장 흔한 허위 경보. Facebook, LinkedIn 또는 Slack가 며칠 전에 캐시된 미리보기를 계속 표시하는 동안 앱은 완전히 새로운 메타데이터를 제공할 수 있습니다. Next.js 코드를 터치하기 전에 서버가 보내는 내용을 확인하세요. 모든 플랫폼에서 OG 캐시를 지우는 방법에 대한 가이드를 참조하세요.

단계별 수정 가이드

1. 실행 curl -s https://yoursite.com/page | grep -i "og:" 서버가 실제로 보내는 내용을 확인하려면
2. curl -I https://yoursite.com/page를 사용하여 CDN 캐시 HIT 헤더를 확인하세요.
3. generateMetadata 내부에서 가져오려면 명시적인 revalidate 또는 cache: "no-store"를 추가하세요.
4. 오래된 빌드 캐시를 배제하기 위해 새로운 배포를 강제합니다.
5. Proovd로 실시간 결과를 확인하세요.

Next.js 대 다른 프레임워크

빠른 수정 체크리스트

자주 묻는 질문