Next.js Static Site Generation(SSG)으로 빠른 웹사이트 구축하기

Next.js와 Static Site Generation(SSG) 소개

Next.js는 React 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원합니다. SSG는 빌드 시점에 HTML 페이지를 생성하여, 사용자가 페이지를 요청할 때마다 빠르게 제공할 수 있습니다. 이러한 방법은 페이지 로드 시간을 줄이고 사용자 경험(UX)을 향상시키는 데 큰 도움이 됩니다.

SSG의 핵심 개념은 빌드 시점에 미리 HTML 파일을 생성하는 것입니다. 이는 서버 부하를 줄이고, 성능을 개선하며, 검색 엔진 최적화(SEO)를 돕습니다. Next.js의 getStaticProps와 getStaticPaths 함수는 SSG 구현에 필수적인 도구입니다.

프로젝트 초기화 및 환경 설정

Next.js 프로젝트를 시작하려면 먼저 Node.js와 npm이 필요합니다. 다음 명령어를 통해 Next.js 프로젝트를 생성합니다:

bash
npx create-next-app my-nextjs-app
cd my-nextjs-app

이제 Next.js 프로젝트가 생성되었습니다. 생성된 프로젝트에서 기본적으로 제공되는 파일 구조를 확인하고, 필요에 따라 수정할 수 있습니다.

정적 페이지 생성하기

정적 페이지를 생성하는 데 필요한 두 가지 함수는 getStaticProps와 getStaticPaths입니다. 이 섹션에서는 이러한 함수들이 어떻게 작동하는지 예시를 통해 설명합니다.

getStaticProps 사용하기

getStaticProps는 빌드 타임에 데이터를 가져오고, 이를 페이지 컴포넌트에 props로 전달합니다. 예를 들어, 블로그 포스트를 정적으로 생성하려면 아래와 같이 코드를 작성합니다:

javascript
// pages/posts/[id].js
import { getAllPostIds, getPostData } from '../../lib/posts';

export async function getStaticProps({ params }) {
  const postData = await getPostData(params.id);
  return {
    props: {
      postData,
    },
  };
}

export default function Post({ postData }) {
  return (
    <article>
      <h1>{postData.title}</h1>
      <div>{postData.body}</div>
    </article>
  );
}

위 코드에서 getStaticProps는 params.id를 사용하여 특정 포스트의 데이터를 가져옵니다. 그런 다음, 해당 데이터를 props로 페이지 컴포넌트에 전달합니다.

getStaticPaths 사용하기

getStaticPaths는 동적 경로를 정의하는 데 사용됩니다. 예를 들어, 블로그 포스트 페이지를 동적으로 생성하려면 아래와 같이 코드를 작성합니다:

javascript
// pages/posts/[id].js
import { getAllPostIds, getPostData } from '../../lib/posts';

export async function getStaticPaths() {
  const paths = getAllPostIds();
  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const postData = await getPostData(params.id);
  return {
    props: {
      postData,
    },
  };
}

getStaticPaths 함수는 모든 가능한 포스트 ID를 사용하여 경로를 생성합니다. 그런 다음, 각 경로에 대해 정적 페이지가 빌드 타임에 생성됩니다.

데이터 페칭 및 외부 API 통합

데이터를 외부 API에서 가져와 정적 페이지를 생성하는 것도 가능합니다. 예를 들어, 로컬 JSON 파일 대신 외부 API에서 데이터를 가져오면 다음과 같이 할 수 있습니다:

javascript
// pages/posts/[id].js
export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const postData = await res.json();
  return {
    props: {
      postData,
    },
  };
}

이 예시에서는 fetch를 사용하여 외부 API에서 데이터를 가져와 props로 전달합니다. 이를 통해 동적으로 데이터를 받아오는 다양한 방식으로 활용할 수 있습니다.

SSG의 이점과 고려사항

SSG의 주요 이점은 다음과 같습니다:

• 빠른 로드 시간: 정적 파일로 제공되므로 서버 요청이 최소화됩니다.
• 향상된 보안: 데이터베이스나 서버 측 코드 실행이 없으므로 보안 위험이 줄어듭니다.
• SEO 우수: 정적으로 생성된 HTML은 검색 엔진이 쉽게 크롤링할 수 있습니다.

하지만 SSG는 모든 경우에 적합하지 않을 수도 있습니다. 예를 들어, 매우 자주 변경되는 콘텐츠에 경우, SSR(Server-Side Rendering)이나 CSR(Client-Side Rendering)을 고려해야 할 수도 있습니다.

배포 및 유지 관리

Next.js 프로젝트를 Vercel, Netlify, GitHub Pages와 같은 플랫폼에 쉽게 배포할 수 있습니다. Vercel은 Next.js를 만든 회사에서 제공하는 플랫폼으로, 최적화된 배포 환경을 제공합니다. 배포 후에도 빌드를 다시 실행하여 정적 파일을 업데이트할 수 있으므로, 콘텐츠가 바뀔 때마다 사이트를 쉽게 유지 관리할 수 있습니다.

결론

Next.js의 Static Site Generation(SSG)은 빠르고 효율적인 웹사이트를 구축하는 데 매우 유용한 도구입니다. 빌드 시점에 페이지를 생성하여 사용자가 요청할 때마다 빠르게 제공할 수 있으며, 이는 페이지 로드 시간을 단축하고 사용자 경험을 향상시킵니다. 또한, SEO 측면에서도 매우 유리합니다. SSG를 사용하여 프로젝트를 처음부터 끝까지 진행함으로써 다양한 장점을 활용할 수 있습니다.