Next.js 특징

1. Pre-rendering

Next.js는 모든 페이지를 pre-render 한다.
pre-render은 모든 페이지를 위한 html을 클라이언트 사이드에서
자바스크립트로 처리하기 전 사전에 생성한다는 걸 의미한다.

2. Data Fetching

Next.js에서 데이터를 가져오는 방법은 여러가지가 있다.

1. getStaticProps

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

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

위 코드와 같이 getStaticProps 함수를 async로 export 한 후,

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

getStaticProps에서 리턴되는 props를 가지고 페이지를 빌드 시간에 프리렌더링 한다.

사용해야 할 때

• 페이지를 렌더링하는 데 필요한 데이터는 사용자의 요청보다 먼저 build 시간에 필요한 데이터를 가져올 때
• 데이터는 Headless CMS에서 데이터를 가져올 때
• 데이터를 공개적으로 캐시할 수 있을 때
• 페이지는 미리 렌더링되어야 하고 (SEO 경우) 매우 빨라야 할 때

2. getStaticPaths

Static Generation으로 데이터에 기반하여 pre-render시 특정한 동적 라우팅 구현한다.
경로 리스트를 정의하고, HTML에 build 시간에 렌더링 된다.

export async fuction getStaticPaths() {
  const res = await fetch('https://....');
  const posts = await res.json();
  
  const paths = posts.map((post) => ({
   params : {id : post.id }
  })
    
  return { paths, fallback : false }
}

위 코드와 같이 getStaticProps 함수를 async로 export 한 후, path와 fallback을 리턴해준다.

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

paths

• 어떠한 경로가 pre-render 될지를 결정한다.
• 동적 라우팅을 사용하는 페이지가 있다면 아래와 같이 사용한다.

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

• 빌드하는 동안 /posts/1과 /posts/2를 생성한다.

params

• 페이지 이름이 pages/posts/[postid]/[commentId] 라면, params은 postId와 commentId 다.
• 만약 페이지 이름이 pages/[...slug]와 같이 모든 경로를 사용한다면, params는 slug가 담긴 배열이어야 한다. ['postId, 'commentId']

fallback

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

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

• 빌드하는 동안 /posts/1과 /posts/2를 생성한다.

3. getServerSideProps

server side Rendering으로 요청이 있을 때 데이터를 불러온다.

function Board({data}) {
  
}

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

export default Board

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

사용해야 할 때

• 요청할 때 데이터를 가져와야하는 페이지를 미리 렌더해야 할 때 사용한다.
• 서버가 모든 요청에 대한 결과를 계산하고, 구성없이 CDN에 의해 결과를 캐시할 수 없기 때문에 첫번째 바이트까지의 시간은 geTstaticProps보다 느리다.