[Next.js] getStaticProps, getStaticPaths, getServerSideProps

Next.js

Next.js 는 정적 사이트 생성(SSG)과 서버 사이드 렌더링(SSR) 등 pre-rendering 웹사이트 생성을 도와주는 React기반의 프레임워크이다.

SSG? ISR? SSR?

SSG : Static Site Generation의 약자로 Next js에서 페이지를 생성할 때 기본으로 적용되는 설정이다. SSR과 다른 점은 클라이언트가 요청하는 시점이 아니라 빌드 시에 페이지를 미리 생성해놓는 것이다. 단, 빌드하는 시점에 페이지가 미리 생성되기 때문에 fetching 하는 데이터가 변경되더라도 다시 빌드하지 않는 이상 반영되지 않는다.

ISR : Incremental Static Regeneration의 약자로 빌드 시점에 페이지를 렌더링 한 후, 설정한 시간 마다 페이지를 새로 렌더링한다. SSG는 빌드 시에 페이지를 생성하기 때문에 fetching 하는 데이터가 변경되면 다시 빌드해야 하지만 ISR은 일정 시간마다 알아서 페이지를 업데이트 해준다.

SSR : SSR은 CSR과 반대되는 개념으로 서버에서 페이지를 렌더링해서 클라이언트에 전달해주는 방식. Next js에서 SSG나 ISR과 구분되는 이유는 렌더링되는 시점 때문인데, SSR은 사용자가 요청할때 마다 그 시점에 페이지를 새롭게 렌더링한다. 그렇기 때문에 Fetching 해야하는 데이터가 빈번하게 변경될 때 사용된다.

getStaticProps (SSG, ISR)

빌드 시 데이터를 fetch하여 static 페이지를 생성하는 함수.

export const getStaticProps: GetStaticProps = async (context) => {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery(['getData'], async () => {
    const result = await getDataApi();
    return result.data;
  });

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
    revalidate: MINUTE * 10, // ISR 설정 : 10분마다 업데이트
  };
};

위의 코드는 getStaticProps에서 react-query를 통하여 ISR을 구현한 예시이다.
위의 경우 _app.tsx 에 아래의 추가 설정이 필요하다.

// _app.tsx
<QueryClientProvider client={queryClient}>
  <Hydrate state={pageProps.dehydratedState}>
    <Component {...pageProps} />
  </Hydrate>

  <ReactQueryDevtools />
</QueryClientProvider>

getStaticPaths

동적 라우팅을 사용할 때, 어떤 페이지를 미리 Static으로 빌드할 지 정하는 함수. (ex : /detail/[id] )

export const getStaticPaths = async () => {
  return {
    paths: [
      { params : { id: '1' },
      { params : { id: '2' },
      { params : { id: '3' },
    ],
    fallback: 'blocking',
  };
};

여기서 fallback은 paths에서 리턴되지 않은 경로에 대해서 어떻게 처리할지를 정하는 것이다.

• false : 404 페이지 반환
• true : 404를 전달하지 않고, fallback버전의 페이지를 먼저 보여준 후, getStaticProps 함수를 동작하여 기존의 정적 페이지 리스트에 새로 생성한 페이지를 추가하고 보여준다.
• blocking :fallback 상태를 보여주지 않고 SSR처럼 동작하여 기존의 정적 페이지 리스트에 새로 생성한 페이지를 추가하고 보여준다.

getServerSideProps (SSR)

빌드와 상관없이, 매 페이지 요청마다 데이터를 서버로부터 가져오는 함수.

export const getServerSideProps: GetServerSideProps = async (context) => {
  const res = await fetch(`https://.../data`)
  const data = await res.json()
  
  //pageProps로 넘길 데이터 
  return {
  	props: {
   		data: data
    },
  }
}

위의 코드는 클라이언트에서 렌더링되기전 서버측에서 api요청에 대한 response를 pageProps로 넘겨주는 예시이다.