Next.js 14버전에서는 App Router와 Page Router라는 두 가지 라우팅 시스템이 있다. 이 두 시스템은 프로젝트 구조와 기능에서 중요한 차이점을 가지고 있다.

1. App Router

App Router는 Next.js 13에서 도입된 새로운 라우팅 시스템으로, React Server Components를 기반으로 하여 성능과 개발자 경험을 향상시킨다. 주요 특징은 다음과 같다.

• 디렉터리 기반 라우팅: /app 디렉터리 내의 폴더 구조가 URL 경로로 매핑됩니다.
• React Server Components: 컴포넌트가 기본적으로 서버에서 렌더링되어 클라이언트로 전송되는 JavaScript의 양을 줄여 성능을 최적화합니다.
• 중첩 레이아웃 지원: 중첩된 레이아웃을 쉽게 설정할 수 있으며, 여러 페이지에서 공통으로 사용하는 레이아웃을 쉽게 정의할 수 있습니다.
• 서버 액션: 서버에서 직접적인 데이터 변경 작업(예: 폼 제출)을 수행할 수 있는 기능이 추가되었습니다.

2. Page Router

Page Router는 Next.js 초기 버전부터 사용된 전통적인 라우팅 방식이다. /pages 디렉터리를 사용하는 파일 기반 라우팅 방식이며, 주요 특징은 다음과 같다.

• 파일 기반 라우팅: 각 파일이 하나의 페이지로 매핑되며, 파일 이름이 곧 URL 경로가 됩니다.
• 클라이언트 중심: 기본적으로 모든 페이지와 컴포넌트가 클라이언트 측에서 렌더링되며, 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)은 선택 사항입니다.
• 단순한 구조: 기본적인 폴더 구조와 라우팅 방식으로 직관적이며, 기존 React 프로젝트를 Next.js로 마이그레이션하기 용이합니다.

주요 차이점 요약

• 라우팅 구조: App Router는 /app 디렉터리를, Page Router는 /pages 디렉터리를 사용합니다.
• 렌더링 방식: App Router는 서버 컴포넌트를 기본으로 사용하며, Page Router는 클라이언트 중심의 렌더링 방식을 사용합니다.
• 기능 확장성: App Router는 중첩 레이아웃과 서버 액션 같은 최신 기능을 지원하며, 더 많은 유연성과 확장성을 제공합니다.

이러한 차이점으로 인해, App Router는 최신 웹 애플리케이션의 성능과 유지보수성을 극대화하는데 유리하며, Page Router는 기존 방식에 익숙한 개발자들이 쉽게 적응할 수 있는 직관적인 구조를 제공한다.

렌더링 방식의 차이

서버사이드 렌더링(SSR)과 클라이언트사이드 렌더링(CSR)은 웹 애플리케이션의 데이터를 처리하고 사용자에게 페이지를 보여주는 두 가지 주요 방식이다. 각각의 작동 방식과 장단점은 아래와 같다.

1. 서버사이드 렌더링 (SSR, Server-Side Rendering)

서버에서 페이지를 미리 생성하여 사용자에게 제공하는 방식이다. 웹 서버에서 요청이 들어오면, 서버가 HTML 페이지를 생성하고 완성된 페이지를 클라이언트(브라우저)로 보내줍니다.

작동방식

• 사용자가 페이지를 요청하면, 서버는 데이터를 처리하여 완성된 HTML 페이지를 즉시 생성.
• 이 HTML 페이지가 브라우저로 전달되어 사용자에게 빠르게 보입니다.

장점

• SEO에 유리: 페이지가 처음부터 완성된 상태로 로드되기 때문에 검색 엔진이 내용을 쉽게 크롤링할 수 있습니다.
• 초기 로딩 속도: 사용자에게 첫 페이지가 빠르게 나타납니다. 특히 저사양 디바이스에서는 유리합니다.
• 일관된 UX: 서버에서 전체 페이지가 로드되므로 콘텐츠가 한 번에 렌더링되어 깜박이는 현상이 적습니다.

단점

• 서버 부하: 서버에서 모든 렌더링을 처리해야 하므로 트래픽이 많을 경우 서버에 큰 부하가 발생할 수 있습니다.
• 대기 시간: 페이지가 처음 로드될 때까지 사용자는 서버 응답을 기다려야 합니다.

2. 클라이언트사이드 렌더링 (CSR, Client-Side Rendering)

브라우저에서 자바스크립트를 이용해 페이지를 렌더링하는 방식이다. 서버는 기본적인 HTML과 자바스크립트 파일을 제공하고, 클라이언트(브라우저)가 자바스크립트를 실행하여 필요한 데이터를 가져와 화면을 구성한다.

작동방식

• 사용자가 페이지를 요청하면 서버는 기본 HTML과 자바스크립트 파일을 브라우저로 전송.
• 브라우저가 자바스크립트를 실행하여 필요한 데이터를 API 요청으로 가져오고, 페이지를 동적으로 렌더링.

장점

• 서버 부하 감소: 서버는 기본 파일만 제공하고, 클라이언트가 대부분의 작업을 처리하기 때문에 서버 부하가 적습니다.
• 동적 웹 애플리케이션에 적합: 클라이언트 측에서 페이지를 계속해서 업데이트할 수 있어 더 동적인 사용자 경험 제공.
• 빠른 내비게이션: 페이지 간 이동 시 새로고침 없이 빠르게 전환 가능합니다.

단점

• SEO에 불리: 클라이언트에서 데이터를 가져와야 하므로, 검색 엔진이 데이터를 크롤링하기 어려울 수 있습니다. (하지만, Next.js는 이러한 문제를 보완할 수 있는 기술을 제공합니다.)
• 초기 로딩 속도: 처음에 자바스크립트와 데이터를 로드해야 하기 때문에 초기 로딩이 느릴 수 있습니다.
• 브라우저 성능에 의존: 저사양 기기에서는 CSR이 느리게 작동할 수 있습니다.

SSR vs CSR 주요 차이점

Next.js에서 SSR과 CSR

Next.js는 SSR과 CSR 모두 지원하며, 페이지에 따라 적합한 렌더링 방식을 선택할 수 있다. App Router는 React Server Components를 통해 서버에서 많은 렌더링을 수행하고, Page Router는 클라이언트 측에서 페이지를 동적으로 처리하는 CSR 중심의 방식이 더 강하다.

결국, SSR은 SEO와 초기 로딩 속도가 중요한 콘텐츠 중심의 사이트에 유리하고, CSR은 더 동적이고 자주 업데이트되는 대화형 애플리케이션에 적합하다.