데이터가 있거나 없는 정적 생성(SSG)
정적 생성은 데이터 유무에 관계 없이 수행 할 수 있습니다.
지금까지 만든 모든 페이지는 외부 데이터를 가져올 필요가 없었습니다.
이러한 페이지는 앱이 프로덕션용(배포용)으로 빌드 될 때 자동으로 정적으로 생성됩니다.
그러나 일부 페이지의 경우 먼저 외부 데이터를 가져오지 않고는 HTML을 렌더링 하지 못할 수 있습니다.
파일 시스템에 엑세스 하거나 외부 API를 가져오거나 빌드 시 데이터베이스를 쿼리해야 할 수도 있습니다.
이런 경우 Next.js는 데이터를 사용한 정적 생성(getStaticProps)을 즉시 지원합니다.
데이터를 사용한 정적 생성 : getStaticProps
Next.js에서 페이지 컴포넌트를 내보낼 때 async 함수를 사용하면 getStaticProps도 내보낼 수 있습니다.
- getStaticProps 프로덕션이 빌드 시간에 실행 됩니다.
- 함수 내에서 외부 데이터를 가져와서 사용합니다.
export default function Home(props) { ... }
export async function getStaticProps() {
// Get external data from the file system, API, DB, etc.
const data = ...
// The value of the `props` key will be
// passed to the `Home` component
return {
props: ...
}
}
export default function Home(props) { ... }
export const getStaticProps = async () => {
// Get external data from the file system, API, DB, etc.
const data = ...
// The value of the `props` key will be
// passed to the `Home` component
return {
props: ...
}
}
기본적으로 getStaticProps를 사용하면 Next.js에
"이 페이지에는 일부 데이터 종속성이 있으므로 빌드 시 이 페이지를 렌더링 할 때 먼저 해결 해야 합니다!"
라고 명시적으로 알려 줄 수 있습니다.
공식문서에서는 getServerSideProps(서버 측 렌더링)를 설명하지 않고 있습니다.
이는 이전 포스팅에서 확인 할 수 있습니다.
'프레임워크 > Next.js' 카테고리의 다른 글
[Next.js] getStaticProps 구현 (0) | 2022.02.18 |
---|---|
[Next.js] 블로그 데이터 (0) | 2022.02.18 |
[Next.js] 두 가지 형태의 사전 렌더링 (0) | 2022.02.18 |
[Next.js] 사전 렌더링 (0) | 2022.02.18 |
[Next.js] Assets(자산), Meta Data 및 CSS (0) | 2022.02.17 |
댓글