Next.js 알아보기

1. Vue란?

Next.js는 React 기반의 웹 애플리케이션 프레임워크로, 서버 측 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하는 유연한 풀스택 프레임워크입니다. React로 애플리케이션을 만들 때 발생할 수 있는 여러 문제를 해결하기 위해 개발되었습니다. Next.js는 웹 애플리케이션의 성능 향상과 SEO 최적화를 목표로 하고 있으며, 서버 측 렌더링(SSR), 정적 파일 처리, API 라우팅 등 다양한 기능을 기본적으로 제공합니다.

 

Next.js by Vercel - The React Framework

---

2. React와 함께 사용하는 이유?

Next.js는 React의 기능을 확장하는 역할을 합니다. React는 클라이언트 사이드 렌더링(CSR)에 최적화되어 있지만, 서버 측 렌더링(SSR)이나 정적 사이트 생성(SSG)을 기본적으로 지원하지 않습니다. 이러한 기능을 React에서 직접 구현하려면 추가적인 설정이 필요합니다. 하지만 Next.js는 이 모든 과정을 자동으로 처리해주기 때문에, React 애플리케이션에 성능 최적화, SEO, 페이지 로딩 속도 향상 등의 혜택을 더할 수 있습니다.

 

따라서 React 애플리케이션을 만들 때 서버 측 렌더링과 정적 파일 처리를 간편하게 적용할 수 있는 Next.js는 React의 기능을 보강하는 역할을 합니다.

 

---

 

3. Next.js의 장점?

 

1. 서버 측 렌더링(SSR)

Next.js는 서버 측 렌더링을 지원하여, 클라이언트에서 데이터를 요청하기 전에 서버에서 페이지를 미리 렌더링합니다. 이렇게 하면 초기 로딩 속도가 빨라지고, SEO에 유리합니다. SSR을 사용하면 구글과 같은 검색 엔진이 페이지 콘텐츠를 쉽게 크롤링할 수 있습니다.

 

2. 정적 사이트 생성(SSG)

Next.js는 정적 사이트 생성도 지원합니다. 빌드 시점에 모든 페이지를 미리 생성하여 빠르게 제공할 수 있습니다. 정적 파일을 제공하면 서버의 부하를 줄일 수 있고, 빠른 페이지 로딩 속도를 얻을 수 있습니다.

 

3. 자동 코드 분할(Code Splitting)

Next.js는 페이지 단위로 자동으로 코드 분할을 처리하여, 사용자가 필요한 코드만 로드하도록 합니다. 이를 통해 초기 로딩 속도를 줄이고, 애플리케이션 성능을 최적화할 수 있습니다.

 

4. API 라우팅

Next.js는 서버 측 API도 손쉽게 설정할 수 있는 기능을 제공합니다. 이를 통해 백엔드 서버를 별도로 구축하지 않고도 API 라우팅을 구현할 수 있습니다.

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, Next.js!' });
}

 

5. 파일 시스템 기반 라우팅

Next.js는 파일 시스템을 기반으로 한 라우팅 시스템을 제공합니다. pages 디렉터리에 파일을 추가하면, 그 파일이 자동으로 라우트로 설정됩니다. 이 방식은 라우팅 설정을 간편하게 만들어줍니다.

/pages
  /index.js       (홈 페이지)
  /about.js       (about 페이지)

 

6. 빠른 개발 경험

Next.js는 핫 리로딩, 빠른 빌드, 개발 서버 등의 기능을 기본적으로 제공합니다. 이를 통해 개발자는 더 빠르고 효율적으로 애플리케이션을 개발할 수 있습니다.

---

4. Next.js의 단점

1. 빌드 시간이 길어질 수 있음

Next.js에서 정적 사이트 생성(SSG)을 사용할 경우, 페이지가 많아질수록 빌드 시간이 길어질 수 있습니다. 대규모 애플리케이션에서는 빌드 시간이 성능 이슈로 이어질 수 있습니다.

 

2. 서버 측 렌더링에 따른 서버 비용

Next.js의 서버 측 렌더링(SSR)은 서버 자원을 많이 소모할 수 있습니다. 특히 많은 트래픽을 처리해야 하는 경우, 서버 비용이 증가할 수 있습니다. 이를 최적화하려면 별도의 서버나 캐싱 전략이 필요할 수 있습니다.

---

5. React와의 차이점

1.  React는 UI 컴포넌트를 생성하는 라이브러리이며, 클라이언트 사이드 렌더링(CSR)에 적합합니다.

 

2. Next.js는 React 애플리케이션을 서버 측 렌더링(SSR)과 정적 사이트 생성(SSG)을 통해 최적화하는 프레임워크입니다.

---

6. CSR? SSR? SSG?

방식	설명	장점	단점
CSR (클라이언트 측 렌더링)	JavaScript가 클라이언트에서 렌더링됨	클라이언트 사이드에서만 처리되므로 서버 부하가 적음	SEO와 초기 로딩 속도가 느릴 수 있음
SSR (서버 측 렌더링)	서버에서 HTML을 렌더링하고 클라이언트에 전송	빠른 초기 로딩, SEO 최적화	서버 부하가 증가, 페이지 전환 속도가 느릴 수 있음
SSG (정적 사이트 생성)	빌드 시점에 HTML을 미리 생성하여 제공	빠른 페이지 로딩, 서버 부하가 적음, SEO 최적화	동적 콘텐츠에 적합하지 않음, 빌드 시간이 길어질 수 있음