streaming 페이지 보완 필요

Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)

React use hook(v19+)

작성

안녕하세요, 잘 학습하고 있는 학생입니다.

강의 따라가면서, streaming 파트는 다 적용을 했습니다. 소개 탭에서 홈 탭으로 이동 시에 태그목록과 포스트리스트도 skeleton 로딩페이지 잘 적용됩니다.

'홈'을 눌렀을때, 기존의 '로딩 되는 중에 아무 변화 없이 사용자를 마냥 기다리게 함'에서 현재의 '로딩 되는 중에 skeleton 보여줌으로써 로딩되고 있음을 나타내줌'으로의 개선은 사용자 경험에 있어서, 정말 효과적인 방법이라고 느꼈습니다.

다만, 문제가 있습니다.

'홈' 을 눌러 이동하는 경우말고, 태그 목록에서 나머지 'css'태그, 'git'태그 등등 이를 직접 클릭해서 이동하는 경우에는 streaming 이 적용되지 않습니다.

예를 들어, 홈을 클릭한 상황에서는 skeleton ui가 잘 나타나지만, 그렇게 홈으로 이동한 상황에서 다른 태그(css,Git 등)로 다시 이동하는 상황에서는 적용되지 않고 그대로입니다.

이를 해결하기 위해선 어떻게 해야 하나요?

react 블로그 next.js cursor cursorai

답변 2

짐코딩

지식공유자

홈탭에서 태그 클릭시 streaming 표시 여부는 구현 방식의 차이입니다.

소개 -> 홈 으로 왔을 때 스트리밍이 표시되는 이유는 페이지가 전환되었기 때문입니다.

태그도 별도의 페이지로 분리하신 후 loading UI를 적용하시면 됩니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 주병규님.

Next.js에서의 사용자 경험을 향상시키기 위한 skeleton 로딩 페이지 적용은 훌륭한 접근입니다. 말씀하신 문제는 태그 클릭 후 페이지 이동 시 skeleton UI가 적용되지 않는 상황 같습니다. 이 문제를 해결하기 위해 몇 가지 확인해보실 사항을 안내드리겠습니다.

데이터 패칭 로직 확인:
- getStaticProps 나 getServerSideProps 를 활용하고 있다면, 데이터 패칭 구문 내에서 로딩 상태를 관리하는지 확인해보세요.
- 태그를 클릭했을 때도 동일한 패칭 로직의 로딩 상태를 안고가는지 체크해보세요.
클라이언트 측 라우팅 설정:
- Next.js의 Link 태그나 useRouter 훅을 이용할 때, 클라이언트 측 라우팅이 적용되도록 설정되어 있는지 확인하십시오.
- 태그 클릭 시 클라이언트 라우팅을 통해 페이지를 이동하면서 기존 로딩 상태 유지를 확인해보세요.
로딩 상태 공유:
- 전역 상태 관리 라이브러리(Redux, Context API 등)를 사용하여 태그 클릭 시 로딩 상태를 공유하도록 구현할 수 있습니다. 이렇게 하면 홈 페이지와 태그 클릭 페이지에서 로딩 상태를 일관되게 유지할 수 있습니다.

다음은 비슷한 문제를 다룬 답변 URL입니다. 상세한 구현 예제를 제공하므로 확인해보시면 도움이 될 것 같습니다:
- Next.js - Skelton UI 적용 방법과 고려 사항

이 사항들을 점검하며 질문하신 문제를 해결해보시길 바랍니다.

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

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

streaming 페이지 보완 필요