Next.js

원도훈·2024년 11월 5일

Next.js는 React를 기반으로 한 웹 애플리케이션 개발 프레임워크로, 서버사이드 렌더링(SSR), 정적 사이트 생성(SSG), 라우팅 기능 등 다양한 최적화 기능을 제공하여 개발자가 보다 쉽게 효율적인 웹 애플리케이션을 구축할 수 있도록 도와줍니다. 이번 글에서는 Next.js의 핵심 개념과 버전별 차이점에 대해 살펴보겠습니다.

Next.js란?

Next.js는 Vercel에서 개발한 오픈소스 React 프레임워크로, SEO(검색 엔진 최적화) 향상과 퍼포먼스 최적화를 위해 서버사이드 렌더링(SSR)을 지원합니다. Next.js는 React의 단점을 보완하며, 페이지 라우팅, API 라우트, 정적 사이트 생성과 같은 기능을 손쉽게 사용할 수 있게 해줍니다.

Next.js는 다음과 같은 주요 기능을 제공합니다

서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG)의 손쉬운 설정.
파일 기반 라우팅을 통해 복잡한 설정 없이 경로를 정의.
API 라우트 기능을 사용하여 간단히 백엔드 로직을 추가.

서버사이드 렌더링(SSR)과 클라이언트사이드 렌더링(CSR)

서버사이드 렌더링(SSR): 서버사이드 렌더링은 요청이 들어올 때마다 서버에서 HTML을 생성하여 클라이언트에게 전달하는 방식입니다. 이 방식은 SEO와 초기 페이지 로딩 성능을 개선하는 데 도움이 됩니다. Next.js는 SSR을 간단하게 설정할 수 있으며, getServerSideProps 함수로 서버 측에서 데이터를 불러올 수 있습니다.
```
export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return {
    props: { data },
  };
}

const Page = ({ data }) => {
  return <div>{data.content}</div>;
};

export default Page;
```
클라이언트사이드 렌더링(CSR): 클라이언트사이드 렌더링은 모든 JavaScript 파일이 브라우저에서 로드된 후 페이지를 렌더링하는 방식입니다. 초기 로딩 속도는 SSR보다 느릴 수 있지만, 이후의 사용자 인터랙션에 최적화되어 있습니다.

Next.js의 프리랜더링 방식

Next.js는 두 가지 주요 프리랜더링 방식을 지원합니다

정적 사이트 생성(SSG): 빌드 시점에 페이지를 생성하여, 모든 사용자가 동일한 정적 HTML 파일을 받도록 합니다. getStaticProps를 통해 빌드 타임에 데이터를 가져와 사용할 수 있습니다.

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return {
    props: { data },
  };
}

const Page = ({ data }) => {
  return <div>{data.content}</div>;
};

export default Page;

서버사이드 렌더링(SSR): 앞서 설명한 것처럼 요청마다 HTML을 생성하는 방식입니다. 각 요청에 대해 최신 데이터를 반영할 수 있는 것이 장점입니다.

이 두 방식은 상황에 따라 혼용하여 사용할 수 있으며, Next.js는 이러한 렌더링 방식을 쉽게 구성할 수 있게 도와줍니다.

Next.js 버전의 차이점 12버전 vs 13버전

Next.js는 지속적으로 진화하고 있으며, 특히 12버전과 13버전 사이에는 중요한 변화들이 있었습니다. 여기서는 주요 기능의 차이점을 살펴보겠습니다.

Next.js 12버전과 13버전의 차이점

라우팅 방식:
- 12버전에서는 파일 기반 라우팅을 사용하며, /pages 디렉토리 내의 파일을 페이지로 간주합니다.
- 13버전에서는 App Router가 도입되었습니다. app 디렉토리 구조를 활용하여 더 유연한 페이지와 레이아웃을 구성할 수 있으며, 기존 파일 기반 라우팅을 넘어 더 세분화된 컴포넌트와 레이아웃 구성을 가능하게 합니다.
Data Fetching:
- 12버전에서는 getStaticProps, getServerSideProps 등을 사용하여 페이지 레벨에서 데이터를 가져옵니다.
- 13버전에서는 React Server Components와 fetch API를 더 적극적으로 활용해 서버 컴포넌트 내에서 데이터를 가져오고, 페이지가 아닌 특정 부분에서 서버사이드 렌더링을 수행할 수 있습니다.
서버 작성 방법:
- 12버전에서는 서버 사이드 코드를 위해 /api 디렉토리를 사용합니다. 이 디렉토리에서 Node.js 기반의 API 엔드포인트를 쉽게 정의할 수 있습니다.
- 13버전에서는 기존 API 라우트를 그대로 사용할 수 있지만, Edge Functions를 활용하여 더 빠른 응답을 제공하고, 서버리스 환경에서의 퍼포먼스 최적화를 강화하였습니다.
레이아웃 작성 방법:
- 12버전에서는 각 페이지마다 중복된 레이아웃을 구성하는 경우가 많아 코드 재사용성이 낮았습니다.
- 13버전에서는 레이아웃 기능이 기본적으로 강화되어, app 디렉토리에서 공통 레이아웃을 정의하고 이를 재사용함으로써 개발자의 효율성을 높이고, 중복된 코드를 줄일 수 있습니다.

13버전에서 추가된 주요 기능들

React Server Components (RSC): 서버에서 렌더링되고 클라이언트로 HTML만 전송되므로 번들 크기를 줄이고 성능을 최적화할 수 있습니다.
Middleware: 요청에 대한 미들웨어를 작성할 수 있어, 사용자 인증이나 요청 검증 등을 쉽게 처리할 수 있습니다.
Turbolinks와 유사한 React Streaming: 클라이언트에 빠르게 콘텐츠를 전달하여 사용자 경험을 개선하는 방식이 도입되었습니다.

Next.js는 React 애플리케이션의 성능과 SEO를 최적화하기 위한 강력한 도구입니다. SSR, SSG, CSR 등 다양한 렌더링 방식을 지원하며, 13버전에서는 더욱 효율적인 App Router, React Server Components와 같은 새로운 기능들이 도입되어 개발 생산성을 높이고 성능을 최적화하고 있습니다.

Next.js의 각 버전의 주요 기능과 차이점을 이해하고, 이를 적절히 활용하면 사용자에게 더욱 빠르고 효율적인 웹 애플리케이션을 제공할 수 있을 것입니다. Next.js 13버전으로 업그레이드하면서 새로운 기능을 학습하고 적용해보는 것도 좋은 선택이 될 것입니다.

원도훈

개발

이전 포스트

번들링과 코드 스플리팅

다음 포스트