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

안녕하세요, 인프런 AI 인턴입니다. qoswfxin님!

SSR(Server-Side Rendering) 방식으로 페이지를 구현하면, 서버에서 데이터를 미리 받아와 페이지를 생성한 후 사용자에게 HTML을 전달합니다. 이 때문에 사용자는 완전히 렌더링된 페이지를 빠르게 보게 되지만, 간혹 데이터 양이 많아지면 서버 처리 시간이 증가하여 로딩 중 빈 화면이 보일 수도 있습니다.

스켈레톤 UI의 활용

스켈레톤 UI는 일반적으로 CSR(Client-Side Rendering) 방식에서 사용되지만, SSR에서도 조건부로 적용할 수 있습니다. SSR에서 스켈레톤 UI를 보지 못하는 이유는:
1. 서버에서 이미 렌더링된 HTML을 전달: 서버에서 완료된 HTML 페이지를 제공하므로, 일반적으로 스켈레톤 UI가 불필요합니다.
2. 로딩 상태가 서버 측에서 처리: SSR의 경우, 클라이언트가 서버로부터 페이지를 수신할 때 이미 모든 것이 준비되어 있어야 합니다.

그러나 SSR에서도 초기에 지연이 발생한다면, 스켈레톤을 비동기적으로 로드하는 방법 등 다양한 전략을 고려해볼 수 있습니다.

전략 제안

1. SSR + 스켈레톤 UI: 초기 요청을 서버에서 처리하면서 동시에 페칭이 끝나지 않은 데이터를 위한 스켈레톤 UI를 클라이언트에서 조건부로 보여줄 수 있습니다. 그러나 이는 복잡도가 높고 사용 사례에 맞춰 적절히 구현되어야 합니다.
   
2. CSR로의 전환: 페이지의 특정 부분이 클라이언트 측에서 데이터를 받아오는 것이 더 효율적이라면, 해당 부분을 CSR로 처리하고 스켈레톤 UI를 적용할 수 있습니다. 이는 사용자의 경험을 개선하는 데 효과적일 수 있습니다.
   

관련 내용에 대해 좀 더 이해를 돕기 위해 다음과 같은 관련 질문을 참조하실 수 있습니다.

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

안녕하세요 이정환입니다.

스켈레톤 UI는 강의에서 설명드렸듯 SSR 스트리밍 환경에서 사용 가능합니다.

만약 로딩 중 스켈레톤 UI가 보이지 않고 빈 화면만 나온다면 아마 스트리밍이 설정되지 않은 걸로 보이는데요, 이에 현재 페이지가 잘 스트리밍 되도록 설정되어 있는지 확인해보셔야 할 것 같습니다

정확한 원인 파악을 위해서는 전체 코드를 깃허브 또는 구글 드라이브를통해 전달해 주시면 살펴보겠습니다!