서버 사이드 랜더링(SSR)과 클라이언트 사이드 랜더링(CSR)

서버에서 페이지 html을 완성해 클라이언트에 전달하면 서버사이드 렌더링,

클라이언트에서 페이지HTML을 완성해 클라이언트에 전달하면 클라이언트 사이드 렌더링입니다.

 

구체적으로 뜯어봅시다.

 

서버사이드 렌더링 (SSR)
서버에 HTML 파일을 저장해두었다가 요청이 발생할 때마다 전체 파일을 브라우저에 전달하는 방식

 

과정

웹사이트를 방문했을 때
1. 브라우저가 서버에 웹사이트 내용 요청
2. 이 요청을 서버가 처리 (랜더링)
3. 요청처리 완료되면 브라우저는 랜더링된 HTML을 가져와서 화면에 표시 

 

특징

• HTML 최종 결과를 서버에서 만들어서 웹 브라우저에 전달
• 초기화면 로딩이 빠르되, 모든 콘텐츠를 리로딩하므로 정적인 사이트에 좋습니다.
• 관련기술 : JSP, 타임리프 ➡️ 백엔드 개발자

문제는 요청 발생할 때마다 웹 사이트 정보 전체를 요청하여 모든 HTML을 매번 로딩한다는 것입니다.
단지 특정 기능을 실행하려고 클릭해도 사이트 전체가 다시 로딩되어야하는 문제가 발생합니다.

 

클라이언트 사이드 렌더링 (CSR)
서버에서 HTML파일을 처리하지 않고, HTML 결과를 브라우저의 자바스크립트를 통해 동적으로 생성하여 랜더링을 진행하는 방식 

 

차이점은 서버에 문서를 요청하는게 아닌, 브라우저에서 이를 처리한다는 점입니다.

• 브라우저에서 자바스크립트를 사용해 콘텐츠(HTML 결과)를 랜더링하는 것 
• 즉, HTML 문서 자체에 모든 내용이 저장되는 것이 아니라, 자바스크립트를 통해 새로운 결과를 불러오고 삭제한다. (동적)

과정

즉, 웹사이트에서 
1. 사용자가 '클릭'하거나 동작을 실행
2. 더 많은 페이지 요소가 추가되거나 부분부분 변경이 된다. (동적으로)

 

 

특징

• 주로 동적인 화면에 사용, 웹 환경을 마치 앱 처럼 필요한 부분부분 변경할 수 있습니다.
• 새로운 콘텐츠를 표시하기 위해 전체 페이지가 아닌 웹페이지의 아주 일부만 불러오기 때문에 속도 면에서 우수합니다.
• But 웹 규모가 커짐에 따라 필요한 자바스크립트도 증가하여 페이지가 무거워질 수 있습니다.
• 관련 기술 : React, Vue.js

---

 

 

출처

https://oneroomtable.tistory.com/

https://seoramyeon.tistory.com/72?category=798998