Next.js 14 - Pages router vs App router 한 눈에 비교

Next.js 14

 

 

✅ Pages router vs App router

---

 

✅ 

Pages Router 시절

 

 

🔷 서버가 하는 일

 

• HTML만 미리 만들어서 브라우저로 보냄 (SSR/SSG)
• 컴포넌트 “실행”은 하지 않음

 

 

🔷 브라우저(클라이언트)가 하는 일

 

• 페이지 로드 후 React JS 번들을 받아서
• 컴포넌트를 다시 실행하며 hydration 진행
• 모든 로직(이벤트, 상태관리, DOM 조작 등)이 브라우저에서 실행됨

 

➡ 서버는 UI 결과물만 만들고, 실제 React는 브라우저에서 실행된 구조

 

---

 

✅ 

App Router(Server Components) 이후

 

이제는 페이지가 이렇게 나뉘었어:

 

• Server Component — 서버에서 실행됨 (기본)
• Client Component — 브라우저에서 실행됨 (“use client” 필요)

 

---

 

🔥 Server Component의 특징

 

 

✔ 컴포넌트가 서버에서 직접 실행됨

 

• await db.user.findUnique() 같은 로직을 컴포넌트 안에서 호출 가능
• process.env 접근 가능
• API 라우트를 따로 만들 필요 없음

 

 

✔ 브라우저에는 HTML만 보내고, JS 로직을 보내지 않음

 

• 해당 컴포넌트는 hydration도 없음
• 브라우저에 실행 로직이 전혀 안 넘어감 (보안 향상)

 

➡ 이게 pages router와의 가장 큰 차이점

 

---

 

🔥 Client Component의 특징

 

 

✔ “use client” 선언 필요

 

• 이게 붙으면 예전 pages router와 동일하게 브라우저에서 동작
• 이벤트 핸들러(onClick 등) 사용 가능
• hydration 발생

 

➡ 즉, 필요한 부분만 브라우저에 로직을 보냄

 

---

 

⭐ 최종 요약 (네가 말한 문장을 정확히 다듬으면)

 

 

🟩 Pages Router

 

서버는 HTML만 만들고, React 로직은 모두 브라우저에서 실행된다.

 

 

🟦 App Router

 

서버 컴포넌트는 서버에서 실행되어 HTML만 브라우저로 보내고,

브라우저에서는 로직이 실행되지 않는다.

필요한 경우에만 Client Component로 브라우저에서 실행한다.

 

네가 말한 내용이 거의 완벽했어.

조금 더 정확히 하면:

 

“모든 로직이 서버에서 실행된다” →

정확히는 “서버 컴포넌트의 로직은 서버에서 실행된다”

“클라이언트 컴포넌트의 로직은 브라우저에서 실행된다”