SSR로 구현 시 스켈레톤 UI를 적용하지 않아도 될까요?
메인화면에서 SSR로 데이터를 받아오도록 구현한 상태입니다. (page router)
데이터가 많아서인지 페이지 접속 시 빈 화면이 출력되는데,
스켈레톤 UI를 적용해봐도 스켈레톤 UI가 표시되지 않습니다.
스켈레톤 UI는 CSR 환경에서만 사용할 수 있는 걸까요?
이런 경우에는 데이터를 CSR로 받아오고, 스켈레톤 UI를 적용하는 게 나을까요?
답변 2
1
안녕하세요, 인프런 AI 인턴입니다. qoswfxin님!
SSR(Server-Side Rendering) 방식으로 페이지를 구현하면, 서버에서 데이터를 미리 받아와 페이지를 생성한 후 사용자에게 HTML을 전달합니다. 이 때문에 사용자는 완전히 렌더링된 페이지를 빠르게 보게 되지만, 간혹 데이터 양이 많아지면 서버 처리 시간이 증가하여 로딩 중 빈 화면이 보일 수도 있습니다.
스켈레톤 UI의 활용
스켈레톤 UI는 일반적으로 CSR(Client-Side Rendering) 방식에서 사용되지만, SSR에서도 조건부로 적용할 수 있습니다. SSR에서 스켈레톤 UI를 보지 못하는 이유는:
1. 서버에서 이미 렌더링된 HTML을 전달: 서버에서 완료된 HTML 페이지를 제공하므로, 일반적으로 스켈레톤 UI가 불필요합니다.
2. 로딩 상태가 서버 측에서 처리: SSR의 경우, 클라이언트가 서버로부터 페이지를 수신할 때 이미 모든 것이 준비되어 있어야 합니다.
그러나 SSR에서도 초기에 지연이 발생한다면, 스켈레톤을 비동기적으로 로드하는 방법 등 다양한 전략을 고려해볼 수 있습니다.
전략 제안
- SSR + 스켈레톤 UI: 초기 요청을 서버에서 처리하면서 동시에 페칭이 끝나지 않은 데이터를 위한 스켈레톤 UI를 클라이언트에서 조건부로 보여줄 수 있습니다. 그러나 이는 복잡도가 높고 사용 사례에 맞춰 적절히 구현되어야 합니다.
- CSR로의 전환: 페이지의 특정 부분이 클라이언트 측에서 데이터를 받아오는 것이 더 효율적이라면, 해당 부분을 CSR로 처리하고 스켈레톤 UI를 적용할 수 있습니다. 이는 사용자의 경험을 개선하는 데 효과적일 수 있습니다.
관련 내용에 대해 좀 더 이해를 돕기 위해 다음과 같은 관련 질문을 참조하실 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
0
안녕하세요 이정환입니다.
스켈레톤 UI는 강의에서 설명드렸듯 SSR 스트리밍 환경에서 사용 가능합니다.
만약 로딩 중 스켈레톤 UI가 보이지 않고 빈 화면만 나온다면 아마 스트리밍이 설정되지 않은 걸로 보이는데요, 이에 현재 페이지가 잘 스트리밍 되도록 설정되어 있는지 확인해보셔야 할 것 같습니다
정확한 원인 파악을 위해서는 전체 코드를 깃허브 또는 구글 드라이브를통해 전달해 주시면 살펴보겠습니다!
풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문
0
43
2
next.js 프로젝트
0
38
1
Next.js + Tanstack Query BFF 구조 질문
0
39
2
Next.js 사전렌더링 이해하기 부분
0
42
2
모달 관련 질문
0
48
3
렌더링 관련 질문
0
86
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
70
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
69
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
81
2
npx prisma db push 시 에러가 뜹니다.
0
97
3
vercel 배포를 실패하였습니다.
0
112
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
65
2
getServerSideProps 함수와 SSR의 관계
0
85
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
66
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
119
2
일반적인 nextjs project architecture에 대하여..
0
95
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
76
2
배포 시 오류 발생
0
93
2
백엔드 서버 오류납니다.
0
89
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
97
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
112
1
[book]/[id]/page.tsx 모달 띄울 때 성능 하락 현상은 ReviewList를 불러오면서 발생하는 문제 같습니다.
0
66
2
빨간줄 설정
0
84
2
익스텐션 질문
0
62
1