[Next] 15. App Router에서 데이터 패칭

기존의 페이지 라우터에서는 데이터 패칭을 어떻게 했죠?

기억나시나요?

getServerSideProps, getStaticProps, getInitialProps 같은 특수 함수들을 사용했죠.
페이지 단위에서만 데이터 패칭이 가능했습니다.

단점은 무엇일까요?

바로 프롭스 드릴링(Props Drilling)입니다.
페이지에서 받아온 데이터를 하위 컴포넌트에 일일이 전달해야 했습니다.
상위 → 중간 → 하위로 계속 전달하다 보면, 컴포넌트가 복잡해지고 유지보수가 어려워집니다.

---

그럼, App Router에서는 데이터 패칭을 어떻게 할까요?

이제는 서버 컴포넌트(Server Component)라는 강력한 도구가 생겼습니다.
서버 컴포넌트 안에서 async 함수로 비동기 처리를 할 수 있고,
필요한 데이터를 그 자리에서 직접 패칭할 수 있게 되었죠.

너무 쉽죠?

이제는 데이터가 필요한 곳에서 직접 가져오면 됩니다.
굳이 상위 컴포넌트에서 내려주지 않아도 되죠.

💡 참고: 환경 변수 사용 시 주의할 점

App Router에서는 서버 컴포넌트와 클라이언트 컴포넌트가 명확히 나뉘기 때문에,
환경 변수(ENV)를 사용할 때도 주의해야 합니다.

.env 파일에 정의한 환경 변수를 클라이언트 컴포넌트에서 사용하려면,
반드시 NEXT_PUBLIC_ 접두어를 붙여야 브라우저에 노출됩니다.

지금은 클라이언트 컴포넌트에서 ENV를 직접 쓸 일이 없지만,
앞으로 쓸 일이 생길 수 있으니 습관처럼 NEXT_PUBLIC_을 붙여두는 것도 나쁘지 않겠죠.

 

다음 시간에는 어떤 방법으로 더 효율좋게 통신하는지, 예를 들면 뭐. 캐싱이나 그런거 있죠?
그거 해볼게요