SPA & MPA의 차이

SPA(Single Page Application) 하나의 페이지로 구성된 웹 어플리케이션을 뜻한다.
MPA(Multi Page Application) 다중 페이지로 구성된 웹 어플리케이션라는 뜻이다.

MPA는 전통적인 방식의 어플리케이션인데 우리가 웹사이트를 이용할때 페이지를 들어가면 해당 페이지에 나오는 리소스 데이터를 한꺼번에 뭉텅이로 받는다고 생각하면된다. 추가적으로 해당페이지에서 뭔가 수정이 일어나서 페이지가 변화가 생기게 된다면 똑같이 서버에서 데이터를 다시 만들어서 사용자 페이지에 던져주는 방식을 SSR(Server Side Rendering)이라고 한다. 쉽게 말해서 서버에서 처리를 하겠습니다 라고 생각하면 될것 같다.

SPA는 가장 처음 페이지를 로드할때는 서버에서 데이터를 뭉텅이로 받는다. 여기까지는 어떻게 보면 MPA와 비슷하다라고 생각할수 있습니다. 하지만 여기에서 페이지에 어떤 일부분의 수정사항이나 데이터가 변경되는 상황이 발생했다고 한다면 MPA와는 반대로 그 변화가 발생한 데이터만 클라이언트에서 변경을 하는 방식 CSR(Client Side Rendering)이다.

CSR VS SSR

# CSR의 장점과 단점

• 장점
  • 페이지의 Reload가 일어나지 않기 때문에 사용자가 부드러운 웹페이지를 경험할수가 있습니다.
  • 렌더링이 브라우저에서 일어나기 때문에 서버에 과부하가 걸리지 않고 사용자가 보다 빠른 익터렉션(제스처)를 받을수가 있습니다.
• 단점
  • 첫페이지를 로딩하는데 모든 리소스 데이터를 한꺼번에 받다보니 너무 느리다.
  • 검색엔진(SEO) 최적화를 하기 위해서 보완을 충분히 해야한다.
    • 네이버, 구글 등의 웹사이트를 노출을 해주는 플렛폼에서는 봇이 웹사이트를 들어가서 해당 페이지를 크롤링하고 SEO최적화가 잘 되어있다면 사이트를 상위로 노출을 해주고 있다. 하지만 CSR에 경우에는 페이지가 비어있는 형식으로 인식을 하게되서 최적화가 어렵다고 할수 있다.

# SSR의 장점과 단점

• 장점
  • 첫 페이지 로딩시 첫 페이지에 관련되 데이터를 가져오기때문에 속도가 빠르다.
  • HTML에 데이터가 모두 들어서 클라이언트오 오기 때문에 SEO 최적화가 가능하다.
• 단점
  • 페이지를 이동할때마다 또는 액션이 발생할때마다 페이지 전체가 Reload현상이 발생하기 때문에 느리다는 단점이 있다.
    

둘중 하나를 선택해야 한다면?

사실 정답은 없다. 상황에 따라 SSR과 CSR을 선택해야합다. 한가지 방법으로는 두가지 모두 사용해서 어플리케이션을 제작할수도 있다. 특정 페이지는 단순한 데이터만 보여주겠다면 SSR을 사용할수 있고 또 특정 페이지는 동적인 변화가 자주 일어난다고하면 CSR방식으로 개발을 해볼수 있다.