📍 프로그래밍 언어/Next.js

[ Next.js ] App Router에서의 데이터 페칭, 어떻게 달라졌을까?

shyunu 2025. 6. 16. 15:00
728x90

Next.js 13부터 도입된 App Router는 기존 Pages Router와는 다른 구조와 개념을 기반으로 동작합니다.

특히 서버 컴포넌트(Server Component)가 도입되면서, 데이터 페칭 방식에도 큰 변화가 생겼습니다.

 

이번 글에서는 App Router 환경에서의 데이터 패칭 방식과 그 활용 방법에 대해 간단하게 정리해보았습니다.

 

 

✅ 서버 컴포넌트에서의 데이터 페칭

App Router에서 새롭게 추가된 서버 컴포넌트는 서버에서만 실행되기 때문에, 컴포넌트 자체를 async 함수로 선언하고 fetch와 같은 비동기 로직을 직접 사용할 수 있습니다. 이처럼 서버 컴포넌트 안에서는 API 요청을 자유롭게 처리할 수 있으며, 이를 활용해 불필요한 props 전달을 줄이고, 보다 모듈화된 데이터 핸들링이 가능해집니다.

 

 

❌ 더 이상 getServerSideProps / getStaticProps / getStaticPath는 쓰지 않아요

기존의 Pages Router에서는 데이터 패칭을 위해 getServerSideProps, getStaticProps, getStaticPaths 같은 함수들을 사용했죠. 하지만 App Router에서는 이러한 방식은 더 이상 사용하지 않습니다.

 

대신, 컴포넌트 내부에서 직접 데이터를 불러오고 렌더링하는 방식으로 패러다임이 바뀌었습니다.

 

 

즉, 페이지 컴포넌트가 모든 데이터를 책임지고 하위 컴포넌트로 전달할 필요가 없고,

 

 

필요한 컴포넌트에서 직접 데이터를 가져오는 방식으로 개발할 수 있게 된 것입니다.

 

 

📌 데이터는 “필요한 곳에서 직접 불러오기”

Next.js 공식 문서에서도 강조하고 있는 가장 좋은 데이터 패칭 전략은 다음과 같습니다:

 

“Fetching data where it’s needed”,
즉, “데이터가 필요한 곳에서 직접 데이터를 불러와라” 라는 것이죠.

 

예전처럼 Context나 props로 데이터를 여기저기 전달하는 방식이 아니라, 필요한 컴포넌트가 직접 데이터를 불러오도록 설계하는 것이 가독성과 유지보수 측면에서 훨씬 효율적입니다.

 

 

🌍 환경 변수로 API 서버 주소 관리하기

 

API 요청 시 백엔드 서버 주소를 직접 하드코딩하는 대신, 환경 변수를 활용하는 것이 안전하고 유연합니다.

 

 

.env 파일을 루트 경로에 만들어 아래와 같이 작성해줍니다.

NEXT_PUBLIC_API_SERVER_URL=http://localhost:12345

환경 변수 이름에 NEXT_PUBLIC_ 접두사를 붙이는 이유는, 해당 변수를 클라이언트에서도 접근 가능하게 하기 위해서입니다.

접두사가 없는 환경 변수는 Next.js에서 자동으로 서버 전용(private)으로 처리되기 때문에 클라이언트 컴포넌트에서는 접근할 수 없습니다.

 

 

 

🔁 fetch 주소 바꾸기

기존의 하드코딩된 API 주소

const response = await fetch(`http://localhost:12345/book`);

 

 

→ 다음과 같이 환경 변수로 대체하면 됩니다.

const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/book`);

 

 

✍️ 마무리

App Router의 등장으로 Next.js에서의 데이터 패칭 방식은 보다 직관적이고 컴포넌트 중심적으로 바뀌었습니다.

 

“필요한 곳에서 직접 데이터를 가져오자.”

 

이 단순한 원칙만 잘 지켜도, 이전보다 훨씬 깔끔하고 유지보수가 쉬운 코드를 만들 수 있습니다.

App Router의 장점을 잘 활용해보세요!

728x90