오늘 공부한것 & 기억하고 싶은 내용
Dynamic Metadata
1. 정적인 메타데이터
정적으로 데이터를 받아온다면 고정으로 메타데이터를 설정해주면 된다.
export const metadata = {
title: "Home",
}하지만 동적으로 데이터를 받아오는 페이지에서는 그 페이지에 맞는 타이틀을 받아와야 한다.
2. 동적인 메타데이터
동적으로 데이터를 받아오는 페이지라면, 페이지에 맞는 제목이나 설명을 받아와야 한다.
generateMetadata 함수를 이용해 데이터를 기반으로 메타데이터를 생성할 수 있다.
export async function generateMetadata({
params: { id },
}) {
const { title } = await getMovie(id)
return {
title,
}
}POINT
- 서버 컴포넌트에서만 사용 가능:
metadata객체와generateMetadata함수는 서버 컴포넌트에서만 사용 가능하다. - 둘 중 하나만 export 가능:
metadata객체와generateMetadata함수를 동시에 export할 수 없다. (둘 중 하나만 선택) - export 중요: 필요한
export를 빼먹지 않도록 주의!
prefetch
간단히 말하면 페이지를 미리 로드해두어, 사용자가 해당 페이지로 이동할 때 더 빠르게 로딩되도록 도와주는 기능이다.
Prefetch 작동 방식: Link 컴포넌트가 사용자의 뷰포트에 들어갈 때 (즉, 페이지가 화면에 보일 때 또는 스크롤을 통해 링크가 화면에 도달할 때) prefetch가 발생한다.
Next.js에서의 prefetch:
- Next.js는 Link 컴포넌트로 연결된 라우트(href에 지정된 라우트)에 대한 데이터를 백그라운드에서 미리 로드하고, 클라이언트 측 네비게이션 성능을 향상시킨다.
- 즉, 사용자가 해당 링크를 클릭하기 전에 미리 데이터를 로딩해서, 페이지 이동 시 더 빠른 반응을 제공한다.
프로덕션에서만 활성화: Prefetch는 개발 모드에서는 동작하지 않으며, 프로덕션 모드에서만 활성화된다.
기본값 null: prefetch 속성의 기본값은 null로, 이때 prefetch 동작은 정적 경로(static path)와 동적 경로(dynamic path)에 따라 달라질 수 있다.
배운점 & 느낀점
페이지가 많아지면 브라우저 탭에 타이틀을 맞추는게 쉽지 않다..
SEO 최적화를 위해서라도 탭 타이틀은 꼭 맞춰야하는게 맞으니 동적으로 받아오는 페이지들도 자동으로 호출해줘서 맞춰준다니 .. 역시 넥스트는 대단하고 위대하다^^
프론트는 순항중 ¿¿