SPA를 알아보자

React를 사용하다보면 정말 많이 들어본 이야기가 SPA일 것이다. 나도 어떤 느낌인지는 알겠지만 확실하게 알아보려 한다.

SPA 싱글 페이지 애플리케이션

위키에 검색해보면 "서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다" 라고 적혀있다 링크

그렇다면 이러한 SPA를 왜 사용하는 걸까?

1. 먼저 페이지를 로드하는 과정이 적어지기에 트래픽이 감소한다.
2. 필요한 부분만 새로이 데이터를 받아와서 렌더하기에 화면 깜빡임이 줄어든다.
3. 위의 장점 + 반응성 향상으로 UX가 증가된다.
4. 모바일에서 사용성이 더욱 증가한다.

물론 이러한 장점이 있어 사용하지만 단점도 존재하는데

1. 정적리소스를 한번에 다운하므로 초기 구동속도가 느리다.
2. 프론트단 데이터 처리로 보안적인 문제가 발생할 수 있다.
3. SEO최적화가 비교적 어렵다.

이러한 장단점을 이해하고 적절하게 내가 서비스할 사이트의 성격을 확인해 적용할 것인지 정하면 된다.

대표적인 SPA 프레임워크로 React, Angular, Vue가 있다.