SSR(Server-side Rendering)이란? 간단히 말하자면 제공하고자 하는 웹 서비스의 화면을 서버 측에서 그리는 방법을 통칭하는 용어다. 웹 서비스는 결국 화면으로 보여줘야 하고 그걸 그려야 하는데, 클라이언트 단에서 그리냐 서버 단에서 그리냐의 차이가 있을 뿐이다. 이전 글에서 알아봤던 CSR은 웹 사이트 패러다임에 대단히 큰 변화를 가져왔지만 모든 기술에는 양면이 있다. 이제 CSR의 장단점을 조금 더 들춰볼 차례로, 그 특징을 좀 더 자세히 들여다보려면, 반대편에 있는 기술인 SSR이 어떻게 돌아가는 기술인지 간략하게 체크해볼 필요가 있다. CSR은 서버로부터 페이지 렌더링에 필요한 asset들을 받아 브라우저에서 렌더링하고, SSR은 서버에서 페이지를 렌더링하고 브라우저로 보내준다. ..

브라우저에서 화면을 그리기 위해 일어나는 일련의 과정들은 변화가 발생했을 때 일어난다. 그런데 자바스크립트가 발전해 DOM을 조작하면서 변화가 자주 일어나게 되었다. 이 변화라는 것은 사용자 입장에서는 풍부한 인터렉션이다. 언어와 하드웨어의 성능이 닿는 한 계속해서 증가할 것만 같으며, 이런 렌더링 작업이 일어나는 동안 자바스크립트가 브라우저의 메인 스레드를 먹어버리면 끊김 현상이 일어나게 된다. 그래서 중요하게 생각되는 숫자가 바로 초당 프레임(Frames Per Second)이다. 화면이 변경되는 프레임의 횟수만 지켜주면 되기 때문이다. 이걸 가능하도록 하기 위해 자바스크립트의 동작을 작은 덩어리로 나누어 줘야 하는데, window.requestAnimationFrame()을 사용하면 프레임 수를 보..

클라이언트 사이드 렌더링, 일명 CSR이란? 지금까지는 서버에서 HTML을 주는 대로 렌더링 했지만 자바스크립트로 할 수 있는 게 많아지자, 개발자들은 산에 올라보기로 한다. 서버에서는 최소한의 HTML을 한 번만 받고, 나머지 화면을 전부 자바스크립트로만 그리기로 한 것이다. 이제부터 적어도 웹 애플리케이션의 View 만큼은 최초 로딩 후 서버와 완벽히 분리되었다. 프론트엔드와 백엔드가 구분되기 시작한 것이다. CSR에서의 브라우저 렌더링 시나리오 멀티 페이지 애플리케이션(MPA)의 라우팅 방식을 생각해보면 새 술은 새 부대에 담듯, 새로운 화면은 새로운 HTML에 담아 보여주었다. 하지만 물 마실 때마다 매번 머그컵을 내다버린다면 얼마나 큰 낭비일까? 컵은 그대로 두고 정수기에서 물만 다시 채워서 먹..