서버사이드 렌더링, 클라이언트사이드 렌더링

Node.js를 사용하여 웹 프로젝트를 공부하다 보면 들을 수 있는 단어가 있다.

 

서버사이드 렌더링, 클라이언트 사이드 렌더링이다.

 

이 개념을 알고 있다면, 목적에 맞는 웹페이지 개발 방법을 선택해 최적화를 이루는데 도움이 될 것이다.

 

서버사이드 렌더링(SSR)

 

웹 애플리케이션에서 페이지의 초기 로딩을 서버에서 처리하는 방식으로, 클라이언트에게 페이지를 전송하기 전에 서버에서 해당 페이지의 HTML을 생성하고 클라이언트에게 제공하는 방법.

 

장점

1. 검색엔진 최적화

클라이언트 사이드 렌더링은 빈화면으로(빈 HTML) 시작하기에 검색엔진이 이를 인식하지 못하는 반면 서버사이드 렌더링은 완성된 페이지를 인식하기 때문에 검색엔진 최적화에 유리함.

예를 들어 빠른 관심이 필요하거나, 화제가되어야하는 상품을 판매하는 등의 경우에 유리할 수 있음.

 

2. 초기로딩 속도 개선

완성된 HTML을 서버로 부터 받기만 하면 되기에 초기 로딩속도가 빠름.

 

3. 사용자 경험 개선

마찬가지로 완성된 화면을 전송받기 때문에 화면 깜빡임이 없고, 데이터를 미리 불러와서 준비해둘 수 있기 때문에 부ㄹ드러운 사용겸험을 줌.

 

단점

 

1. 서버 부담 증가

서버에서 처리하는 데이터 양이 많아져 서버의 부담이 증가함. 클라우드 서비스를 이용하는 경우 부담이 . 더 커질 . 수있음.

네트워크 대역폭도 많이 잡아먹기에 요금을 정확히 개산할 필요 있음.

 

2. 호환성

사용자 측의 자바스크립트가 활성화되어 있어야함. 이에 다양한 웹브라우저를 지원하지 않을 가능성이 있음

 

기타

 

보안

보안관련 기능은 서버에서 모든 데이터를 처리하기 때문에 크로스사이트스크립팅과 같이 악성 사용자로 부터의 외부스크립트 사용에는 강한 보안을 자랑하지만, 하나의 서버에서 모든 데이터를 처리할 경우 이 서버가 공격당하면 모든 사용자의 정보가 위험해질 수 있음.

 

크로스사이드렌더링(CSR)

서버사이드랜더링과 반대로 클라리언트 측면에서 페이지를 랜더링하는 방식

서버는 최소한의 html, 자바스크립트만 제고아고, 클라이언트는 필요한 데이터를 받아와 동적으로

클라이언트 측에서 렌더링을 진행

 

장점

 

1. 사용자 경험

서버사이드 랜더링이 깜빡임이 없고, 빠른 ㄹ로딩 속도를 보여준다면 클라이언트 사이드랜더링은 부드러운 전환에 감함

클라이언트 측에서 렌더링을 진행하기 때문에 필요한 부분만 업데이트하여 불필요한 페이지 리로딩을 줄일 수 있음.

 

2. 낮은 서버부하와 비용

서버는 최소한의 데이터만 제공하고, 클라이언트 측에서 렌더링을 진행하기에 서버의 부하가 낮고 비용이 적게 든다는 장점이 있다. 

 

단점

 

서버사이드 렌더링의 장점이. 단점이 됩니다.

 

1.검색엔진 최적화 불리

초기에 빈화면이 로드되기 때문에 검색엔진이 내용을 인식하지 못해 검색엔진 최적화가 어려움

 

2. 보안 문제

클라이언트 사이드 렌더링은 외부 자바스크립트 파일을 다운받고 실행하는데 이 부분에서 보안취약점이 바생할 수 있음

해커에 의해 변조된 파일을 다운로드 받거나, 전송되는 데이터를 탈취당할 위험이 있음.