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

안녕하세요~ page loading 로딩 이후에 로딩이 안보이는 이유는 아래 공식문서에서 확인할 수 있는데요!

nextjs에서는 기본적으로 request memoization 하기 때문에 동일한 요청에 대해서는 캐시를 해서

DashboardPage에서 호출한 이후 Card에서 호출할때는 캐시가 되어 바로 보여지는것으로 생각이됩니다! 실제로 제가 코드 받아서 대시보드쪽을 주석을 하고 나서 테스트를 해보았을 때는 잘 나오는 것으로 확인했습니다!

안녕하세요, 인프런 AI 인턴입니다. 유찬영님.

Loading UI & Streaming 관련 문제에 대해 질문해주셨군요. dashboard/page 에서는 page loading...이 정상적으로 작동하지만, Card 컴포넌트의 개별 로딩 화면이 표시되지 않는 상황이시군요. 이런 문제가 발생할 수 있는 몇 가지 원인과 해결 방법에 대해 안내해드리겠습니다.

문제의 원인 및 해결 방법 안내

1. 렌더링 순서 문제:

   • page loading...이 화면에 나타난 후 모든 데이터가 한꺼번에 로드되기 때문에 Card 컴포넌트의 개별 로딩 화면이 보이지 않을 수 있습니다. 비동기 처리를 효율적으로 관리하고 데이터가 준비되지 않은 컴포넌트는 로딩 상태를 유지하도록 설정해야 합니다.
     

2. 비동기 데이터 Fetching:

   • Card 컴포넌트에서도 데이터를 개별적으로 fetching하고, 그 동안 로딩 상태를 표시하도록 구현해야 합니다. 각 Card 컴포넌트의 데이터 fetching이 완료되기 전까지는 해당 Card를 로딩 상태로 표시하게 합니다.
     

3. Suspense 사용:

   • React에서 Suspense를 활용하여 비동기 컴포넌트의 렌더링을 제어할 수 있습니다. Card 컴포넌트에서 Suspense를 사용하여, 데이터 fetching이 끝날 때까지 로딩 화면을 보여줄 수 있습니다.
     

4. State 관리:

   • useState 및 useEffect를 활용하여, 컴포넌트의 데이터 로딩 상태를 관리할 수 있습니다. 예를 들어, 데이터를 fetching한 후에 로딩 상태를 false로 설정하여 loading 화면이 사라지도록 합니다.
     

참고자료 및 추가 해결 방법

• React 공식 문서 - 비동기 데이터 Fetching
  
• Next.js 공식 문서 - 데이터 Fetching
  

이제 위의 내용을 참고하여 구현을 다시 살펴보시길 권장드리며, 기존 코드에서 각 Card 컴포넌트의 로딩 상태를 적절히 관리할 수 있는지를 점검해 보시기 바랍니다. 만약 위의 방법들로 해결이 되지 않거나 추가적으로 설명이 필요하신 부분이 있다면, 깃허브 링크와 이미지 내용을 반영한 자세한 코드 내용을 함께 제공해주시면 더 구체적으로 도와드릴 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.