[CS] 서버 사이드 랜더링 (SSR) VS 클라이언트 사이드 랜더링 (CSR)

1. 서버사이드 랜더링 과 클라이언트 사이드 랜더링 비교 정의

서버 사이드 랜더링 같은 경우 서버에 HTML 파일을 저장해 두었다가 요청이 발생하면

모든 파일을 브라우저에 전달하는 상식으로 정적 웹페이지라 보면 된다

초기 화면 로딩이 빠르고 검색엔진 SEO에 최적화 되어있고 인덱싱이나 크롤링에 최적화 되어 있다

또한 속도가 빠르고 서버 부담이 적지만 서비스가 한정적이고 내용변경이 어렵다

예로들면 회사소개, 음식메뉴, 포트폴리오 같은것에 사용된다

 

클라이언트 사이드 랜더링 같은 경우 보통 브라우저에서 자바스크립트를 사용하여 HTML 문서에

랜더링을 진행합니다 즉 요청 정보에 따라 HTML을 처리하여 전송해 동적 웹페이지라 보면 된다

상황에 맞게 변하는 모습과 관리가 쉽다는 장점이 있는데 대신 보안에 취약하고 검색엔진 최적화가

어렵다고 볼 수 있다 이와 같은 방식은 Vue.js 와 React.js의 등장으로 인기를 끌었다

예로들면 블로그, 게시판, 날씨정보 같은것에 사용 된다

 

2. 보기좋게 정리

서버 사이드 랜더링 장점	- 검색 엔진 SEO에 최적화 - 초기 화면 로딩이 빠름 - 정적인 사이트에 좋음
서버 사이드 랜더링 단점	- 잦은 서버 요청 - 전체적으로 느린 페이지 랜더링 - 모든 페이지를 리로딩 - 사이트 상호 작용의 부족
클라이언트 사이드 랜더링 장점	- 사이트 상호 작용 활발 - 초기 로딩 이후 빠른 웹사이트 랜더링 - 웹 애플리케이션에 좋음 - 자바스크립트 라이브러리 활용
클라이언트 사이드 랜더링 단점	- 제대로 구현하지 않을 경우 SEO가 취약함 - 초기 로딩에 더 많은 시간이 걸림 - 대부분의 경우 추가적인 라이브러리를 필요로 함