SPA란?

서버와 클라이언트의 http통신

웹 서버는 웹 클라이언트가 요청하는 다양한 유형의 리소스를 제공하는 역할을 합니다. 그리고 이 요청과 응답을 http 요청/응답 이라고 합니다. http프로토콜을 통해 통신하기 때문이죠.

웹 브라우저의 랜더링

클라이언트의 요청으로 http응답 데이터를 받아오면, 웹 브라우저는 이를 사용자가 볼 수 있도록 화면에 그립니다. 이를 랜더링이라고 합니다.

브라우저가 깜빡인다는 것의 의미?

이때 클라이언트가 다시 다른 자원을 요청한다면, 새로운 데이터를 받아서 화면을 다시 랜더링하게 되고 화면의 깜빡임이(새로고침)이 생깁니다.
그런데 만약 html은 최초에 한번만 받아오고, 이후에는 필요한 부분의 자원만 다시불러온다면 어떨까요?
화면 전체가 깜빡이지 않고, 사용자가 요청한 부분만 동적으로 화면이 그려질 것입니다.

SPA와 MPA

정리해보겠습니다.
사용자가 요청할 때마다 완전히 새로운 html을 전달받는 방식은 MPA(멀티 페이지 어플리케이션).
최초 한번의 html을 받아와서 이후, 필요한 부분만 동적으로 랜더링하는 방식을 SPA(싱글 페이지 어플리케이션)라고 합니다.

그리고 가장 널리 쓰이는 프론트엔드 프레임워크인 리액트는 SPA를 만들기 위한 프레임워크입니다.

어떤 효과가 있을까요?

간단하게 생각해 봅시다.
화면이 부드럽게 전환됩니다. 다시 말해, 사용자 경험을 개선할 수 있습니다.
필요한 부분만 재랜더링하기 때문에, 속도도 빠를 것이고 랜더링에 소모되는 자원도 줄일 수 있습니다.
반면에, 서버에서는 빈 html만을 들고 있기 때문에 우리가 개발한 앱에 대한 정보가 담겨 있지 않아서, SEO에 불리하다는 것이 대표적인 단점입니다.