Static Site Generation(SSG)

• 빌드 시간에 HTML을 각 페이지별로 서버에 생성해 놓고 요청이 오면 생성된 HTML을 반환하는 것

• 브라우저가 페이지를 요청하면 이미 생성된 HTML만 반환하고, 이것은 재사용이 가능해 응답속도가 매우 빠르다.

• 따라서 외부 요청에 의해서 변동이 없는 페이지들은 먼저 만들어놓고 재사용하면 편리하다.

getStaticProps

export async function getStaticProps(context) {
  return {
    props: {},
  }
}

• getStaticProps함수를 export 하면, 리턴되는 props를 가지고 페이지를 pre-render한다.
• Static Generation으로 빌드(build)할 때 데이터를 불러온다.

function Blog({posts}) {
	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,
        },
    }
}	

사용해야 할 경우

• 페이지를 렌더링하는 데 필요한 데이터를 사용자의 요청보다 먼저 build 시간에 가져올 수 있을 때
• 데이터를 headless CMS에서 가져올 때
• 모든 사용자에게 같은 데이터를 보여줄 때
• 페이지는 미리 렌더링되어야 하고(SEO의 경우) 매우 빨라야 할 때
  (getStaticProps는 성능을 위해 CDN에서 캐시할 수 있는 HTML 및 JSON 파일을 생성한다.)

getStaticPaths

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

• Static Generation으로 데이터에 기반하여 pre-render시 특정한 동적 라우팅을 구현한다.
• 동적 라우팅이 필요할 때 getStaticPaths로 경로 리스트를 정의하고, build 시간에 렌더링 된다.
• 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

• 경로를 담은 객체
  ex) pages/posts/[postId]/[commentId] -> params: postId, commentId
  pages/[...slug] -> params: slug가 담긴 배열(['postId', 'commentId'])
  

fallback

• 들어간 페이지의 경로가 getStaticPaths에서 리턴하는 paths에 없을 때 처리 방법
• false이면 404 페이지가 뜨고, true이면 fallback 페이지가 뜬다.
• 과정
  사용자에게 fallback 페이지를 보여준다 -> 서버에서 static하게 페이지를 생성하고 사용자에게 보여준다 -> 그 이후로는 해당 페이지로 접속하는 사용자에게는 static한 페이지를 보여준다

getServerSideProps

export async function getServerSideProps(context) {
  return {
    props: {},
  }
}

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

사용해야 할 경우

• 요청할 때 데이터를 가져와야 하는 페이지를 미리 렌더링 해야할 때
  • 서버가 모든 요청에 대한 결과를 계산하고, 추가 구성없이 CDN에 의해 결과를 캐시할 수 없기 때문에 첫번째 바이트까지의 시간은 getStaticProps보다 느리다.(TTFB-Time to first byte, HTTP 요청 이후 처음 데이터가 도달하는 시간)

정리

아직 getStaticProps랑 getServerSideProps의 다른 점이 와닿지가 않네 ,, ㅍㅇㅌ

getStaticProps와 getServerSideProps의 차이점

• getStaticProps는 빌드 시에 데이터를 가져온다. 그래서 한번 빌드되고 나면 정적으로 움직이지 않는다.(static)
• getServerSideProps는 해당 페이지가 요청될 때 마다 데이터가 재요청된다. 따라서 페이지를 이동할 때 마다 데이터를 새로 불러와 느리지만 동적인 구성이 가능하다.(SSR)