Data Fetching
Next.js는 pre-rendering 을 위해 데이터를 가져오는 방법으로 3가지 비동기 함수를 제공하고 있습니다.
- getStaticProps(정적 생성): 빌드 시 데이터를 가져옵니다.
- getStaticPaths(정적 생성): 데이터를 기반으로 페이지를 미리 렌더링하기 위한 동적 경로를 지정합니다.
- getServerSideProps(서버 측 렌더링): 각 요청에서 데이터를 가져옵니다.
getStaticProps(정적 생성)
페이지에서 getStaticProps라는 비동기 함수를 export 하는 경우 이 함수에서 반환되는 props를 사용하여 빌드 시 이 페이지를 pre-rendering 합니다.
!!) 이 함수 안에서는 내부 api호출을 위해 fetch를 사용하면 안됩니다. 대신 API 경로 내에서 사용되는 로직을 직접 가져오세요.
export async function getStaticProps(context) {
return {
props: {}, // props로 페이지 컴포넌트에 전달된다.
}
}
context에는 params, preview, previewData, locale, locales, defaultLocale 를 포함하는 객체입니다.
- params - 동적 경로를 사용하는 페이지에 대한 경로 매개변수를 포함합니다. ex)[id].js의 id
- preview - 페이지가 preview mode이면 true, 아니면 정의되어있지 않습니다.
- previewData - setPreviewData에 의해 설정된 미리보기 데이터를 포함합니다.
- locale - 활성 로케일을 포함합니다(국제화 라우팅을 활성화한 경우).
- locales - 지원되는 모든 로케일을 포함합니다(국제화된 라우팅을 활성화한 경우).
- defaultLocale - 구성된 기본 로케일이 포함됩니다(국제화 라우팅을 활성화한 경우).
getStaticProps 반환할 때는 props, revalidate, notFound, redirect를 포함하는 개체를 반환해야합니다.
- props - 페이지 구성 요소에서 수신할 props가 있는 선택적 개체입니다. 직렬화 가능한 객체여야 합니다.
- revalidate - 페이지 재생성이 발생할 수 있는 초 단위의 선택적 양입니다. 기본값은 false입니다. false이면 재검증이 없음을 의미하므로 다음 빌드까지 페이지가 빌드된 상태로 캐시됩니다.
- notFound - 페이지가 404 상태 및 페이지를 반환할 수 있도록 하는 선택적 boolean 값입니다.
export async function getStaticProps(context) {
const res = await fetch(`https://.../data`)
const data = await res.json()
if (!data) {
return {
notFound: true,
}
}
return {
props: { data }, // will be passed to the page component as props
}
}- redirect - 내부 및 외부 리소스로 리디렉션할 수 있는 선택적 리디렉션 값입니다. {destination: string, permanent: boolean}의 형태와 일치해야 합니다. next.config.js의 리디렉션과 유사하게 basePath: false를 설정할 수도 있습니다.
export async function getStaticProps(context) {
const res = await fetch(`https://...`)
const data = await res.json()
if (!data) {
return {
redirect: {
destination: '/',
permanent: false,
},
}
}
return {
props: { data }, // will be passed to the page component as props
}
}Example
아래 코드는 getStaticProps를 사용하여 콘텐츠 관리 시스템으로투버 블로그의 글 리스트를 가져옵니다.
// 게시물은 build time에 getStaticProps()에서 가져옵니다.
function Blog({ posts }) {
return (
<ul>
{posts.map((post) => (
<li>{post.title}</li>
))}
</ul>
)
}
// 이 함수는 서버 측에서 빌드할 때 호출됩니다.
// client-side에서는 호출되지 않으므로 직접 DB쿼리를 호출할 수 있습니다.
export async function getStaticProps() {
// 외부 API를 호출하여 데이터를 가져옵니다.
// fetch 말고 다른 라이브러리 사용이 가능합니다.
const res = await fetch('https://.../posts')
const posts = await res.json()
// { props: { posts } }를 return 하여 빌드 시 props로 받습니다.
return {
props: {
posts,
},
}
}
export default Blog
댓글