[Next.js] 4.Data Fetching(데이터 가져오기) - getStaticPaths

getStaticPaths

getStaticPaths 함수를 사용하게 되면 특정 경로에 따라 미리 정적 렌더링이 가능하다.

export async function getStaticPaths(){
	return{
    	paths: [
        	{params : {...}}
        ],
        fallback: true
    }
}

getStaticPaths는 정적으로 페이지를 생성하기 떄문에 앞선 포스트에서 언급했던 getStaticProps와 같이 사용할 수 있지만

getServerSideProps와는 같이 사용할 수 없다.

 

 

언제 getStaticPaths를 써야할까?

동적 라우트(dynamic routes)를 이용하여 미리 정적으로 페이지를 생성해야할 때 사용거나 다음의 경우에 사용한다.

• 데이터를 headless CMS에서 가져오는 경우
• 데이터를 데이터베이스에서 가져오는 경우
• 데이터를 파일시스템에서 가져오는 경우
• 유저 특정 데이터가 아닌 캐시가 가능한 공동 데이터 
• SEO를 위해 페이지가 미리 렌더링되야 하고 속도가 빨라야 하는 경우

 

언제 getStaticPaths가 실행될까?

getStaticPaths는 배포를 위해 빌드를 할때 실행되며, 런타임 동안에는 호출되지 않는다.

 

 

getStaticPaths와 관련하여 getStaticProps는 어떻게 실행될까?

• getStaticProps 는 빌드시 반환된 paths 와 상관없이 next build를 실행하는 동안 실행된다. 즉 경로에 구애 받지 않는다.
• getStaticProps 는 fallback: true를 사용하면 백그라운드에서 실행 할 수 있다.
• getStaticProps 는 fallback: blocking을 사용하면 첫 레더링전에 실행된다.

 

 

getStaticPaths는 어디에 사용해야할까?

getStaticPaths는 오직 동적 라우트(dynamic route)를 사용할때만 내보낼수 있다. 또한 페이지 파일이 아닌 컴포넌트에서는 내보내기를 할 수 없다.