Next.js / 정적 메타 데이터 VS 동적 메타 데이터 비교

제미나이가 생성한 Next.js 이미지

 

1. 정적 메타데이터 (metadata)

// page.tsx
 
export const metadata = {
    title: "Home",
    description: "Welcome to the homepage"
}
 
 

- 데이터 : 고정값으로 페이지마다 미리 정의

 

- 사용 시점 : 빌드 시점에 이미 메타데이터가 생성됨

 

-  API 호출 : 불가능 (비동기 호출 불가)

 

- 장점 : 단순하고 빠름, 빌드 최적화 가능

 

- 단점 : 페이지 내용에 따라 동적으로 변경 불가

 

2. 동적 메타데이터 (generatedMetadata)

// page.tsx
 
import {getMovie} from "../../../components/movie-info";
 
export async function generateMetadata({ params }: {params: {id: string} }){
    const movie = await getMovie(params.id);
    return {
        title: movie.title, // 이러면 웹 브라우저 title에 비동기적으로 값이 변경된다.
        description: movie.overview,
    }
}