인프런 커뮤니티 질문&답변
작성한 질문수
빠르게 받아오는 API에 스트리밍을 사용해야 할까요?
해결된 질문
작성
·
39
0
안녕하세요!
다이나믹 페이지에서 데이터 패칭이 오래 걸리는 문제를 해결하기 위해, Next에서 임시로 로딩 UI를 보여주고, 추후 패칭이 완료되면 스트리밍으로 업데이트하는 것으로 이해했습니다.
로딩 UI는 데이터 패칭이 느릴 때 유용하지만, 패칭이 빠른 경우 오히려 깜빡거리는 느낌이 들어 사용자 경험 측면에서 안 좋을 수 있다고 느꼈습니다.
물론 제가 생각했을 때 가장 베스트는 API 속도를 측정하여 특정 시간 이상인 경우에 스트리밍 기술을 적용하고, 그 외에는 안하는 것이 좋다고 생각을 했지만, 측정하기도 힘들 뿐더러, 사용자 네트워크도 신경을 써야 하기 때문에 이러한 방법은 어렵다고 생각을 했습니다.
이러한 문제에서 강사님의 생각을 듣고 싶어 질문드리게 되었습니다.
답변 2
0
안녕하세요 이정환입니다.
말씀하신대로 데이터 요청 속도가 매우 빠른 상황에서는 스트리밍이 불 필요할 수 있습니다. 이는 평균 데이터 요청에 걸리는 시간을 환경에 따라 모두 비교해 본 뒤 평균값을 내었을 때 특정 시간 이하라면 적용해 볼 수 있는 좋은 방법인것 같습니다.
다만 모든 환경에 충분히 빠른 속도를 제공하는 데이터 요청은 존재하기 어렵습니다. 범용적인 웹 서비스는 PC 환경 뿐만 아니라 모바일 환경 그를 넘어 도서 산간 환경의 접속 상황도 고려되어야 하기에 모든 환경을 다 고려해보면 특정 구간에서는 분명 스트리밍이 필요한 상황도 있을 거라고 예상됩니다.
물론 PC 환경에서만 접속할 수 있고, 사용자가 빠른 인터넷을 사용할거라고 보장할 수 있는 문제라면 말씀하신대로 스트리밍을 활용하지 않아도 될 듯 합니다.
0
안녕하세요, 인프런 AI 인턴입니다. qjatjs123123님!
Next.js의 스트리밍 기능과 로딩 UI에 대한 질문을 주셨네요. 다이나믹 페이지에서 데이터를 빠르게 패칭할 수 있다면, 로딩 UI가 오히려 사용자 경험에 부정적인 영향을 미칠 수 있다는 점에 대해 고민하신 것 같습니다. 이러한 상황에서 접근 방안을 몇 가지 고려해볼 수 있습니다.
로딩 UI 조건부 렌더링:
- 빠른 응답을 보장할 수 있는 경우에는 로딩 UI를 생략하거나, 지연 시간 기준을 설정해 0.3초 이상 지연되는 경우에만 로딩 UI를 보여주는 방식으로 구현할 수 있습니다. 이렇게 함으로써, 불필요한 깜빡임을 방지할 수 있습니다.
- 빠른 응답을 보장할 수 있는 경우에는 로딩 UI를 생략하거나, 지연 시간 기준을 설정해 0.3초 이상 지연되는 경우에만 로딩 UI를 보여주는 방식으로 구현할 수 있습니다. 이렇게 함으로써, 불필요한 깜빡임을 방지할 수 있습니다.
지연 로딩 전략:
- API 요청이 끝났음을 미리 감지한 후, 데이터 패치를 기다리지 않고 콘텐츠를 렌더링할 수 있다면 로딩 UI가 잠시 표시되는 등의 불필요한 작업을 피할 수 있습니다. 이 경우엔 스트리밍이 아니라, 데이터 로드와 상태 업데이트를 빠르게 할 수 있도록 최적화해야 합니다.
- API 요청이 끝났음을 미리 감지한 후, 데이터 패치를 기다리지 않고 콘텐츠를 렌더링할 수 있다면 로딩 UI가 잠시 표시되는 등의 불필요한 작업을 피할 수 있습니다. 이 경우엔 스트리밍이 아니라, 데이터 로드와 상태 업데이트를 빠르게 할 수 있도록 최적화해야 합니다.
사용자 경험 고려:
- 데이터 요청에 걸리는 평균 시간을 분석하여 데이터 급증 환경이 아닌 이상 로딩 UI를 배치하지 않는 것도 한 방법입니다. 데이터 처리속도가 확실히 빠를 경우, 사용자에게 별도의 로딩 신호가 없이 즉시 데이터를 보여주는 것이 전체 사용자 경험에 더 긍정적일 수 있습니다. 그리고 정말 드문 경우에만 깜빡임이 있을 수 있습니다.
- 데이터 요청에 걸리는 평균 시간을 분석하여 데이터 급증 환경이 아닌 이상 로딩 UI를 배치하지 않는 것도 한 방법입니다. 데이터 처리속도가 확실히 빠를 경우, 사용자에게 별도의 로딩 신호가 없이 즉시 데이터를 보여주는 것이 전체 사용자 경험에 더 긍정적일 수 있습니다. 그리고 정말 드문 경우에만 깜빡임이 있을 수 있습니다.
네트워크 상태 고려:
- 사용자 네트워크 상태가 좋지 않은 경우를 대비하여, 네트워크 정보를 기반으로 로딩 UI를 보여줄지를 결정하는 방법도 유용할 수 있습니다. 가령 느린 연결에서는 로딩 UI가 더 긴 시간 동안 필요할 수 있습니다.
- 사용자 네트워크 상태가 좋지 않은 경우를 대비하여, 네트워크 정보를 기반으로 로딩 UI를 보여줄지를 결정하는 방법도 유용할 수 있습니다. 가령 느린 연결에서는 로딩 UI가 더 긴 시간 동안 필요할 수 있습니다.
이와 관련하여 SSR (Server-Side Rendering)과 CSR (Client-Side Rendering)에서의 로딩 처리에 대한 심도 있는 정보를 알고자 하는 경우 다음 질문을 참고하시길 바랍니다:
이러한 정보를 기반으로 qjatjs123123님에게 적절한 방식이 어떤 것인지 판단할 수 있을 것 같습니다. 상황에 맞는 최적의 해법을 찾으시길 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.