Next.js가 말하는 SSG, SSR

Next.js 공식문서를 보게 되면 pre_rendering 에 대해 매우 강조하며 자랑스러워 하고있다고 느껴진다.

그럼 pre_rendering 이 대체 무엇일까?
필자는 SSR 과 SSG에 대해 간략히 알아본다면 보다 쉽게 pre_rendering 에 대해 이해할 수 있다는 생각이 들었다. 그럼 간략히 SSR, SSG 에 대해 알아보자.

SSR (Server Side Rendering)

클라이언트(유저)측에서 여러 상황에 따라 이벤트가 발생하여 서버측으로 요청을 보낼 경우 서버측에서 JavaScrip 코드를 실행하여 완성된 HTML 파일을 실시간으로 전달해 주는 것

SSG (Static Site Generation)

빌드타임 에 완성된 페이지를 생성하고 서버측에서 소유하고 있다가 페이지에 접속을 하면 완성된 HTML 파일 형태를 전달해 주는 것.

차이점?

• 완성된 정적 페이지를 만들어서 가지고 있다가 전달해 줄것이냐 ? (SSG)
• 사용자의 요청이 들어올 때마다 실시간으로 페이지를 서버측에서 그려서 전달할 것이냐? (SSR)

SSR, SSG를 위한 함수

getStaticProps()

• SSG 방식을 통해 완성된 페이지를 전달해주기 위해서도 외부의 데이터들을 가져올 필요성이 있다.
• 예를 들어 해당 Page Component에서 마크다운 형식으로 작성한 파일의 데이터가 필요한 경우
• 빌드 단계에서 getStaticProps 함수를 실행하여 필요한 데이터들을 return 받을 수 있게 된다.
• 해당 Page Component는 props로 원하는 데이터를 넘겨받아 이용할 수 있다.

// getSortedPostData는 필자가 미리 정의해놓은 함수임으로 신경쓰지 않아도 된다.

export async function getStaticProps() {
  const postDatas = getSortedPostData()
  return {
    props: {
      postDatas
    }
  }
}

export default function Home({ postDatas }) {
  return (
    <section>
	 <h2>Blog</h2>
        <ul>
          {allPostsData.map(({ id, date, title }) => (
            <li key={id}>
              {title}
              <br />
              {id}
              <br />
              {date}
            </li>
          ))}
        </ul>
    <section>
  )
}

getServerSideProps()

• context 라는 매개변수가 들어온다.
• 서버사이드 렌더링을 위해 사용되는 함수이다.
• 해당 함수는 사용자의 요청이 들어올 때마다 실행이 된다.

export async function getServerSideProps(context) {
  return {
    props: {
      // props for your component
    },
  };
}