빠르게 받아오는 API에 스트리밍을 사용해야 할까요?
안녕하세요!
다이나믹 페이지에서 데이터 패칭이 오래 걸리는 문제를 해결하기 위해, 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님에게 적절한 방식이 어떤 것인지 판단할 수 있을 것 같습니다. 상황에 맞는 최적의 해법을 찾으시길 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문
0
23
2
next.js 프로젝트
0
28
1
Next.js + Tanstack Query BFF 구조 질문
0
29
2
Next.js 사전렌더링 이해하기 부분
0
34
2
모달 관련 질문
0
42
3
렌더링 관련 질문
0
80
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
64
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
65
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
75
2
npx prisma db push 시 에러가 뜹니다.
0
94
3
vercel 배포를 실패하였습니다.
0
101
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
57
2
getServerSideProps 함수와 SSR의 관계
0
78
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
61
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
117
2
일반적인 nextjs project architecture에 대하여..
0
90
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
74
2
배포 시 오류 발생
0
90
2
백엔드 서버 오류납니다.
0
83
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
93
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
107
1
[book]/[id]/page.tsx 모달 띄울 때 성능 하락 현상은 ReviewList를 불러오면서 발생하는 문제 같습니다.
0
63
2
빨간줄 설정
0
77
2
익스텐션 질문
0
61
1