[TIL] Next.js #6 getServerSideProps 와 getInitialProps ?

SSR 그 잡채. getServerSideProps 를 공부하다가
getInitialProps 이 계속 꼬리표처럼 검색 결과에 따라와서, 궁금해져서 같이 알아보게 되었다.

Next 9.3 부터 getServerSideProps가 도입되면서
getServerSideProps가 getInitialProps를 대체하게 되었다고한다.

작동 방식은 거의 비슷하지만,
getServerSideProps 은 처음부터 끝까지 서버에서만 실행되나,
getInitialProps 은 초기 렌더시 서버에서 실행되지만, next/link 또는 next/router 통해 라우팅될 경우 클라이언트에서 실행 된다는 차이점이 있다고 한다.

getServerSideProps을 권장하고, 나 또한 getServerSideProps 을 사용했지만, 둘이 무엇인지 간단하게라도 알아보자.

---

getServerSideProps

❗ 공식문서

• getServerSideProps Next.js 애플리케이션에서 서버에서 데이터를 가져와 페이지에 미리 렌더링 하는 함수이다.
• 아래의 getInitialProps 과 비슷한데, getServerSideProps 는 무조건 서버에서만 실행된다.*
• 언제 사용하나요 ?
  • 매번 데이터가 바뀌어야하는 페이지의 경우!
  • 따라 데이터를 미리 페이지에 그려야하는 상황이 아니라면 사용을 고려하는 것이 좋다.

- 사용방법

• 기본 틀

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

• 사용 예제(+TypeScript)

import { GetServerSideProps } from 'next'
import fetch from 'isomorphic-unfetch'

interface Props {
  user: {
    name: string
  }
}

export default function Home({ user }: Props) {
  return <h1>Hello {user.name}!</h1>
}

export const getServerSideProps: GetServerSideProps = async () => {
  const res = await fetch('https://api.github.com/users/vercel')
  const user = await res.json()

  return {
    props: {
      user,
    },
  }
}

• 아래와 같이 사용할 수도 있다.

---

getInitialProps

❗공식문서

• 페이지가 처음 로드되는 경우 ,getInitialPropsNext 은 기본적으로 서버 사이드에서 실행된다.
  그러나 next/link 또는 next/router 통해 라우팅 될 경우, 클라이언트(브라우저) 사이드에서 실행된다.
• Automatic Static Optimization을 지원하지 않는다.

• Automatic Static Optimization 란?
  Automatic Static Optimization 이란 pages 폴더 아래 모든 페이지에 대해서 getServerSideProps 또는 getInitialProps가 있는지 없는지 판단해서, 해당 페이지를 pre-render할지 server side rendering할지를 결정하는 과정을 의미한다.
  없는 경우 next.js가 알아서 해당 페이지는 빌드시 html로 만들어주어서
  프로젝트 자체가 ssr과 static page가 둘다 제공되는 하이브리드 웹 앱이 될 수 있게 도와주는 것이다.
  static html로 만들어진 페이지는 cdn을 통해 사용자에게 즉시 스트리밍 할 수 있는 장점을 가진다.
  그런데 custom app 컴포넌트 내에서 getInitialProps를 사용할 경우 이 자동 최적화 기능이
  off된다.

- 사용방법

• 비슷하다.

// Get the data returned from getInitialProps as props
function Page({ data }) {
  // Render data...
}

Page.getInitialProps = async (context) => {
   const res = await fetch("https://api.com");
   const data = await res.json();
   
  return {data} // this will be passed to the page component as props
}

export default Page

---

참고문서 1
참고문서 2