브라우저렌더링 SSR과 CSR 의 차이점

브라우저 랜더링은

 

브라우저가 서버로부터 , HTML  CSS JavaScript 문서를 전달받아

브라우저 엔진이 각문서를 해석해  브라우저 화면을 그려주는것 

 

브라우저 랜더링은 크게  두가지 가 있다.

서버사이드 렌더링 SSR 과  클라이언트 렌더링 CSR

 

 

• 서버 사이드 렌더링 Server Side Rendering

클라이언트 [브라우저]가 서버에 매번데이터를 요청하여 서버에서 처리하는 방식 . 

클라이언트 요청이 들어올때마다 매번 서버에서 새로운화면 (View)을 만들어 제공

서버가 화면을 그리는 주체가됨

 

장점 : 

첫페이지 로딩속도가 클라이언트 사이드 렌더링에 비해 더빠름 

 

=>검색엔진 최적화 (SEO)가 가능.

 

단점:

초기 로딩이후 페이지 이동속도가 다소 느리다

=>페이지 이동시마다 클라이언트 서버에게 필요한 데이터를 요청하고

서버가 응답해주는 방식이라 속도가 다소 느림

 

 

• 클라이언트 사이드 렌더링 Client Side Rendering

장점:

네이티브 앱과 비슷한 빠른 인터렉션을 구현할 수 있다.

 

View 렌더링을 브라우저에게 담당시킴으로써 서버 트랙픽을 감소

사용자에게 더 빠른 인터렉션을 제공해줌

새로고침이 발생하지않아 사용자가 네이티브 앱과 비슷한 경험을 할수있음.

 

단점:

첫 페이지 로딩 속도가 서버 사이드 렌더링에 비해 다소 느림

서버에 첫요청시 전체페이지에 대한 모든 문서 파일읋 받다보니 서버 사이드 렌더링보다  로딩속도가 느림

검색엔진 최적화 에 대한 추가 보완 작업이 필요함

=>포털사이트 검색엔진 크롤러가 웹사이트에 대한 데이터를 제대로  수집하지 못하는 경우가 발생

구글의 검색엔진의 경우 자바 스크립트 엔진이 내장되어있어

크롤링가능 /  네이버 다음의 경우 검색엔진이 제대로 크롤링하지못함

별도의 보완작업이 필요