[Front-End] 페이지 로딩에 따른 분류 ( feat. SPA, MPA, SSR, CSR )

개요

React를 공부하다 React 프레임워크는 SPA라는 것을 알게 되었다. SPA란 무엇인지, 그리고 이에 따라오는 CSR은 무엇인지 알아보고 이에 대해 자세히 알아보았다.

 

SPA? MPA?

SPA는 Single Page Application의 약자로 단일 페이지 하나로 UI를 구현하는 서비스 애플리케이션을 말한다.

단일 페이지 애플리케이션이라는 뜻으로 하나의 페이지에서 내부 요소만 바꿔가며 화면을 구성하는 방식의 기술을 의미한다.

React의 경우, index.html이라는 하나의 페이지에 정의한 Component들을 보여주고 지우고 하면서 화면을 보여준다.

화면 내부 요소에 변화를 요청하면 새로 HTML 문서를 만들어서 받는 것이 아닌 컴포넌트들만 요청하고 불러오는 형식이기 때문에 React는 SPA라고 할 수 있다.

 

그럼 반대로 불리는 MPA는 무엇인가?

MPA는 Multi Page Application의 약자로 여러 페이지로 하나의 화면을 구현하는 서비스 애플리케이션을 말한다.

멀티 페이지 애플리케이션이라는 뜻으로 하나의 HTML 문서에 하나의 페이지 형태만 구현할 수 있으며, 페이지의 형태가 변해야 한다면 새로 HTML 페이지를 받아서 사용해야 하는 기술을 의미한다.

 

SSR? CSR?

같이 나오는 말로 SSR과 CSR이라는 말이 있다. 이 용어들은 예전에 프론트엔드를 위한 기술 스택들을 조사하면서 한번 들어본 적이 있다.

SSR은 Server Side Rendering의 약자로 페이지를 렌더링하는 곳이 서버측인 기술을 의미한다. 즉, MPA의 경우 서버 측에서 데이터를 받아서 이를 이용해 하나의 HTML 문서를 완성해서 클라이언트로 넘어오고 클라이언트는 따로 작업할 것 없이 화면을 보여주기만 하면 된다. 이런 기술 스택을 SSR이라고 한다. 듣기만 하면 비효율적이라고 생각할 수 있지만 상황에 따라 변경되어야 하는 화면 요소가 지나치게 많거나 한 번 변경되면 자주 변경될 일이 없는 경우에는 SSR이 클라이언트 입장에서는 렌더링으로 인한 버퍼링, 딜레이가 없기 때문에 사용자에게 긍정적인 경험을 줄 수 있다.

 

그럼 반대의 CSR은 Client Side Rendering의 약자로 페이지를 렌더링하는 곳이 클라이언트측인 기술을 의미한다. React의 경우 index.html 파일 하나를 로드하고 그 안의 컴포넌트들을 수시로 렌더링하며 화면을 구성한다. 이 경우, 서버에서는 데이터만 넘겨주고 이를 활용한 컴포넌트를 만들어서 화면에 보여주는 것이 React이기 때문에 React는 CSR 기술이라고 할 수 있다.

이는 SSR과 반대로 클라이언트에서 화면을 렌더링하기 때문에 컴포넌트가 자주 바뀌어야 한다면 버벅이거나 파일이 무거워질 수 있지만 서버에서 내려주는 데이터의 용량이 적고 동기적으로 화면을 구성할 수 있기 때문에 SSR보다 유리한 상황이 더 자주 나올 수 있다.

 

결론

React는 CSR 기술이자 동시에 SPA 기술이다. 일반적인 경우에는 위 기술 스택이 유리하게 작동하지만 목표하고자 하는 프로젝트의 방향성과 목표에 따라 다른 기술 스택을 선택하는 것도 좋다.

만들고자 하는 웹 서비스의 화면이 자주 변경되어야 하는가, 서버에서 받은 데이터가 많은가, 유저 경험이 중요한가 등 여러 요소를 고려해보고 선택하는 것이 중요하다.

앞으로 프로젝트를 시작할 때 기술 스택을 고려하는 과정에서 생각해볼 수 있는 것이 늘어났다는 점이 와닿게 되는 서칭이었다.