Next.js에서 metadata와 generateMetadata 차이점 및 사용법

Next.js에서 SEO와 메타데이터 설정을 위해 metadata와 generateMetadata 두 가지 방법을 제공합니다.

 

1. metadata: 정적 메타데이터 설정

metadata 객체는 빌드 시점에 결정되는 정적 메타데이터를 설정할 때 사용합니다.

export const metadata: Metadata = {
  title: 'Kakao.GG Tech Blog',
  description: 'Hello this is Kakao.GG Tech Blog',
  openGraph: {
    title: 'About Kakao.GG',
    description: 'Make something fun',
    images: [{ url: '/images/kakaogg.png' }],
  },
}

• 빌드 시 결정되는 고정 값

• 동적 데이터가 필요 없는 경우에 적합

• 간단하고 직관적인 사용법

 

2. generateMetadata: 동적 메타데이터 생성

generateMetadata 함수는 요청 시 동적으로 메타데이터를 생성해야 할 때 사용합니다.

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const post = await fetchPost(params.id)
  return {
    title: `${post.title} | Kakao.GG`,
    description: ${post.description},
  }
}

• 요청 시점에 동적으로 메타데이터 생성

• 비동기 함수로 외부 데이터 fetch 가능

• URL 파라미터나 동적 데이터 기반 메타데이터에 적합

 

metadata vs generateMetadata: 언제 무엇을 사용해야 할까?

• metadata

  • 데이터 유형: 정적

  • 비동기 처리: 불가능

  • 사용: 고정 페이지

  • 성능: 빠름 (빌드 시 생성)

• generateMetadata

  • 데이터 유형: 동적

  • 비동기 처리: 가능

  • 사용: 동적 콘텐츠 페이지

  • 성능: 상대적으로 느림 (요청 시 생성)

 

주의사항

1. TypeScript 사용 시 Metadata 타입을 import하여 타입 안정성 확보

2. generateMetadata에서 무거운 작업은 피하고, 필요한 데이터만 입력

 

정적일 때 generateMetadata를 사용하는 건 잘못된 것일까?

generateMetadata는 본래 동적인 메타데이터를 설정하기 위한 비동기 함수이므로, 다음과 같은 이유로 비동적인 데이터를 처리할 때는 metadata를 사용하는 것이 권장됩니다.

1. 성능 최적화: generateMetadata는 비동기 함수로 설계되어 있어, 호출 시점에 불필요한 비동기 처리가 발생할 수 있습니다. 정적인 메타데이터는 불필요한 비동기 처리를 할 필요가 없기 때문에 metadata가 더 효율적입니다.

2. 코드 가독성 및 유지보수: 정적인 데이터를 처리하는 데에 generateMetadata를 사용하면, 다른 개발자가 이 코드를 읽을 때 해당 메타데이터가 동적으로 생성된다고 오해할 수 있습니다. 반면, metadata를 사용하면 이 데이터가 정적임을 명확하게 표현할 수 있습니다.

3. Next.js 관례: Next.js에서는 metadata는 정적 메타데이터를 설정하는 데에, generateMetadata는 동적 메타데이터를 생성하는 데에 사용됩니다. 이러한 관례를 따르면, 프로젝트의 일관성을 유지하고 더 쉽게 유지보수할 수 있습니다.

따라서, 정적인 데이터가 필요한 경우에는 metadata를 사용하고, 동적으로 데이터를 받아와야 할 때 generateMetadata를 사용하는 것이 더 나은 선택입니다.