렌더링 방식의 변천사

시작하며...

렌더링 방식은 웹브라우저의 발전과 함께 변화해왔다. 예전에는 서버에 html 파일과 css 파일, js 파일을 저장해놓고 클라이언트가 요청하면 하니씩 주는, 고전적인 방식을 사용했다면 요즘에는 CSR, SSR 등의 방법들을 사용하며 계속해서 발전해나가고 있다. 오늘 포스팅에서는 이런 방식들 하나하나에 대해 시간 순서대로 알아보고자 한다.

<이런 렌더링과는 다른 방향의 렌더링이다..>

Static Sites

렌더링의 첫 시작은 바로 정적인 사이트, 즉 static sites이었다. 1990년대 중반까지 웹사이트의 대부분을 차지하던 이 방식은 사용자가 url을 주소창에 입력하여 서버 측으로 어떤 html 파일이 필요한지를 요청 보내면 서버 측에선 이미 등록되어있는 html 파일 중에 사용자가 요청한 html파일을 보내서 렌더링 시켜주는 방식이었다. 이렇게 static sites로 작동하는 웹페이지는 Blinking Issue도 있고, UI 상으로도 좋지 않은 문제를 가지고 있었다.

<지금 보면 단순해 보이지만, 그때는 이게 주류였다>

iframe

위와 같은 static sites의 문제를 해결하기 위해 1996년에 iframe이라는 기술(태그)이 도입된다. 페이지 내에서 부분적으로 문서를 받아와 업데이트하는 방식의 iframe 태그는 현재도 내 현재 페이지에서 다른 페이지를 불러오는 작업을 할 때 많이 쓰인다.

<이렇게 페이지 안의 페이지를 나타내기 위해 쓰인다>

XMLHTTPRequest

1998년에 현재도 우리가 쓰고 있는 fetch API의 원조,라고 볼 수 있는 XMLHTTPRequest가 등장한다. 이 기술이 적용되면서 서버에서 html 파일 전체가 아니라 필요한 데이터, 즉 JSON 파일만 받아와 JavaScript를 통해 페이지를 렌더링할 수 있게 되었다. 즉, 동적으로 페이지를 업데이트 할 수 있게 된 것이다.

<훗날, 우리가 아~주 많이 쓰고 있는 무언가로 불릴 XMLHTTPRequest..>

AJAX

바로 위의 XMLHTTPRequest가 널리 쓰이게 되면서, 이 방식은 2005년부터 AJAX라는 이름으로 불리게 된다. AJAX의 대표적인 예시로 들 수 있는게 구글의 서비스인데, 그들은 AJAX를 이용하여 GMAIL과 Google Maps 등의 서비스를 만들었다. 사용자가 한 페이지에 머무르며 중간중간 필요한 데이터를 서버에서 받아와 부분적으로만 업데이트하는 방식, 즉 현재 우리가 SPA라고 부르는 방식이 이렇게 탄생하게 되었다. 덤으로 AJAX 방식 덕분에 웹사이트의 사용자 이용성 또한 많이 발전하게 된다.

<위의 XMLHTTPRequest가 변신!한 AJAX...생겨나주어서 고마워!>

SPA

사용자들의 PC 사양이 향상되고, software의 성능 또한 좋아지면서 웹사이트가 사용자의 요청을 힘들이지 않고 처리할 수 있게 되었다. 또한 JavaScript가 표준화되면서 Angular, View, React 등의 프레임워크와 라이브러리가 발전하였고, 이에 SPA(Single Page Application)를 할 수 있는 CSR 방식이 등장하게 된다.

CSR

CSR(Client Side Rendering) 이란 클라이언트 상에서 동적 페이지에 대한 대부분의 것을 컨트롤하는 방식이다. 이 방식은 처음에 서버에서 index.html 파일을 받아오는데, 이 html 파일은 특이하게도 텅 비어있고, 중간에

<script src = "app.js"></script>

이란 코드 한 줄이 적혀있다(물론 이 코드 한 줄만 적혀 있는건 아니고, 몇 줄 안되는 코드 중 제일 중요한 코드가 이 코드이다). 즉 html 파일을 실행시키면 빈 화면만 뜬다는 의미인데, 그러면 페이지에 대한 나머지 정보들은 어디 있을까? 바로 app.js 라는 JavaScript 파일이다. 이 app.js에는 웹에서 필요한 로직과 웹을 구동하는 프레임워크의 소스코드까지 들어있는데, 클라이언트는 이 app.js와 앞서 잠깐 언급했던 JSON 파일을 받아와 동작하게 된다. 이렇게 하면 전의 방식에서 나타났던 문제점이었던 Blinking Issue가 해결되고, 사용자 친화적인 웹페이지를 만들 수 있다는 장점이 있다.

CSR의 문제점

위의 장점들을 가지고 있는 CSR이지만, 여기에도 단점은 존재한다.

