Data Fetching

getStaticProps - Static Generation으로 빌드할 때 데이터를 불러온다.

getStaticPaths - Static Generation으로 데이터에 기반하여 pre-render 시 특정한 동적 라우팅 구현 (pages/post/[id].js)

getServerSideProps - Server Side Rendering으로 요청이 있을 때 데이터를 불러온다.

 

 

getStaticProps

getStaticProps 함수를 async로 export하면 getStaticProps에서 리턴되는 props를 가지고 페이지를 pre-render한다. (빌드 타임에 페이지 렌더링)

function Blog({posts}) {
	return (
    	<ul>
        	{posts.map((post) => (
              <li>{post.title}</li>
             ))}
        </ul>
    )
}

export async function getStaticProps() {
	const res = await fetch('...');
    const posts = await res.json();
    
    return {
    	props: {
        	posts,
        },
    }
}

export default Blog;

사용해야 할 때 

- 페이지를 렌더링하는 데 필요한 데이터는 사용자의 요청보다 먼저 build 시간에 필요한 데이터를 가져올 때

- 데이터는 Headless CMS에서 데이터를 가져올 때

- 데이터를 공개적으로 캐시할 수 있을 때

- 페이지는 미리 렌더링되어야 하고(SEO의 경우) 매우 빨라야 할 때(getStaticProps는 성능을 위해 CDN에서 캐시할 수 있는 HTML 및 JSON 파일을 생성한다.)

 

 

 

 

getStaticPaths

- 동적 라우팅이 필요할 때 getStaticPaths로 경로 리스트를 정의하고, HTML에 빌드 시간에 렌더링된다.

- Next.js는 pre-render에서 정적으로 getStaticPaths에서 호출하는 경로들을 가져온다.

 

paths

- 어떠한 경로가 pre-render 될지 결정

- pages/posts/[id].js 라는 이름의 동적 라우팅을 사용하는 페이지가 있다면 아래와 같이 된다.

- 빌드하는 동안 /posts/1과 /posts/2를 생성하게 된다.

return {
	paths: [
    	{ params: { id: '1' } },
        { params: { id: '2' } },
    ],
    fallback: ...
}

 

params

- 페이지 이름이 pages/posts/[postId]/[commentId] 라면, params는 postsId와 commentId

- 만약 페이지 이름이 pages/[...slug]와 같이 모든 경로를 사용한다면, params는 slug가 담긴 배열이어야 한다.

 

fallback

- false라면 getStaticPaths로 리턴되지 않는 것은 모두 404 페이지가 뜬다.

- true라면 getStaticPaths로 리턴되지 않는 것은 404로 뜨지 않고, fallback 페이지가 뜨게 된다.

if (router.isFallback) {
	return <div>Loading...</div>
}

 

 

 

getServerSideProps

getServerSideProps 함수를 async로 export 하면, 각 요청마다 리턴되는 데이터를 getServerSideProps로 pre-render한다.

 

function Page({ data }) {
	// Render data
}

export async function getServerSideProps() {
	const res = await fetch('...');
    const data = await res.json();
    
    return { props: { data } }
}

export default Page;

사용해야 할 때

- 요청할 때 데이터를 가져와야 하는 페이지를 미리 렌더링해야 할 때 사용

- 서버가 모든 요청에 대한 결과를 계산하고 추가 구성없이 CDN에 의해 결과를 캐시할 수 없기 때문에 첫 번째 바이트까지의 시간은 getStaticProps보다 느리다.