SSR, CSR 차이

SSR (Server Side Rendering)

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를 보기까지 초기 구동속도가 빠릅니다.