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

하율찬·2022년 7월 25일
0

기술면접스터디

목록 보기
3/10

정리
CSR:
서버한테서 받아온 정보들을 갖고 사용자의 브라우저가 셀프로 페이지 내용들을 나타내는 방식이다.
마치 직접 불판을가져다가 손님들이 직접 원하는 종류의 고기를 굽는 방식에 비유할 수 있습니다.
기존 동적 웹사이트처럼 링크를 클릭할때마다 다른 페이지로 이동하는 것이 아니라 하나의 페이지에서 JS를 사용해서 HTML요소들을 동적으로 바꿔주는 한페이지에서 모든게 다되는 방식입니다.
하지만 어느정도 데이터가 무거운 사이트를 만들게되면 처음에 화면이 로딩되는 속도가 다소 느립니다. 연속된 렌더링으로 인한 과부하를 줄일 수 있다.

SSR:
하나의 페이지가아닌 각각의 페이지가있어 서버에서 한번에 데이터를 받아오는 방식이아닌 각각의 페이지가 필요할때마다 서버에 요청을하여 데이터를 받아 렌더링하는 방식이다.
이미 서버에서 렌더링되어 고정된 HTML CSS 이미지 파일 등을 받아서 그냥 띄우기만 하면된다. 마치 진열된 상품을 바로 먹을 수 있는 편의점과 같다.
초기 렌더링 속도가 빠르다.
JS를 이용한 렌더링이 아니므로 SEO(검색 엔진 최적화)가 가능하다.
=> HTML에 모든 컨텐츠가 저장되어 있음.

profile
함께 일하고 싶어지는 동료가 되기를 원하는 프론트엔드 개발자입니다.

0개의 댓글