Next.js에서 Dynamic Route를 사용하는 방법(Static Site Generation(SSG)로 설명)

Next.js에서 Dynamic Route를 사용하기 위해선
반드시 getStaticPaths, getStaticProps를 사용해야한다.

 

getStaticPaths

getStaticPaths는 동적 경로를 가지는 정적페이지를 생성하기 위해 모든 URL에 따른 페이지를 빌드 시점에 서버를 이용해 모두 Pre-Render한다.

예를 들어, /post/[id].tsx라는 동적 라우팅이 있다면, /post/1, /post/2, /post/3에 대한 HTML, JS 등을 미리 렌더링한 파일을 만들고,

이 배포 시, /post/1을 호출할 경우, Pre-Render된 /post/1의 HTML, JS 등을 브라우저에 렌더링한다.

 

getStaticProps

그런 후 getStaticProps에 해당 경로(/post/1)가 전달되어서 해당 경로에 대한 데이터를 가져올 수 있게 한다.

useEffect와 헷갈릴 수 있는 Next.js API인데,

 

이와 다른 점은 useEffect의 경우,

Client-Side에서 호출해서 데이터를 API에서 가져올 수 있게 하는데

반면에 getStaticProps는 서버에서 호출해서 데이터를 API에서 가져올 수 있게한다.

 

	useEffect	getStaticProps
실행 위치	클라이언트 측	서버 측
실행 시기	컴포넌트 렌더링 이후	Next.js의 빌드 타임
데이터 소스	외부 데이터 소스(서버 API, 데이터베이스 등)	- 주로 내부 데이터 소스(로컬파일, 데이터 베이스 등) - 서버 API 호출도 가능하다
사용 시점	필요한 시점에 사용	사전 렌더링 시에 한 번만 실행

 

동적경로가 없을 경우, getStaticProps만을 사용해서 서버에서 데이터를 API에서 가져와서

Client-Side에 데이터를 줄 수 있다.

(getStaticPaths는 단독으로 사용할 수 없다. 하지만 getStaticProps는 단독으로 사용 가능하다.)

 

getStaticPaths + getStaticProps

이를 Static Site Generation(SSG)라고 한다.

(Server Side Rendering(SSR)은 다음에 다뤄보도록 한다.)

 

// /pages/post/[id].tsx

import React, { useEffect, useState } from "react";

const Post = (data: IData) => {
  if (!data) return null;

  return (
    <MarkdownContainer>
        <div>{data}</div>
    </MarkdownContainer>
  );
};

export default Post;

export const getStaticPaths = () => {
    return {
        paths: [
            { id: "1" },
            { id: "2" },
            { id: "3" },
        ],
        // true, false, "blocking"
        fallback: true,
    };
};

export const getStaticProps = ({ params }: { id: string }) => {
  const res = await fetch('https://API_OR_SOMETHING.com/v2/getData');
  const data = await res.json();
	
  return {
    props: {
      data,
    },
  };
};