김하림

우아한형제들 프론트엔드 개발자

Vercel은 수백 명의 개발자와 수천 개의 Next.js 리포지토리 사례를 종합하여 Next.js App Router를 쓸 때 흔히 저지르는 10가지 실수를 정리했습니다. 왜 이런 실수를 하는 지와 모범 사례는 무엇인지, 그리고 App Router 꿀팁 몇 가지를 소개합니다. 바쁜 분들을 위해 블로그의 목차와 내용을 간단하게 정리해보았습니다. * Using Route Handlers with Server Components - 서버 컴포넌트에서 라우트 핸들러를 호출하지 마세요. - 대신 라우트 핸들러 내부에 배치하려는 로직을 서버 컴포넌트에서 직접 호출하세요. * Static or dynamic Route Handlers - 라우트 핸들러는 GET 메서드를 사용할 때 기본적으로 캐시됩니다. - GET 라우트 핸들러에서 리턴한 JSON 데이터는 다른 빌드가 일어날 때 까지 변경되지 않습니다. * Route Handlers and Client Components - Form을 만들 때 라우터 핸들러 대신 Server Action을 활용할 수 있습니다. * Using Suspense with Server Components - Suspense의 위치는 데이터 패칭을 수행하는 비동기 컴포넌트보다 높은 곳에 위치해야 합니다. - Suspense가 비동기 컴포넌트 내부에 있으면 작동하지 않습니다. * Using the incoming request - 서버 컴포넌트는 들어오는 요청(Inc...