서론

나는 백엔드 개발자라는 꿈을 가지고 열심히 달려왔다고 생각한다. 그 결과 엘리스라는 산업체에서 짧게나마 복무를 해보기도 했었다. 하지만 지금 생각해보면 백엔드만을 공부하다보니 전반적인 웹에 대한 지식이나 프론트엔드의 트랜드를 많이 놓치고 있지 않았나 하는 생각이 들었다. 군대에 와서는 블로그도 만들어보는 과정에서 프론트엔드 단의 개발에 관심이 생겼다. 그렇다고 지금 프론트 개발자로 전향하겠다 선언하는 것은 아니다. 단지 백엔드 개발자라는 이유로 프론트를 외면해서는 안되겠다는 생각을 하게 된 것이다. 그래서 이번 글을 통해서 최근 웹 프론트엔드에서 트랜드인 용어들(SSR, CSR, SPA, MPA)를 공부해보기로 했다.

Static Page

정적 페이지란 웹 서버 상에 저장된 파일(HTML, JS)이 사용자에게 그대로 전달되는 웹 페이지를 말한다. 데이터가 직접 변경되지 않는 한 페이지는 동일하게 보여지며 빠른 렌더링 속도를 가진다. 개인 블로그와 같이 정해진 내용을 렌더링하는 사이트를 만드는 경우에는 정적 페이지가 많이 사용된다. 보통은 정적 사이트를 처음부터 만드지 않고 Static Site Generator를 이용하는데 대표적인 툴로는 jekyll, hexo, gatsby, hugo 등이 있다.

Dynamic Page

말 그대로 동적인 웹페이지를 말한다. 정적 페이지와 달리 애플리케이션에서 전달하는 데이터에 따라 동일한 페이지여도 다른 정보를 표현할 수 있다. 예를 들어 페이스북에 접속했을 때 사용자별로 보이는 정보는 각자 다르다. 하지만 분명히 동일한 페이지(www.facebook.com)에 접속하고 있다는 사실은 모두가 잘 알고 있을 것이다. 현대의 대다수의 웹페이지는 이러한 방식을 통해 만들어지고 있다.

CSR(Clent-Side Rendering)

csr

클라이언트 단에서 렌더링을 하는 방식을 말한다. 브라우저 상에서 HTML, JS 등 렌더링을 위해 필요한 것들을 모두 다운로드하고 렌더링한다. 이후에 필요한 데이터만 서버에 요청해서 JS로 동적으로 처리한다.

SSR(Server-Side Rendering)

ssr

전통적인 웹 애플리케이션의 동작방식이다. 서버 상에서 렌더링을 마치고 클라이언트는 이것을 받아서 실행한다. CSR과 달리 페이지를 처음 접속할 때만이 아니라 다른 페이지로 이동할 때마다 새로고침이 일어난다.

SPA(Single Page Application)

한 개의 페이지로 이루어진 애플리케이션이다. 이 방식으로 만들어진 사이트는 접속하는 처음에만 페이지를 로딩하고 이후는 필요한 데이터만 서버에 요청해서 업데이트한다. 그래서 페이지를 새로고침하지 않는다는 특징을 가진다. 최근 프론트엔드 개발에서 엄청난 인기를 받고 있는 라이브러리인 리액트가 대표적인 예시인데, 페이스북은 이것을 통해 만들어진 대표적인 사이트이다. 실제로 페이스북을 웹에서 사용해보면 접속하는 처음만 페이지 로딩이 일어나고 이후에는 새로고침 과정이 전혀 일어나지 않는다.

MPA(Single Page Application)

여러 페이지로 이루어진 애플리케이션을 말하며 SPA와 상반되는 개념이다. 서버로부터 완전한 페이지를 받아오며 다른 데이터를 보기 위해서는 브라우저의 새로고침이 필요하다.

SPA != CSR

위 내용을 읽어보면 SPA와 CSR이 유사한 개념이라는 사실을 알 수 있을 것이다. 그렇다고 같은 개념이라고 오해해서는 안된다. SPA(Single Page Application)을 구현하기 위해서 CSR(Client-Side Rendering) 방식이 사용되는 것이지 등식이 성립하는 관계는 아니다. 굳이 따지자면 SPA를 이루는 요소 중 하나가 CSR(SPA⊃CSR)이라고는 할 수 있겠다.

MPA/SSR의 관계도 SPA/CSR의 것과 동일하다. MPA를 구현하기 위해 SSR이 사용된다.

SPA vs MPA

구분 SPA MPA
장점
  • 컴포넌트 재사용
  • 유연한 UI
  • SEO에 유리
단점
  • 초기 페이지 로딩 시간
  • SEO에 불리
  • 다른 페이지 이동 시 새로고침

검색 엔진 최적화 문제

SEO(Search Engine Optimization)는 검색엔진 상에서 검색 결과의 상위에 나올 수 있도록 하는 작업을 말한다. 보통 검색엔진은 웹 사이트들을 크롤링한 결과를 보여주는데 구글을 제외한 대다수의 검색엔진 크롤러는 JS를 해석하지 못한다. MPA는 서버에서 이미 렌더링된 페이지를 그대로 보여주므로 SEO 문제가 발생하지 않는 반면, 빈 페이지를 로딩한 이후 데이터를 JS를 통해 렌더링하는 SPA는 검색엔진이 적절히 크롤링하지 못한다.

결론

오늘날 우리가 사용하는 웹 페이지는 다양한 구조를 가지고 있다. 전통적인 방식으로는 웹서버 상에 위치한 자원을 그대로 보여주기만 하는 정적 페이지 그리고 서버에서 렌더링한 페이지를 JSP/Servlet 등을 통해 제공하는 방식이 있었다. 하지만 최근엔 다양한 요구사항에 따라 앱처럼 동작하는 웹 애플리케이션의 필요로 인해 SPA가 탄생했다. 이러한 패러다임의 변화로 렌더링이 이루어지는 위치에 따라 SSR과 CSR로 구분짓기 시작했다.

사실 따지고 보면 CSR이라는 개념은 전혀 새로운 것은 아니다. 전통적인 MPA이더라도 일부 페이지 내용을 Ajax를 통한 비동기 통신으로 변경하는 경우가 있었기 때문

최근에는 SEO 문제를 해결하기 위해서 SPA에 SSR을 도입하는 경우가 있다. 대표적인 예로는 리액트 기반의 프레임워크인 next.js이다. 이것을 이용하면 CSR은 물론이고 SSR까지 지원할 수 있게 된다. 이렇게 사용하는 방식을 hybrid라고 부른다. SPA를 유지하면서 검색엔진 최적화를 하고 싶다면 react-helmet이나 react-snap 등을 이용하면 된다.

결과적으로 말하고 싶은 것은 웹 애플리케이션을 구현하는 방식은 다양하다. 어느 게 정답이라 할 수 없고 여러 방식을 혼합해서 사용해도 좋다. 결국에는 주어진 과제에 맞게 풀어나가는 것이 중요하다고 생각한다. 검색 엔진 최적화가 우선시 되어야 하는 경우 SSR를 도입해야 할 것이며, 웹 상에서 유연한 UI와 새로고침 없는 앱과 같은 사용자 경험을 제공하고 싶다면 CSR기반의 SPA를 도입해야 할 것이다.