Next.js app router 마이그레이션 전환하기
Next.js
작성일 : 2025.02.19
저번주에 Page Router 방식의 프로젝트를 App Router로 전환했는데요 마이그레이션을 진행하며 겪었던 부분과 App Router의 장단점을 서술해보려 합니다.
App Router는 React 18을 지원하기 위해 도입된 방식으로 React 18에서 제공하는 서버 컴포넌트, 클라이언트 컴포넌트, Suspense 같은 여러 기능들을 사용할 수 있습니다.
App Router의 폴더구조
App Router는 파일 시스템 기반 라우팅을 지원하며 app 폴더 내부에 page layout
error loading not-found와 같은 파일들을 이용해 화면을 구성할 수 있습니다.
page
각 폴더 내부에는 page파일이 있어야 라우팅이 가능합니다.
layout
layout파일은 모든 하위 경로에 공통적인 UI를 제공합니다.
이 정보에 대한 자세한 설명은 공식문서를 보시면 됩니다.
/app
├── components/ <------- 경로 생성 X
| └── InputComponent.tsx
├── blog/ <------- /blog
| ├── layout.tsx <------- 중첩 레이아웃
| ├── page.tsx
| └── [slug]/ <------- /blog/[slug]
| └── page.tsx
├── layout.tsx <------- 공통 레이아웃
└── page.tsx <------- 메인 페이지
use client
App Router는 기본적으로 서버컴포넌트를 지원하며 'use client'키워드를 사용해 클라이언트 컴포넌트임을 명시할 수 있습니다.
서버 컴포넌트
- 서버에서 직접 데이터 가져오기
- 보안에 민감한 정보에 안전하게 접근
- 렌더링에 필요한 라이브러리를 번들에 포함하지 않음으로써 JS 사이즈 줄이기
클라이언트 컴포넌트
- onClick, onChange와 같은 이벤트 리스너
- useState, useReducer, useEffect와 같은 상태와 생명주기
- 브라우저에서 사용할 수 있는 api
- state, effect, brower api를 사용하는 커스텀 훅
만약 서버컴포넌트에서 이벤트 리스너를 사용하거나 클라이언트 컴포넌트에서 데이터를 요청하게 되면 에러가 발생합니다.
클라이언트에서 데이터를 가져오려면 이전처럼 useEffect를 이용해 데이터를 요청할 수 있습니다.
좋았던 점
metadata
루트 layout에서 메타데이터 API를 통해 SEO 설정을 쉽게 관리할 수 있어 편리했습니다.
데이터 페칭
컴포넌트 내에서 직접 async/await 데이터 요청을 보내 클라이언트로 불필요한 로직을 전송하지 않아도 되어 중요 데이터 은닉과 같은 부분이 좋았고 Suspense같은 기능을 이용해 콘텐츠 로딩과 에러 핸들링이 편리해졌습니다.
편리한 레이아웃 관리
프로젝트를 파일 단위로 관리해 공통의 layout이나 loading, not-found이용한 핸들링을 할 수 있게되어 여러 사람과 협업을 할 때 편리할 것 같다는 생각이 들었습니다.
번들 사이즈
서버 컴포넌트와 클라이언트 컴포넌트를 구분해 필요한 부분만 클라이언트에 보내 초기 로딩 속도를 줄일 수 있습니다.
단점
학습 곡선
클라이언트 컴포넌트와 서버 컴포넌트의 장점과 단점을 구분하며 컴포넌트를 설계해야하는 부분과 클라이언트에서 호출할 함수와 서버에서 호출하는 함수를 구분하고 에러 핸들링 방식을 다르게 처리해야 하는 부분이 불편했습니다.
기존에는 axios interceptors를 이용해 공통으로 데이터 요청에 대한 에러를 핸들링했다면 서버에서 사용하는 axios와 클라이언트에서 사용하는 axios를 다르게 설정해야 한다는 점이 아쉬웠습니다.
하지만 이런 부분은 학습을 통해 App Router에 대한 이해도가 높아지면 자연스럽게 해결될 것 이라고 생각합니다.