인프런 커뮤니티 질문&답변

안녕하세요 이인기님 이정환입니다.

맞습니다. ReviewList 컴포넌트의 렌더링이 꽤 오래걸리긴 하더라구요 🥲

다만 실습 환경에서는 리뷰 데이터가 많아야 10~100개 정도라서, “수십 개의 데이터를 한꺼번에 가져와서 생기는 성능 이슈일 것 같다”는 가정이나, 페이지네이션 API를 학습 겸 /review/book/${bookId}를 고도화하자는 제안은 이번 케이스의 원인/해결책과는 조금 결이 다를 수 있을 것 같습니다.

(10 ~ 100개 수준의 레코드를 단순 조회하는 작업은 보통 네트워크 전송량도 크지 않고, DB 입장에서도 인덱스(예: bookId 기준)가 잡혀 있는 한 응답 시간이 병목이 되기 어렵습니다.)

실제로 느리게 느껴지는 이유는 리뷰 개수가 많아서라기보다는, 해당 페이지가 정적으로 빌드된 결과를 바로 보여주는 구조가 아니라 매 요청마다 데이터를 다시 가져오는 Dynamic 렌더링으로 동작하기 때문입니다. 특히 데이터 소스가 Supabase이고, 프리티어 환경에서는 트래픽 상황이나 인스턴스 리소스에 따라 응답 시간이 일정하지 않거나 상대적으로 느려질 수 있어서, 같은 양의 데이터라도 “항상 바로 온다”는 보장이 없습니다. 결국 병목의 핵심은 “수십 개 데이터를 한 번에 가져왔기 때문”이라기보다, “요청 시점에 서버에서 실시간으로 데이터를 받아와야 하는 구조 + 외부(Supabase) 응답 지연 가능성” 쪽에 더 가깝다고 보는 편이 자연스럽습니다.

가장 간단한 해결책으로는 해당 컴포넌트를 Suspense로 감싸서, 데이터가 준비되기 전까지는 fallback UI를 먼저 보여주도록 만드는 방법이 있습니다. 혹은 인터셉트 라우트로 제공되는 모달이라면, 모달의 컨텐츠 영역(리뷰 목록이 렌더링되는 부분)을 아예 Suspense로 감싸면 로딩 시간이 실제로 줄어들지는 않더라도, 사용자가 즉시 로딩 상태를 확인할 수 있어서 “모달이 멈춘 것처럼 보이는 체감”은 확실히 줄어듭니다.

안녕하세요, 인프런 AI 인턴입니다. 이인기님.

모달 성능 문제에 대해 공유해 주셔서 감사합니다. ReviewList를 불러올 때 발생하는 성능 저하 현상에 대해 깊이 있는 분석을 해주셔서 도움이 되었습니다.

성능 개선 전략: 페이지네이션

말씀하신 것처럼, 동시에 많은 데이터를 불러올 경우 성능 문제가 발생할 수 있습니다. 이를 해결하기 위해 페이지네이션을 통해 데이터를 부분적으로 가져오는 것이 좋습니다. 이를 통해 한 번에 API에서 받아오는 데이터의 양을 줄여 성능을 개선할 수 있습니다.

1. 페이지네이션 구현: API 요청 시, 특정 범위의 데이터만 가져오도록 쿼리 파라미터를 추가하세요. 예를 들어, limit과 offset 또는 page와 size를 사용할 수 있습니다.

   const limit = 10; // 페이지당 표시할 리뷰 수
   const offset = 0; // 표시 시작 지점
   const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/review/book/${bookId}?limit=${limit}&offset=${offset}`);
   

2. 프론트엔드에서 데이터 처리: 데이터가 로드될 때마다 다음 페이지 버튼을 눌러 추가 데이터를 가져오도록 하거나, 스크롤에 이벤트를 걸어 무한 스크롤을 구현할 수 있습니다.

이런 방식으로 API와 프론트엔드를 개선하여 성능을 최적화할 수 있습니다. 이 과정은 성능 향상은 물론 실무 프로젝트에서도 자주 사용되는 기법이니 학습에 큰 도움이 될 것입니다.

추가 추천 자료: 페이지네이션에 대해 더 알고 싶으시면 아래 링크를 추천드립니다:
- Next.js와 함께하는 페이지네이션 구현하기

긴 강의와 프로젝트를 통해 많은 것을 배우셨다니 기쁩니다. 추가적인 질문이 있거나 도움이 필요하시면 언제든지 말씀해 주세요.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.