김민태의 데브캠프 2기 - Next.js의 Data Fetching

 

React에서는 useEffcet를 통해 데이터를 가져오는데..

Next.js에서 데이터를 가져오는 방법은 ...

 

1. getStaticProps : Static Generation으로 빌드 할 때 데이터를 불러옴(미리 만들어줌)

export async function getStaticProps(context) {
	return(
    	props: {}, // props안에 데이터를 넣어준다
    }
 }


function Blog({ posts }) { // props로 가져온다.
	return(
    	<ul>
        	{posts.map((post) => {
            	<li>{post.title}</li>
           })}
        </ul>
   )
 }
 
 export async function getStaticProps() {
 
 	const res = await fetch('https://.../posts')
    const posts = await res.json()
    
    
    return(
    	props: {
        	posts, // props로 전달
        },
     }
  }
  
  export default Blog

 

getStaticProps를 사용해야할 때는 ? 

 

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

b. 데이터를 Headless CMS에서 가져올 때

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

 

 

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

 

export async function getStaticPaths() {
	return(
    	path:  [
        	{ params: { ... } )
        ],
        fallback: true // false or 'blocking'
   )
 }

 

getStaticPaths가 필요할 때는 ?

 

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

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

 

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

 

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

 

getServerSidePorps를 사용해야할 때는?

 

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

서버가 모든 요청에 대한 결과를 계산하고, 추가 구성없이 CDN( 지리적으로 분산된 서버들을 연결한 네트워크)에 의해 결과를 캐시할 수 없기 때문에 첫번째 바이트까지의 시간은 getStaticProps보다 느리다.