SPA와 MPA
먼저 CSR과 SSR을 설명하기 전에 알아두면 좋을 것 같은 사전지식이 있다. 바로 SPA와 MPA이다.
MPA (Multi Page Application) 란?
MPA는 Multi Page Application의 약자이다.
여러개의 페이지로 이루어진 홈페이지를 뜻하는데, 페이지와 상호작용할 때마다 새로고침되는 느낌을 얻을 수 있다. PHP나 JAVA로 만든 페이지들이 대체로 여기에 속한다.
웹사이트에 접속할 때, 사용자는 서버에게 HTML파일에 대한 요청을 보낸다. 서버는 기존에 다양한 HTML파일을 만들어뒀다가 클라이언트 요청이 들어오면 데이터를 HTML형태화 시켜서 전송한다.
과거에는 웹에서 제공해야하는 정보가 많지 않았기 때문에 MPA를 더 많이 사용했지만 지금처럼 수많은 정보를 한페이지에 담게 되면 서버는 과부하가 걸리게 된다.. 약간의 수정만 있더라도 다 다시 요청하고 받다보니 비효율적인 부분도 있었을 것이다.
이때, 이런 문제를 해결해주는 SPA가 등장하게 된다.
SPA (Single Page Application) 란?
SPA는 Single Page Application의 약자이다.
다시 말해 한개의 페이지로 이루어진 어플리케이션이라는 뜻이 되겠다.
요즘 많이 사용하는 페이지들을 보면 버튼을 클릭하거나 상호작용을 할 때 전체 페이지가 로딩되는 느낌이 아니라 수정되는 부분만 조금씩 바뀌는 같은 느낌을 받을 수 있다.
이와 같이 데이터를 수정, 조회할 때 페이지가 새로고침 되거나 다른 페이지로 넘어가지 않는 어플리케이션을 SPA라고 부른다.
내가 Vue나 React로 만든 페이지들 역시 대부분 SPA이다.
단 한개의 HTML파일을 가진후 내용물들은 JS의 DOM 조작을 통해 채우게 된다.
ex) React, Vue, Angular
그래서 이 얘기는 왜 나왔는가?
그 이유는 SPA와 MPA의 차이가 SSR, CSR과 나름 밀접한 관련이 있기 때문이다.
SSR (Server Side Rendering)
서버 사이드 렌더링? 서버 측에서 렌더링을 해준다는 뜻이다. 클라이언트에 요청을 하면 서버가 완성된 HTML파일을 돌려준다. 앗! 듣고보니 아까 얘기한거랑 뭔가 비슷하네..? 그렇다. MPA를 만들 때 사용하는 방식이 SSR이다.
장점
어떨 때 좋을까? 일단 자바스크립트가 다운되기 전에 먼저 렌더링 준비가 되니까 초기 진입 시 로딩이 빠르다.
그리고 렌더링 후에 페이지에 대한 정보가 다 담겨져 있기 때문에 SEO에 좋다.
단점
SSR은 MPA와 밀접한 관련이 있다. MPA의 단점들을 다 가지고 있다. 일단 JavaScript다운 전에 먼저 렌더링이 되기 때문에 상호작용이 불가능할 수 있다. 예를 들면 페이지는 다 나왔는데 버튼을 눌러도 이동이 안된다던가,,?
그리고 새로고침해서 전체 화면이 다시 뜨기 때문에 화면 깜빡임 현상이 있다.
* Rendering - 화면에 표시할 웹 페이지를 만드는 과정
* SEO - Search Engine Optimization. 검색엔진의 최적화. 검색엔진에서는 JavaScript를 지원하고 있지 않기 때문에 SSR에서 SEO가 더 좋다.
CSR (Client Side Rendering)
초기 로드 시 HTML과 로직이 담겨있는 JavaScript를 다운로드한다. HTML에 JavaScript를 이용하여 Dom을 동적으로 생성하게된다. 오호,, 이것도 SPA랑 뭔가 관련이 있어보인다.
장점
동적으로 Dom을 그려내기 때문에 원하는 내용만 업데이트가 가능하다. 요즘 많은 페이지들이 이렇게 되어있다.
단점
JavaScript를 쓰다보니 SEO에 취약하다. 모든 JavaScript를 다운로드 해야하다보니 로딩속도가 길다.
물론 CSR은 SPA / SSR은 MPA가 항상 성립하는 것은 아니다.
뭐가 더 좋을까?
보다시피 각각의 장단점이 존재한다. 무조건적으로 하나가 좋다고는 말할 수 없는 것. 그렇기 때문에 내가 만들 서비스에 필요한 부분을 고민해서 원하는 걸 선택하면 된다.
또, 각각의 단점을 보완하는 방법도 존재한다.
CSR + SSR
React + NEXT.js, Gatsby
Vue + Nuxt
Angular + Universal
다양한 프레임워크들을 사용한다면 두가지 모두를 적절하게 사용할 수 있게 된다고 한다. 물론 어려울 것,,,
마치며..
요즘 SPA를 개발해본 경험이 있는 개발자를 많이 찾고, 많은 페이지가 SPA로 개발되고 있는 것 같다. 그래서 명확하게 CSR이 좋은거 아닐까? 라고 생각했는데 각각의 장단점이 존재하고, 서비스의 성격에 따라 좋은 방법을 생각해봐야 한다는 것을 알게되었다.
공부하는 과정에서 각각의 렌더링 방식이 뭔지 알 수 있었고, 대체로 어떤 페이지들을 만들 때 어떤 렌더링 방식이 쓰이는지에 대해 조금은 알 수 있을 것 같았다.
기회가 된다면 두 렌더링 방식의 장점을 모두 쓸 수 있는 페이지를 개발해보고 싶은 하루,,
Reference
SPA
< MPA VS SPA 어떤 기술이 더 좋은 것인가?라는 의문에 대한 답과 단상. >
10분 테코톡 - 신세한탄의 CSR & SSR
