SPA, SSR

이번 시간은 SPA(Single Page Application)와 SSR(Server Side Rendering)에 대해 알아보자.

일단, SSR 부터 살펴보자.



SSR이란 Server Side Rendering의 약어이다.

웹의 시작과 함께 존재해왔으며 대표적으로 JSP / Servlet이 이 방식이다. JSP / Servlet을 사용해봤다면 쉽게 이해할 것이다.

사용자의 요청이 들어오면 서버에서는 필요한 데이터를 DB에서 가져와 데이터를 삽입하여 완성된 HTML을 브라우저로 때려준다.

이렇게 요청마다 다른 페이지를 보여주는 방식을 MPA(Multiple Page Application)라고 한다.

완성된 페이지를 보여준다는 장점이 있지만 그렇기 때문에 서버사이드에서 렌더링이 늦어지면 그만큼 페이지를 리턴하는 속도가 느려지고 사용자가 기다리는 시간이 늘어난다.

그리하여 등장한 것이 SPA다.



SPA란 Single Page Application의 약어이며

그 시작은 XMLHttpRequest 그리고 이를 사용한,  Ajax가 쏘아 올렸으며 현재 그 중심에는 앵귤러, 리액트, 뷰, 스벨트같은 가장 각광받고 있는 프론트엔드 기술들이 존재한다.

SPA는 CSR, 즉 Client Side Rendering 방식을 주로 사용하며(SSR 방식을 사용 못하는 것이 절대 아니다!)

초기 로딩 시 단 한 번만 리소스(HTML, CSS, JavaScript)를 받아오고, 하나의 HTML에 JS로 화면을 변경한다.

그 후에는 데이터를 받아올 때만 서버와 통신한다,

즉, 첫 요청 시 단 한 페이지만 불러오고 페이지 이동 시 기존 페이지의 내부를 수정해서 보여주는 방식이다.

클라이언트(브라우저)가 빈 HTML로 화면을 그리고, 이후에 JS에 따라 화면을 채워 넣기 때문에

클라이언트 사이드에서 렌더링하는 CSR이라 불리는 것이다.

서버에 갔다 올 필요 없이 초기 로딩 시 리소스를 전부 받았기 때문에, 사용자가 클릭 시 반응속도가 빠르며 필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 사용자 경험(UX)을 제공할 수 있다.

이렇게 좋아보이는 SPA는 마냥 장점만 존재할까?


SPA의 가장 큰 문제는 처음 접속 시 모든 리소스를 받아온다는 점이며 이 때문에 그동안 빈 HTML만 존재한다는 점이다.

이는 초기구동속도를 저하시키며 또한, 검색엔진에 있어서 심각한 문제를 야기한다.

검색엔진이 컨텐츠를 가져오지 못하고 빈 화면만 가져오게 만드는 것이다.

이리하여 이런 문제들이 발생한 경우 다시 전통의 SSR로 돌아오게 된다.



그렇다면 SSR의 장점과 SPA의 장점만을 갖고 오는 건 불가능한 걸까?

당연히 가능하며, 최초 접속 시에는 서버에서 렌더링하는 SSR방식으로 HTML을 반환하고, 이후에는 기존 SPA와 같이 JS로 브라우저에서 렌더링하는 CSR방식을 사용할 수도 있다.

Thanks for watching, Have a nice day.