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

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

우선 CSR의 경우에는 FCP시점까지 다음의 소요 시간이 필요합니다.

• 브라우저가 서버로부터 HTML을 전달받는 시간

• 브라우저가 서버로부터 JS Bundle을 전달받는 시간

• 브라우저가 JS Bundle을 실행하는 시간

반면 SSR의 경우에는 FCP 시점까지 다음의 소요 시간이 필요합니다.

• 서버가 JS Bundle을 실행하는 시간

• 브라우저가 HTML을 전달받는 시간

SSR은 CSR과 달리 "브라우저가 서버로부터 JS Bundle을 전달받는 시간"이 필요하지 않습니다. 적어도 FCP 시점까지는 말이죠, 따라서 FCP 까지는 SSR이 CSR보다 대체로 빠르게 동작한다고 보시면 될 것 같습니다.

이때 "서버측에서 JS Bundle을 실행하는데 시간이 오래 걸리게 될 경우는 어떻냐" 라고 반문하실 수 있는데요, 서버측에서 JS Bundle을 실행하는데 걸리는 시간이 오래걸린다면 CSR 역시 마찬가지로 브라우저에서 JS Bundle을 실행하는데 걸리는 시간이 오래걸릴 것 입니다. 결국 SSR이나 CSR 모두 JS Bundle을 어디선가 실행해야 하는건 마찬가지이므로 FCP 시점의 차이는 발생하지 않습니다.

또 이후에 배우시겠지만 Next.js에서는 사전 렌더링, 즉 JS Bundle을 서버측에서 실행해 HTML 페이지를 생성하는 작업을 빌드타임에 미리 수행할 수 있는 SSG 라는 새로운 방식도 추가 제공합니다. 이를 통해 FCP를 더 극단적으로 단축할 수도 있다는 점도 추가로 알려드립니다.

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

Next.js에서 서버 측 렌더링(SSR)을 활용하여 동적인 데이터를 처리할 때 초기 로딩 속도에 대한 궁금증을 가지고 계신 것 같습니다.

1. SSR과 초기 로딩 속도

   • SSR은 서버에서 HTML 문서를 완전히 구성해 클라이언트로 전송합니다. 이는 페이지 렌더링을 사용자 브라우저가 아닌 서버에서 처리하므로 초기 화면이 사용자에게 더 빠르게 보여질 수 있습니다.
     
   • 하지만, API 요청이나 동적 데이터 처리를 위해 서버에서 수행하는 추가 작업 때문에 서버의 응답 시간이 자연스럽게 길어질 수 있습니다. 이러한 상황에서 API 응답 시간이나 서버 성능에 따라 속도가 영향을 받을 수 있습니다.
     

2. CSR(클라이언트 사이드 렌더링)과의 비교

   • CSR은 클라이언트 측에서 JS를 이용하여 HTML을 구성합니다. 페이지 로드 후 데이터를 Fetching하여 화면을 구성하므로 초기에는 ‘스켈레톤 화면’이 먼저 보일 수 있습니다.
     
   • 반면, SSR은 완성된 페이지를 처음부터 제공하므로 직관적으로 더 빠르게 느껴질 수 있습니다. 그러나 이는 서버 처리 시간에 따라 달라질 수 있으며, 만약 다수의 복잡한 API 호출이 필요하다면 CSR보다 더 느릴 수도 있습니다.
     

관련 질문과 추가 정보

SSR과 CSR의 장단점 및 실행 속도에 관한 부분을 심도 있게 다룬 내용은 아래 링크에서 참고하실 수 있습니다.

• SSR과 CSR 차이점 및 로딩 속도 - 송이님의 질문과 Winterlood님의 답변
  

SSR이 모든 상황에서 항상 빠른 것은 아닙니다. 특히, 서버에서 처리해야 할 동적 데이터가 많거나 복잡한 경우 비용과 성능 측면에서 주의가 필요합니다. 초기 데이터의 중요성 및 페이지의 특성에 따라 SSR을 사용할지 결정하셔야 합니다.

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