개념 설명
앱 라우터 방식은 기존의 페이지 라우터와 달리 서버 컴포넌트(Server Components)를 기본으로 채택. 데이터가 필요한 컴포넌트에서 직접 fetch를 호출하는 방식이 핵심. 이를 통해 불필요한 프롭스 드릴링(Props Drilling)을 방지하고, 서버 측에서 데이터를 미리 가져와 렌더링 속도 향상 가능.
사용 상황 예시
- 게시글 상세 페이지: 특정 ID에 해당하는 게시글 데이터를 서버 컴포넌트에서 직접 호출하여 사용자에게 즉각적인 화면 제공.
- 사용자 대시보드: 복수의 위젯 컴포넌트들이 각각 필요한 API 데이터를 독립적으로 페칭하여 병렬적으로 처리할 때 적합.
- 검색 결과 화면: 쿼리 매개변수에 따른 필터링 결과를 서버에서 직접 조회하여 보안 및 SEO(검색 엔진 최적화) 강화.
기본 문법
서버 컴포넌트에서는 함수 앞에 async를 붙이고 내부에서 await fetch()를 사용하는 직관적인 문법 사용.
// 서버 컴포넌트 예시
async function Page() {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return (
<div>
{/* 데이터 사용 */}
<h1>{data.title}</h1>
</div>
);
}자주 하는 실수
- 클라이언트 컴포넌트 내
async사용:'use client'지시어가 선언된 컴포넌트 내부에서 함수 자체에async를 붙여 정의하는 행위. 브라우저 환경에서 동작 시 하이드레이션(Hydration) 오류 및 예기치 못한 런타임 에러 유발 가능. - 불필요한
useEffect활용: 앱 라우터의 서버 컴포넌트임에도 불구하고 습관적으로useEffect와useState를 사용해 데이터를 불러오는 경우. 이는 서버 렌더링의 이점을 포기하는 비효율적인 방식임. - 중복 요청 제어 미흡: 동일한 데이터를 여러 하위 컴포넌트에서 요청할 때 발생하는 성능 저하. Next.js의
fetch캐싱 기능을 신뢰하거나cache함수를 통한 중복 제거 필요.
핵심 요약
- 서버 컴포넌트에서 직접
async/await를 통한 데이터 호출 권장.- 클라이언트 컴포넌트(
'use client')에서는 직접적인async컴포넌트 선언 불가.- 컴포넌트 단위의 데이터 페칭으로 응집도 및 렌더링 성능 최적화.
