서버 사이드 렌더링

2 minute read

과거 리액트 애플리케이션을 만들 때 Create React App이 각광받았지만 요즘은 서버 사이드 렌더링을 지원하는 Next.js 같은 프레임워크를 사용해 프로젝트를 만드는 것이 큰 인기를 끌고 있습니다.
이에 따라 리액트 개발자라면 리액트뿐만 아니라 서버 사이드 렌더링에 대해서도 이해하는 것이 중요해지고 있습니다.

싱글 페이지 애플리케이션의 세상

서버 사이드 렌더링 애플리케이션과 반대되는 개념인 싱글 페이지 애플리케이션에 대해 먼저 살펴봅시다.
싱글 페이지 애플리케이션이란 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 의미합니다.
즉, 최초에 서버에서 최소한의 데이터를 불러온 이후부터는 이미 가지고 있는 자바스크립트 리소스와 브라우저 API를 기반으로 모든 동작이 이뤄집니다.
이러한 작동 방식은 최초에 로딩해야 할 자바스크립트 리소스가 커지는 단점이 있지만 한번 로딩된 이후에는 서버를 거쳐 필요한 리소스를 받아올 일이 적어지기 때문에 사용자에게 훌륭한 UI/UX를 제공한다는 장점이 있습니다.

전통적인 방식의 애플리케이션과 싱글 페이지 애플리케이션의 작동 비교

과거 서버 사이드에서는 페이지 전환이 발생할 때마다 새롭게 페이지를 요청하고, HTML 페이지를 다운로드해 파싱하는 작업을 거칩니다.
이와 반대로 페이지 전환을 모두 자바스크립트로 한다면 최초에 한번 모든 리소스를 다운로드하고 나면 이후 페이지를 전환할 때 추가로 리소스를 다운로드하는 시간이 필요없어집니다.
이는 페이지 전체를 새로 렌더링하는 것이 아니라 페이지 전환에 필요한 일부 영역만 다시 그리게 되므로 훨씬 더 매끄러운 UI를 보여줄 수 있게 됩니다.

싱글 페이지 렌더링 방식의 유행과 JAM 스택의 등장

과거의 자바스크립트는 어디까지나 사용자에게 추가적인 경험을 주기 위한 보조적인 수단이었으나 서서히 다양한 작업을 수행하게 되면서 자바스크립트를 모듈화하는 방안이 점차 논의되기 시작됐고 그에 따라 등장한 것이 CommonJS와 AMD(Asynchronous Module Definition)입니다.
이러한 변화에 힘입어 2010년경 Backbone.js와 AngularJS, Knockout.js 등이 등장했습니다.
이후, React, Vue, Angular의 시대가 오게 됩니다.

싱글 페이지 어플리케이션은 단순히 사용자에게 좀 더 멋진 UX를 제공하는 것을 넘어서 개발자는 단지 브라우저 내부에서 작동하는 자바스크립트만 잘 작성하면 되었기 때문에 좀 더 간편한 개발 경험을 제공했고, 더욱 간편하게 웹 애플리케이션을 만들 수 있게 됩니다.
이러한 싱글 페이지 애플리케이션의 유행으로 인해 새롭게 생겨난 용어가 바로 JAM 스택입니다.
기존 웹 개발은 LAMP, Linux, Apache, MySQL PHP/Python 으로 구성돼 있었습니다. 대부분의 처리를 서버에서 해야만 했습니다.
그러나 이러한 서버 의존적인 문제는 웹 애플리케이션의 기능이 다양해지거나 사용자가 늘어나면 이와 동시에 서버도 확장해야 했지만 클라우드의 개념이 부족했던 이 당시에는 서버를 확장하는 것이 매우 번거로웠습니다.

그러나 JAM 스택의 등장으로 대부분의 작업을 자바스크립트에서 수행할 수 있었기 때문에 프론트엔드는 자바스크립트와 마크업(HTML, CSS)을 미리 빌드해 두고 정적으로 사용자에게 제공하면 이후 작동은 모두 사용자의 클라이언트에서 실행되므로 서버 확장성 문제에서 좀 더 자유로워질 수 있게 됩니다.

새로운 패러다임의 웹서비스를 향한 요구

많은 양의 리소스가 자바스크립트로 넘어오기 시작하던 때, 자바스크립트 코드의 규모도 점차 커지면서 이에 대해 우려의 목소리가 조금씩 나오기 시작했습니다.
다행히 인터넷 속도는 날이 갈수록 빨라졌고, 프로세서나 메모리 등 하드웨어 성능 또한 눈부시게 발전을 거듭했습니다.
웹페이지를 불러오는 데 필요한 부담을 일정 부분 사용자에게 전가하더라도 사용자의 기기나 인터넷 환경이 더 빠르게 발전할 것이기 때문에 괜찮을 것이라는 기대감이 팽배했습니다.
그러한 기대에 부응하기다로 하듯 웹 애플리케이션에 제공하는 자바스크립트 리소스의 크기와 수가 모두 증가하기 시작했습니다.
사용자의 기기와 인터넷 속도 등 웹 전반을 이루는 환경이 크게 개선됐음에도 실제 사용자들이 느끼는 웹 애플리케이션의 로딩 속도는 5년 전이나 지금이나 크게 차이가 없거나 오히려 더 느립니다.