Next.js 데이터 호출
넥스트의 데이터 호출(Data Fetching)이란 넥스트에서 제공하는 API로 서버 데이터를 호출해 오는 방법을 말합니다. 이번 페이지는 넥스트에서 데이터를 호출하는 방법을 알아보겠습니다.
데이터 호출 베스트 프랙티스
1. 가능하면 서버 사이드에서 데이터를 호출할 것
넥스트에서 데이터를 호출할 때는 가급적 서버 사이드에서 호출하는 것이 좋습니다. 이유는 다음과 같습니다.
- 인증키, 개인 정보 등 클라이언트에 노출되면 안되는 정보들을 쉽게 감출 수 있음
- 데이터 호출을 위한 네트워크 왕복 요청 갯수 감소. 예) 서버에서 호출하면 1번, 클라이언트에서 호출하면 2번
- 컴포넌트 렌더링 시간 단축. 참고 자료
2. 데이터 호출 필요한 곳엔 모두 fetch를 쓸 것 - 앱 라우터 사용시
같은 데이터를 여러 컴포넌트에서 호출해야 할 때는 전역 상태나 props로 관리하지 않고 fetch API나 cache를 사용합니다. 같은 데이터를 여러 곳에서 호출하더라도 넥스트 내부적으로 메모이제이션이 되기 때문에 성능에 나쁜 영향을 주지 않습니다.