최근 회사 프로젝트를 Next.js 13 Pages Router에서 Next.js 15 App Router로 마이그레이션하는 작업을 완료했습니다.약 3개월간의 마이그레이션 과정에서 겪은 경험과 SSR/CSR 성능 차이를 실제 데이터와 함께 공유하고자 합니다.마이그레이션을 결정한 이유기존 Pages Router 기반의 프로젝트는 약 50개의 페이지와 다양한 API 라우트를 포함하고 있었습니다.Next.js 15 App Router로의 마이그레이션을 결정한 주요 이유는 다음과 같습니다. 성능 개선 기대React Server Components의 도입으로 번들 크기 감소향상된 데이터 페칭 패턴개선된 라우팅 성능개발자 경험(DX) 향상파일 기반 라우팅의 직관성레이아웃 중첩 기능스트리밍과 Suspense의 원활한..
서론: Next.js의 새로운 패러다임Next.js는 React 기반의 프레임워크로, 버전 13부터 도입된 App Router와 함께 서버 컴포넌트(React Server Components)를 정식으로 지원하기 시작했습니다. 이는 웹 개발 패러다임의 큰 변화를 가져왔으며, 프론트엔드 개발자들에게 서버와 클라이언트의 경계를 더욱 유연하게 활용할 수 있는 가능성을 열어주었습니다.기존의 React 애플리케이션은 주로 클라이언트 측에서 실행되는 코드로 구성되었습니다. Next.js의 기존 Pages Router에서도 서버 사이드 렌더링(SSR)이나 정적 생성(SSG)을 지원했지만, 컴포넌트 자체는 여전히 클라이언트에서 하이드레이션(hydration) 과정을 거쳐 완전히 상호작용 가능한 상태가 되었습니다.하지만..