클라이언트 사이드 렌더링의 개념
모바일의 수요와 환경이 폭발적으로 증가함에 따라, 모바일 웹에 대한 니즈가 증가하였고 성능 최적화에 대한 이슈가 발생하게 되었다. 이는 PC에 비해 성능이 낮았기 때문에 기존 방식과는 다른 접근이 필요해졌다. 그래서 Single Page Application(SPA)가 등장하게 되었다.
Single Page Application
SPA는 브라우저에 로드된 후 페이지 전체를 서버에 요청하는 것이 아니라 처음 한번 페이지 전체를 로딩한 이후, 데이터만 변경하여 사용하는 방식이다. 과거의 방식으로는 페이지를 이동할 때에, 새로고침이 일어나며 페이지를 로딩할 때 마다 서버로부터 데이터를 받아 해석하고 화면에 렌더링하는 방식이었기 때문이다.
그러므로 SPA는 트래픽을 감소시켜 DB에 과부화가 적어지고, 깜빡이는 것이 없고 더 나은 성능으로 인해 사용자에게 더 나은 경험을 주는것이 가능했다. 서버는 단지 JSON 파일만 보내주었고, 클라이언트 측에서는 JS파일을 이용하여 동적으로 HTML 요소를 생성해서 페이지를 업데이트 하는 방식으로 관리를 하게 된 것이다. 이것이 바로 Client-side Rendering(CSR)이다.
Angular, React, Vue 와 같은 유명한 프레임워크들이 사용하고 있는 방식이다.
클라이언트 사이드 렌더링의 흐름
서버에서 index 라는 html 파일을 클라이언트에 보내주면, html 파일에는 어플리케이션에서 필요한 자바스크립트의 링크만 있다. 그러므로 처음 페이지에 접속하면 빈 화면만 보이게 되고, 서버로부터 app.js 파일을 다운로드 받게 되는데 어플리케이션에서 필요한 로직들 뿐만 아니라 어플리케이션을 구동하는 프레임워크, 라이브러리들도 포함되어있다. 그러므로 사이즈가 커서 다운로드 받는 시간이 오래걸린다. 만약 데이터가 필요하다면 추가로 데이터를 서버에 요청 후, JSON파일을 서버로부터 받아 동적으로 html을 생성해서 보여주게 된다.
클라이언트 사이드의 단점
-
위에서 언급했듯이 처음 사이트에 접속할 때 모든 필요한 데이터를 한번에 받기 때문에 다운로드 시간이 오래걸린다. 그러므로 유저가 첫 화면을 보기까지 시간이 오래 걸릴 수 있다는 단점이 있다.
-
검색 엔진 최적화 문제 (Low Search Engine Optimization)
구글, 네이버와 같은 검색엔진들은 서버에 등록된 웹 사이트들을 하나씩 돌아다니면서 웹 사이트의 html 문서를 분석해서 검색어로 검색될 수 있는 키워드를 찾거나 링크들을 찾아서 검색엔진에 등록하는 방식이다. 이러한 방식으로 우리가 검색어로 검색할 때, 원하는 웹 사이트들을 빠르게 찾아줄 수 있게 해준다.
하지만, CSR에서 사용되는 html body는 대부분 비어있기 때문에 검색엔진이 CSR로 작성된 웹 페이지를 분석하는데 어려움이 있다.
Server Side Rendering
1990년에 사용된 Static Sites 방식에 영감을 얻어 SSR방식이 도입된다. 서버에서 필요한 데이터를 모두 가져와서 html 파일을 만들고, 만들어진 html 파일을 동적으로 제어할 수 있는 소스코드와 함께 클라이언트에게 보낸다. 그렇게 되면 클라이언트 쪽에서 html문서를 받아서 바로 유저에게 보여줄 수 있게 된다.
서버 사이드 렌더링의 장점
-
위와 같이 클라이언트 사이드 렌더링 방식보다 처음 서버에 요청하는 데이터의 양이 상대적으로 적기 때문에 첫 번째 페이지 로딩이 빨라진다는 장점이 있다.
-
모든 컨텐츠가 HTML에 담겨져 있기 때문에 Low SEO 문제가 없다.
서버 사이드 렌더링의 단점
-
영감을 받은 Static Sites에서 발생한 단점인 html 파일을 새로 받아올 경우 블링킹 이슈가 유저에게 좋지 않은 경험을 준다는 점인데, 서버 사이드 렌더링의 경우도 유저가 다른 페이지의 데이터를 요청하는 순간, 서버에 웹 사이트를 다시 서버에서 받아와야하기 때문에 블링킹 이슈가 남아있다.
-
서버에 과부하가 걸리기 쉬워진다. 유저가 많을수록, 사용자가 데이터를 요청할 때마다 서버에 요청해서 서버에서 필요한 데이터를 가지고 와 html을 만들어야 하므로 서버에 과부하가 걸리기 쉬워지는 것이다.
-
사용자가 빠르게 웹 사이트를 볼 수는 있지만, 동적으로 처리하는 JS파일은 아직 다운받지 못해서 다른 동적인 기능들을 사용할라고 해도 반응이 없는 경우가 생길 수 있다.(버튼을 눌러도 아무런 반응이 없는 그런 것들)