• 웹페이지를 처음 호출할 때 너무 오래 걸림
  CSR 방식은 처음 웹페이지를 호출할 때 app.js라는, 그 페이지에 대한 모든 정보를 가지고 있는 JavaScript 파일을 가져온다. 이것이 위에서 소개했던 장점이 되기도 하지만, 반대로 가져올 JavaScript 파일이 너무 크기 때문에 사용자들은 처음에는 긴 로딩시간에 빈 화면을 보게 될 수도 있다.

• SEO에서의 불리함
  SEO(Search Engine Optimization) 이란 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 나의 웹페이지를 구성해서 다른 사람들의 검색 결과의 상위에 나올 수 있도록 하는 작업, 즉 검색엔진 최적화 작업을 의미한다. 이 SEO는 내 웹페이지가 남들에게 더 자주 노출될 수 있게 해주기 때문에 웹페이지를 만드는 사람이라면 누구나 신경을 많이 쓰는 부분 중 하나인데, 이는 보통 html 파일에서 정보를 가져오는 방식을 취한다. 때문에 html 파일이 텅텅 비어있는 CSR 방식으로 제작된 웹사이트는 SEO에서 많은 불리함을 가져가게 된다.
  
  <여러 문제점들이 해결되었지만, 여기에도 단점은 존재한다..>

SSR

CSR 방식의 문제점을 해결하기 위해 사람들은 고민하게 되고, 그러다 제일 처음 나온 렌더링 방식인 static sites의 방식을 따와 SSR(Server Side Rendering)을 고안하게 된다. SSR은 클라이언트가 웹사이트에 접속하면 서버에서 필요한 데이터를 모두 가져와 html 파일을 만들고, 이 html 파일을 동적으로 제어할 수 있는 일부 JavaScript 소스코드만을 함께 클라이언트로 보내주는 방식으로, 이 방식을 사용하게 되면 CSR에서 문제였던 첫 페이지의 긴 로딩시간과 SEO에서의 불리함을 해결할 수 있다. 처리해야 할 파일이 크고 무거웠던 CSR 방식에 비해 이미 처리가 완료된 html 파일만 실행시키면, 되서 로딩속도가 빠르고, html 파일로 페이지를 렌더링해서 SEO에 적합하기 때문이다.

SSR의 문제점

CSR의 단점들을 상쇄한 SSR이지만, 단점들 또한 생겨나고 말았다.

• Blinking Issue
  SSR은 제일 처음의 static sites의 방식을 가져왔기 때문에 UX에 안 좋은 이슈로 작용될 수 있는 Blinking Issue가 존재한다.

• Server의 과부하
  SSR 방식은 사용자가 웹사이트를 호출할 때마다 서버에서 html 파일을 생성해서 보내주기 때문에 사용자가 많아진다면 서버에 많은 무리를 줘서 과부하가 일어날 수 있다.

• Interacting 할 때의 대기시간
  SSR 방식에서 가장 치명적인 단점이라고 할 수 있는데, 첫 페이지가 렌더링 될 때 필요한 JavaScript 소스 코드는 받아왔지만 동적으로 데이터를 처리하는 JavaScript 소스 코드는 아직 받아오지 못했기 때문에 각종 이벤트(클릭 등)에 대해 반응이 없거나 늦는 상황이 생길 수 있다.
  
  <CSR의 문제는 해결했지만, 또 다른 문제가 생겨버린 SSR..>

SSG

위의 CSR과 SSR이 각자 보완할 수 없는 문제들을 가지고 있자, 사람들은 이를 절충할 수 있는 방법을 생각하게 된다. 이에 SSG(Static Site Generation) 이라는 솔루션이 나오게 되는데, 이를 지원하는 방법은 현재 크게 두가지가 있다.

• React + Gatsby
  우리가 현재 많이 쓰는 React라는 라이브러리는 CSR 방식에 최적화된 라이브러리지만 여기서 Gatsby라는 라이브러리를 같이 사용하면 웹페이지를 정적으로 미리 생성해서 서버에 배포해놓을 수 있다. 이때 JavaScript 파일도 함께 가지고 있기 때문에 동적으로 처리할 수 있다는 장점을 가지고 있다.
  

• React + Next.js
  또 다른 절충안인 Next.js는 과거에는 SSR을 지원하는 라이브러리였지만, 현재는 SSG와 더불어 CSR과 SSR을 섞어서 쓰는 방식 또한 지원하며 유연한 프로그래밍이 가능하도록 도와주고 있다.
  

마무리하며...

오늘은 렌더링 방식이 어떻게 변해왔는지, 각각의 방식들이 어떠한 장단점을 가지고 있는지, 그리고 최신의 트렌드는 현재 무엇인지까지 알아보았다. 각각의 방식에 대해 아주 자세히 살펴본건 아니지만, 전체적인 흐름에 대해 알았으니 다음 포스트에서는 더 자세한 내용을 다뤄보자

<오늘의 마지막 사진은 최근 들어 가장 아름답다고 생각하는 차량인 '페라리 로마'이다. 볼때마다 너무 예쁘다...>