SPA와 MPA의 차이, 작동 원리에 대해서 (feat CSR, SSR)

서론

 모던 웹사이트들은 대부분 라이브러리와 프레임워크를 이용해서 만들어진다. 이는 유저들과 웹사이트와의 상호작용이 늘어남에 따라 UI를 더 쉽게 구성하고 사용자에게 더 나은 경험을 제공하기 위한 웹 애플리케이션을 개발하는 필요성이 증가하고 있기 때문이다. 현재 사용되는 라이브러리와 프레임워크들은 각기 다른 아키텍처와 렌더링 방식을 사용하고 있다. 이러한 방식들의 차이와 장단점을 이해함으로써 적절한 라이브러리와 프레임워크를 선택하는 데 도움을 받을 수 있다.

 많은 사람들이 SPA(Single Page Application)와 CSR(Client-Side Rendering)을 동일시하고, SSR(Server-Side Rendering)과 MPA(Multi-Page Application)를 동일시하는 경향이 있다. 하지만 SPA와 MPA는 아키텍처의 차이이고, CSR과 SSR은 렌더링 방식의 차이이므로 서로 다른 개념이다. 예를 들어, MPA이지만 CSR을 사용하는 jquery로 만든 웹사이트가 있으며, Next.js의 SSG또한 MPA이지만 CSR이다. 다만 SPA 라이브러리인 React, Vue, Angular등이 SPA이면서 CSR을 사용하고(React의 server component 제외) React Framework인 Next.js가 SSR이며 MPA이기에 이 글에선 SPA와 CSR를 묶어서 설명하고, MPA와 SSR을 묶어서 설명하겠다.

 

SPA와 MPA의 차이

SPA, CSR

 SPA는 Single Page Application의 약자로, 웹사이트를 구성할 때 서버는 클라이언트에게 하나의 HTML 파일만을 보낸다. 이후 클라이언트는 받은 HTML 파일로부터 CSS와 JavaScript 파일을 추가로 요청한다. 이때 받은 HTML 파일은 최소한의 정보만 담고 있으며, CSS와 JavaScript 파일의 링크가 포함되어 있다. 예를 들어 React의 경우 초기 페이지를 로딩할때의 과정은 다음과 같다

• 1. 서버는 클라이언트에게 하나의 HTML 파일을 전송.
• 2. 브라우저는 HTML을 파싱하여 DOM 트리를 구성.
• 3. 클라이언트는 이 HTML 파일을 통해 CSS와 JavaScript 파일을 추가로 요청.
• 4. 추가로 다운받은 CSS와 JavaScript 파일을 appendChild() 같은 DOM API를 사용하여 노드들을 DOM 트리에 삽입하여 페이지의 기본 구성을 완성.
• 5. 브라우저는 JavaScript를 실행하여 사용자와 상호 작용할 수 있는 웹페이지를 만듬.     

 그리고 리액트는 사용자가 상호 작용함에 따라 DOM의 변화가 생겼을 때, 새로운 Virtual DOM을 만들어 기존 DOM과 비교한다. 이 과정을 리액트 lifecycle이라 하며 해당 내용은 후속글에서 적어보겠다.

 따라서 SPA는 웹사이트가 하나의 HTML 파일로 구성되므로 페이지 전환 시 서버로부터 새로운 페이지를 받아올 필요가 없어 빠른 성능을 제공한다. 또한 페이지 이동 시 페이지가 깜빡거리지 않기에 사용자 경험이 향상되고 사용자는 말 그대로 Application을 사용하는 경험을 느낄 수 있다. 그러나 크롤러는 자바스크립트를 실행할 수 없기에 페이지 내용을 확인할 수 없어 검색 엔진 최적화에 불리하다. 또한 초기 로딩 시 모든 리소스를 다운로드해야 하므로 FCP, LCP가 길어질 수 있다.

MPA, SSR

 MPA는 Multi-Page Application의 약자로, 여러 개의 HTML 파일로 구성된 웹 페이지를 의미한다. MPA는 새로운 페이지로 이동할 때마다 서버로부터 새로운 페이지를 받아 구성해야 한다. 따라서 사용자가 새로운 페이지로 이동할 때마다 서버로부터 해당 페이지의 HTML 파일을 요청하며, 브라우저는 새로운 HTML 파일을 받아와서 페이지를 다시 로드한다. 이 과정에서 각 페이지는 독립적인 HTML, CSS, JavaScript 파일을 가지며, 새로운 페이지가 로드될 때마다 해당 페이지의 리소스를 모두 다시 로드하여 렌더링한다. 예를 들어 Next.js의 경우 페이지를 로딩할때의 과정은 다음과 같다  

• 사용자가 웹 페이지를 요청하면, 서버는 해당 요청에 대한 HTML 파일을 생성하여 응답으로 보낸다.
• 브라우저는 서버로부터 받은 HTML 파일을 렌더링하여 사용자에게 표시하지만, 이 시점에서는 웹 페이지가 아직 상호작용 가능한 상태가 아니다.
• 브라우저는 HTML 파일을 렌더링한 후, 페이지에서 정의된 JavaScript(JS) 파일들을 다운로드받아 실행한다. 이 과정을 하이드레이션(hydration)이라고 한다. 하이드레이션은 브라우저가 서버에서 받은 정적 HTML을 동적으로 변환하여, 웹 페이지가 사용자와 상호작용할 수 있도록 만드는 과정이다.
• JS 파일이 실행되면, 웹 페이지는 사용자 입력에 반응하고, 동적인 콘텐츠를 업데이트하며, 다양한 이벤트를 처리할 수 있는 상호작용 가능한 상태가 된다.

 MPA의 장점으로는 SEO 친화적이라는 점이 있다. 각 페이지가 개별적으로 로드되므로 검색 엔진 크롤러가 모든 페이지 내용을 쉽게 접근할 수 있다. 또한, 페이지 로드 시 필요한 리소스만 로드하므로 FCP와 LCP가 짧다는 장점이 있다. 그러나 단점으로는 페이지 전환 시마다 전체 페이지를 다시 로드해야 하므로 느린 페이지 전환이 발생하고, 각 페이지마다 전체 HTML을 요청하므로 네트워크 트래픽이 증가하는 문제가 있다.

 

 

Reference

• Wikipedia. "Single-page application." Wikipedia, The Free Encyclopedia. https://en.wikipedia.org/wiki/Single-page_application#cite_note-DynamicRenderingWorkaround-24 (accessed July 4, 2024).
• React. "What is the Virtual DOM?" React Documentation. https://legacy.reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom (accessed July 4, 2024).
• Mozilla Developer Network. "SPA." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Glossary/SPA (accessed July 4, 2024).
• Mozilla Developer Network. "Client-side JavaScript frameworks." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks (accessed July 4, 2024).