[Next.js] Pages Router vs App Router 비교

1. 디렉토리 구조

   Pages Router: /pages
   App Router:   /app

2. 라우팅 방식
   Pages Router: 파일 기반
   App Router:   폴더 기반

3. 주요 파일
   Pages Router:

/pages
  ├── index.js
  ├── about.js
  ├── _app.js
  └── api/
      └── hello.js

   App Router:

/app
  ├── page.js
  ├── about/
  │   └── page.js
  ├── layout.js
  └── api/
      └── route.js

4. 데이터 페칭
   Pages Router: getServerSideProps, getStaticProps

// pages/index.js
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()
  return { props: { data } }
}

export default function Home({ data }) {
  return <div>{data.title}</div>
}

   App Router:   서버 컴포넌트 내 직접 비동기 데이터 페칭

// app/page.js
async function getData() {
  const res = await fetch('https://api.example.com/data')
  return res.json()
}

export default async function Home() {
  const data = await getData()
  return <div>{data.title}</div>
}

5. 컴포넌트 유형
   Pages Router: 클라이언트 컴포넌트만 지원
   App Router:   서버 및 클라이언트 컴포넌트 지원

 

6. 컴포넌트 구조

 

Pages Router

// pages/index.js
export default function Home() {
  return <h1>홈페이지</h1>
}

// pages/_app.js
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

 

App Router

 

6. 장단점 비교

	Pages Router	App Router
장점	- 간단한 구조  - 쉬운 학습 곡선 (주관적의견) - 기존 프로젝트 호환성	- 향상된 성능   (서버 컴포넌트, 스트리밍 등을 통해) - 유연한 레이아웃 - 서버 컴포넌트 지원 - 개선된 데이터 fetching
단점	- 복잡한 레이아웃 구현(주관적의견) - 서버 컴포넌트 미지원	- 가파른 학습 곡선 (주관적의견) - 마이그레이션 어려움 - 초기 복잡성

7. 성능

 

1. 서버 컴포넌트: App Router는 기본적으로 서버 컴포넌트를 사용합니다. 이는 서버에서 렌더링되어 클라이언트로 전송되는 JavaScript의 양을 줄일 수 있습니다.
2. 스트리밍: App Router는 서버에서 UI를 점진적으로 렌더링하고 스트리밍할 수 있어, 사용자가 전체 페이지가 로드되기 전에 콘텐츠를 볼 수 있습니다.
3. 부분 프리렌더링: 정적인 부분을 미리 렌더링하고 동적인 부분을 실시간으로 스트리밍할 수 있습니다.

 

App Router는 서버 컴포넌트와 스트리밍 같은 새로운 기능을 통해 성능 최적화의 가능성을 제공한다

 

8. SEO 및 메타데이터

App Router에서 메타데이터 API를 통해 SEO를 더 쉽게 관리할 수 있다

 

Next.js의 메타데이터 API는 애플리케이션의 SEO와 웹 공유 가능성을 개선하는 데 사용할 수 있는 다양한 메타데이터 옵션을 제공합니다. 이 API는 정적 및 동적 메타데이터를 모두 지원합니다.

 

예시 ) 

 

1. 정적 메타데이터

// layout.js | page.js

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '내 웹사이트',
  description: '내 웹사이트에 대한 설명',
}
 
export default function Page() {
  return '...'
}

 

2. 동적 메타데이터

import type { Metadata } from 'next'
 
export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const id = params.id
 
  const product = await fetch(`https://.../${id}`).then((res) => res.json())
 
  return {
    title: product.title,
    description: product.description,
  }
}
 
export default function Page({ params, searchParams }: Props) {
  return '...'
}

 

3. JSON-LD를 사용한 구조화된 데이터

import { JsonLd } from 'react-schemaorg'
 
export default function Page({ params }) {
  const product = getProduct(params.id)
 
  return (
    <>
      <h1>{product.name}</h1>
      <JsonLd<Product>
        item={{
          '@context': 'https://schema.org',
          '@type': 'Product',
          name: product.name,
          description: product.description,
          image: product.image,
          offers: {
            '@type': 'Offer',
            price: product.price,
            priceCurrency: 'USD',
          },
        }}
      />
    </>
  )
}

 

 

JSON-LD란 ? 

JSON-LD(JavaScript Object Notation for Linked Data)는 구조화된 데이터를 표현하기 위한 경량 형식입니다.

 이는 웹 페이지에 의미론적 정보를 추가하는 데 사용되며, 검색 엔진이 콘텐츠를 더 잘 이해하고 처리할 수 있게 해줍니다.

JSON-LD의 주요 특징:

1. JSON 기반: 기존 JSON 형식을 사용하므로 개발자들이 쉽게 이해하고 사용할 수 있습니다.
2. 링크드 데이터: 데이터 항목 간의 관계를 표현할 수 있어 더 풍부한 의미 전달이 가능합니다.
3. SEO 향상: 검색 엔진이 웹 페이지의 내용을 더 정확히 이해하도록 돕습니다.
4. 스키마.org 호환: 스키마.org의 어휘를 사용하여 데이터 구조를 정의합니다.

 

 

9. 미들웨어의 유연성 

 

기존 Page Router에서는 페이지 디렉토리에 대해서만 적용가능했으나

App router 에선 전역적으로 적용되며, matcher 를 통해 더 유연한 경로 지정이 가능해졌고,

더 많은 기능과 유연성이 제공됬습니다

 

 

출처: Next.js 공식 문서
https://nextjs.org/docs/app/building-your-application/optimizing/metadata

https://nextjs.org/docs/pages/building-your-application/routing

https://nextjs.org/docs/app/building-your-application/upgrading

https://nextjs.org/docs/app/building-your-application/rendering/server-components

https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration

https://vercel.com/blog/next-13