개념정리

CSR과 SSR의 차이점과 특징

FRDYtheme 2023. 10. 31. 18:25

각 CSR(Client-Side-Rendering)과 SSR(Server-Side-Rendering)으로 웹 애플리케이션을 구축하는 두 가지 주요한 방식.

 

CSR의 특징

1. 클라이언트 중심 렌더링: HTML 및 JavaScript 파일을 클라이언트(브라우저)로 다운로드한 후, 브라우저에서 JavaScript를 사용하여 페이지의 렌더링을 처리한다.

 

2. 초기 로딩 시간: 페이지 초기 로딩 시간이 느릴 수 있지만 로딩 이후 반응이 빠르기 때문에, 사용자 경험을 향상시킬 수 있다.

 

3. 빠른 네비게이션: 페이지가 로드된 후, 클라이언트에서 페이지 전환 또는 라우팅이 빠르다, 비동기 요청을 통해 데이터를 가져오는 방식을 사용할 수 있다.

 

4. SEO 어려움: 검색 엔진 최적화에 어려움이 있을 수 있으며, 추가적인 작업이 필요하다.

 

SSR의 특징

1. 서버 중심 렌더링: 서버에서 페이지의 HTML을 동적으로 생성하고 클라이언트에 전달하며 클라이언트는 렌더링된 HTML을 브라우저에 표시한다.

 

2. 초기 로딩 시간: 페이지 초기 로딩 시간이 빠르지만, JS파일이 읽히기 전이므로 기능을 이용할 수 없다.

TTV(Time to View)와 TTI(Time to Interact)의 시간 간격이 존재함.

 

3. SEO 용이: 검색 엔진에서 페이지의 콘텐츠를 쉽게 파악하며, SEO에 유리하다.

 

4. 서버 부하: 서버가 페이지의 HTML을 동적으로 생성하므로 서버 부하가 발생할 수 있다.

 

5. 초기 렌더링이 완료된 HTML 제공: 첫 번째 로드 시에 이미 렌더링된 HTML이 전송되므로 클라이언트 측에서 추가 렌더링이 필요 없다.

 

'개념정리' 카테고리의 다른 글

쿠키와 세션의 특징  (1) 2023.10.31
attribute와 property의 차이  (0) 2023.10.31
CORS? Cross-Origin-Resource-Sharing에 대해  (0) 2023.10.31
브라우저의 동작 원리  (0) 2023.10.31