렌더링(Rendering)이란?
서버로부터 HTML, CSS, javascript 문서를 받아 브라우저 화면에 표시하고 그리는 작업을 렌더링이라고 한다. 렌더링에 대해서는 이 전 글 '브라우저는 어떻게 동작하는가?'에서 자세하게 다뤄두었다.
그렇다면 CSR은 뭐고 SSR은 뭘까?
CSR(Client Side Rendering)
클라이언트 사이드 렌더링이란, 클라이언트 측에서 최초 1번만 서버에서 전체 페이지를 로딩하여 보여주는 방식이다. 그 이후에는 사용자의 요청이 올 때마다, 자원(Resource)을 서버에서 제공한 후, 클라이언트가 해석하고 렌더링하는 방식이다. CSR의 과정은 다음과 같다.
처음 웹 서버에 요청할 때, 데이터가 없는 문서를 반환한다.
HTML 및 static 파일들이 로드된다. 데이터가 있다면 데이터 또한 서버에 요청하여 화면(View)에 나타낸다.
브라우저가 서버에 HTML과 static 파일을 요청한 후 로드되면, 사용자의 상호작용에 따라 javascript를 통해 동적으로 렌더링한다.
필요에 따라 데이터를 서버에 요청해서 받아와 렌더링한다.
CSR 장점
네이티브 앱과 비슷한 빠른 인터렉션을 구현할 수 있다.
- 렌더링을 브라우저가 담당함으로써 서버 트래픽을 감소시키고, 사용자에게 더 빠른 인터렉션을 제공한다.
- 새로고침이 발생하지 않아 사용자가 네이티브한 앱과 비슷한 경험을 할 수 있다.
CSR 단점
초기 구동 시 첫 페이지 로딩 속도가 SSR에 대비해 느리다.
- 서버에 첫 요청 시 전체 페이지에 대한 모든 문서 파일을 받아오는 방식을 채택하다보니, SSR에 비해 로딩 속도가 느리다.
검색 엔진 최적화(SEO)에 대한 추가 보완 작업이 필요하다.
- 포털 사이트 검색엔진 크롤러가 웹 사이트에 대한 데이터를 제대로 수집하지 못하는 경우가 발생 할 수 있다. 구글의 검색 엔진의 경우 자바스크립트 엔진이 내장되어 있어 크롤링이 되지만, 네이버, 다음과 같은 경우 검색엔진이 제대로 크롤링하지 못하기 때문에 별도의 보완작업이 필요하다.
SSR(Server Side Rendering)
서버 사이드 렌더링이란, 전통적인 웹 어플리케이션 렌더링 방식으로 사용자가 웹 페이지에 접근할 때, 서버에 페이지에 대한 요청을 보내 HTML, View와 같은 자원(Resource)들을 어떻게 보여줄지 해석하고 렌더링 하여 사용자에게 반환해주는 방식이다. 웹 서버에 요청할 때마다 브라우저에서 새로고침이 일어나고 서버에 새로운 페이지에 대한 요청을 하는 방식이다.
SSR 장점
검색 엔진 최적화(SEO) 가능하다.
- SEO가 가능하다는 것은 성능과 별개로 트래픽에도 영향을 줄 수 있는 엄청난 장점이다.
초기로딩속도가 빠르다.
- 처음 렌더링된 HTML을 클라이언트에게 전달해주기 때문에 초기 로딩 속도를 줄일 수 있다. 또한 javascript 파일을 불러오고 렌더링 작업이 완료되지 않더라도 사용자가 콘텐츠를 이용할 수 있다.
SSR 단점
프로젝트의 구조가 복잡해진다.
- 단순 렌더링만 한다면 문제가 생기진 않겠지만, Redux, React Router 등 여러 라이브러리와 함께 연동하여 서버에서 데이터를 가져와 렌더링하는 상황이 발생한다면, 프로젝트가 많이 복잡해질 수 있다.
매번 페이지의 새로고침이 발생한다.
- SSR은 서버에 요청할 때마다 새로고침이 발생하게 된다. 매번 새로고침이 발생한다는 것은 서버와 잦은 응답을 한다는 의미이므로 자연스럽게 서버에 부담을 주게 된다. 서버에 부담이 간다면 당연히 성능은 악화될 것이다.
