TIL | SSR 과 CSR - 웹 페이지 렌더링 방식

 

 

SSR (Server-Side Rendering) 

 

: 웹 페이지의 초기 로드 시 서버에서 페이지의 내용을 렌더링하고,

  완전한 HTML 문서를 생성한다음 클라이언트에게 전달하는 방식

 

• 장점
  • 클라이언트 요청마다 서버에서 새로운 HTML을 생성하여 전달하므로 검색 엔진 최적화(SEO)에 유리함
  • 초기 로딩 시 화면에 빠르게 내용이 표시되므로 사용자 경험이 개선될 수 있음
• 단점
  • 페이지 전환 시 마다 서버 요청이 발생하므로 네트워크 지연이 있을 수 있음

 

 

 

 

CSR (Client-Side Rendering ) 

 

:  초기 로드 시 빈 페이지를 렌더링하고, 페이지의 내용은 JavaScript 를 통해 동적으로 클라이언트에서 생성되는 방식

  초기 JS와 페이지 구조가 다운로드되면, 사용자의 상호작용에 따라 필요한 데이터만 서버에서 받아와 페이지를 업데이트

 

• 장점 
  • 페이지 전환 시 빠른 전환이 가능하며, 앱과 유사한 부드러운 경험 제공 
• 단점
  • 초기 로딩속도가 느릴 수 있으며, 검색 엔진 최적화에는 추가작업이 필요할 수 있음

 

 

" 앱과 유사한 부드러운 경험 " 이란?

사용자 상호작용에 빠르게 응답하고 화면 갱신이 부드럽게 이루어지는 경험
-> CRS 방식에서 초기 페이지 로드 후에 클라이언트 측 JavaScript 코드가 실행되며,
    페이지의 상태와 데이터를 서버에서 받아와 동적으로 업데이트 하는 방식 



# 앱과 유사한 부드러운 경험을 제공하기 위한 주요 특징


1. SPA(Single Page Application)
단일 페이지 애플리케이션은 페이지를 전환할 때 새로운 페이지를 서버에서 가져오지 않고도, 필요한 부분만 동적으로 업데이트하여 보여줌으로써 페이지 전환 속도가 빨라지고, 사용자는 화면이 깜박거리거나 로딩이 발생하지 않는 부드러운 경험을 얻을 수 있음

2. Routing
클라이언트 측 라우팅을 통해 URL  변화에 따라 필요한 컴포넌트만 로드하고 화면을 업데이트할 수 있음
이는 페이지 간 전환을 빠르게 만들어주며, 사용자가 더 나은 탐색 경험을 얻을 수 있음

3. 상태관리
클라이언트 측에서는 애플리케이션의 상태를 효과적으로 관리하여 화면 갱신을 관리함
이로 인해 데이터의 변화에 따라 필요한 부분만 업데이트되며 화면이 부드럽게 갱신됨

4. 비동기 데이터 로딩
필요한 데이터는 사용자가 요청하는 시점에 비동기적으로 로드됨 
이로써 초기 페이지 로딩 시간이 단축되고, 필요한 데이터만 받아와서 화면이 빠르게 구성됨

 

 

이러한 기술적인 요소들이 함께 작용하여 클라이언트 측 렌더링방식(CSR)은 사용자에게 앱과 유사한 부드러운 경험을 제공함