SSR과 CSR

고은찬·2021년 6월 25일
0

SSR (ServerSideRendering)

SSR이란 단어 그대로 서버에서 렌더링 작업을 하는것을 의미한다.
기존에 존재하던 방식으로 사용자가 웹페이지에 접근할 때 서버에서 페이지에 대한 요청을 하며 서버에서는 html, view와 같은 리소스들을 어떻게 보여질지 해석하고 렌더링하여 사용자에게 반환시킨다.

CSR (Client Side Rendering)

CSR이란 최초에 1번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다, 리소스를 서버에서 제공한후 클라이언트가 해석하고 렌더링을 하는 방식이다.
Angular js, Backbone js 같이 SPA개발이 쉬운 js프레임워크가 등장했다.

SSR과 CSR의 차이점

차이점으로는 크게 초기 렌더링속도, SEO, 보안으로 볼 수 있다.

CSR의 경우 사용자의 행동에 따라 필요한 부분만 다시 읽어 들이기 때문에 서버 측에서 렌더링하여 전체 페이지를 다시 읽어 들이는 것보다 빠른 반응속도를 기대할 수 있다.

SSR을 한다 하더라도 Ajax 기능을 위해 클라이언트 렌더링 요소가 포함될 수 밖에 없다. 클라이언트 측에서 렌더링을 하게 되면 SSR이 따로 필요하지 않기 때문에 일관성 있는 코드를 작성 할 수 있다.

CSR은 페이지를 읽어들이는 시간, 자바스크립트를 읽어들이는 시간, 자바스크립트가 화면을 그리는 시간까지 모두 마쳐야 콘텐츠가 사용자에게 보여지기 때문에 초기 구동속도가 느리다.
초기 구동속도를 제외하고는 빠른 반응을 보여줍니다.

반대로 SSR의 경우 서버에서 view를 렌더링하여 가져오기 때문에 view를 보기까지 초기 구동속도가 빠르다.

profile
연애하는 개발자

0개의 댓글