동적 라우트: Next.js에서 getStaticPaths와 getServerSideProps 사용하기

Next.js는 리액트 프레임워크로, 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 기능을 제공합니다. 특히 동적 라우트를 통해 URL 패러미터를 처리할 수 있어 매우 유용합니다. 여기서는 동적 라우트를 구현하기 위해 getStaticPaths와 getServerSideProps를 사용하는 방법에 대해 알아보겠습니다.

동적 라우트란?

동적 라우트는 URL 패턴을 기반으로 다양한 페이지를 생성하는 것을 의미합니다. 예를 들어, 블로그 포스트의 ID에 따라 다른 페이지를 보여줄 때 동적 라우트를 사용합니다. Next.js에서는 파일 명을 대괄호 []로 감싸서 동적 라우트를 정의할 수 있습니다.

예시:

bash
pages/
  post/
    [id].js

위 구조에서 [id]는 동적 세그먼트를 나타내며, post/1, post/2 등의 경로를 처리할 수 있습니다.

getStaticPaths 함수

getStaticPaths는 빌드 타임에 어떤 경로들이 정적으로 생성될지 정의하는 함수입니다. 이 함수는 동적 라우트 파일에서 export async function getStaticPaths() 형태로 구현됩니다. 이 함수는 특정 경로들을 미리 렌더링하여 정적 파일로 생성합니다.

예제:

javascript
export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: false };
}

위 예제에서 getStaticPaths는 API로부터 데이터를 가져와 경로 목록을 생성합니다. params 객체는 라우트에서 사용할 URL 파라미터를 정의합니다. 마지막으로, fallback은 빌드 타임에 정의되지 않은 경로들을 처리하는 방법을 결정합니다. false로 설정하면, 빌드 타임에 정의되지 않은 모든 경로는 404 페이지로 이동합니다.

getStaticProps 함수

getStaticProps는 빌드 타임에 데이터를 가져와 정적 페이지를 생성하는데 사용됩니다. 이 함수는 getStaticPaths와 함께 사용되어, 각 경로에 대해 개별 데이터를 가져옵니다.

예제:

javascript
export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return { props: { post } };
}

이 함수는 params 객체를 받아 해당 경로의 데이터를 가져옵니다. 위 예제에서는 각각의 포스트 ID에 대해 API 요청을 보내고, 그 결과를 페이지의 props로 반환합니다.

컴포넌트 렌더링

이제 가져온 데이터를 컴포넌트에서 사용할 수 있습니다:

javascript
function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}
export default Post;

위 예제는 post 데이터를 받아서 제목과 본문을 렌더링합니다.

getServerSideProps 함수

getStaticProps와 달리 getServerSideProps는 각 요청마다 서버사이드에서 데이터를 가져옵니다. 이 함수는 동적 데이터를 실시간으로 보여줘야 하는 경우에 유용합니다.

예제:

javascript
export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return { props: { post } };
}

이 코드에서는 getStaticProps와 동일한 방식으로 데이터를 가져오지만, 정적 파일을 생성하지 않으며 각 요청마다 실행됩니다.

결론

Next.js에서는 getStaticPaths와 getStaticProps 및 getServerSideProps 함수를 사용하여 동적 라우트를 쉽게 구현할 수 있습니다. getStaticPaths는 특정 경로를 미리 빌드하는 데 유용하며, getServerSideProps는 실시간 데이터를 필요로 할 때 적합합니다. 이 두 가지 방식을 적절히 활용하여 효율적이고 확장 가능한 웹 애플리케이션을 만들 수 있습니다.