SPA(Single Page Application)의 등장 배경🚶

어떠한 프레임워크, 언어 혹은 라이브러리가 등장하는 데에는 무언가 항상 이유가 있다.
대부분 불편함이라고 느꼈던 걸 개선하기 위해서 등장하게 되는 이유가 대부분인데. SPA(Single Page Application) 역시 마찬가지이다.

오래된 웹사이트를 보면 일방적으로 콘텐츠를 제공해주고 사용자들은 콘텐츠를 받을 수 만 있는 정적 페이지(Static Page)에서 많이 발생하는 경우인데. 페이지를 이동할 때마다 매번 화면이 깜박거리는 것을 볼 수 있다. 이러한 경우 때문에 사용자의 경험이 썩 좋지 못하다는 단점이 있다.

약간 이런느낌??

이유가 무엇이냐면 페이지를 이동할 때 마다 페이지의 전체를 다시 불러오기 때문이다.

단순히 사용자가 불편하다는 이유만으로는 SPA가 탄생하게 된 계기라고 보기에는 좀 부족한데. 그 안을 들여다 보면,
요즘은 단순히 콘텐츠를 제공받는게 아닌 유저와의 상호작용을 통해 어플리케이션이 만들어지는데 매번 서버에게 전체 페이지를 요청하는 상황은 서버에 부담을 줄 수 있기 때문이다. 이러한 현상은 민감한 사용자들에게 빠르게 콘텐츠를 보여줄 수 있는 반응성에 대해서도 악영향을 끼친다. 즉 이러한 문제를 개선하는 데 필요한 콘텐츠만 바꿔줄 수 있는 SPA가 탄생하게 된 것이다.

SPA란?

SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라,
화면을 업데이트하는 데 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말한다.

SPA의 장점으로는,

• 매번 전체 페이지를 새로 랜더링 할 필요가 없어서 더 나은 사용자 경험을 제공한다.
• 전체 페이지가 아닌 필요한 부분만 데이터를 받아오면 되기 때문에 빠르다.
• 필요한 데이터만 제공을 해주면 되기 때문에 서버의 부담이 적다.

단점으로는,

• 유동적으로 변할 수 있기 때문에 HTML파일은 매우 가볍고 JavaScript로 DOM을 조작해 만들기 때문에 JavaScript 파일의 크기가 크다. 이 말은 JS를 받아오기까지 시간이 꽤 걸린다는 말이다. (첫 로딩이 길어진다)
• HTML 파일은 비어있는 상태로 처음 전달 되기 때문에 SEO(Search Engine Optimization)이 좋지 못하다. 왜냐면 비어있기 때문에 최적화 로봇이 알 수 있는 방법이 없기 때문이다.

큰 맥락에서 SPA이란 SSR(Server Side Rendering) 과 CSR(Client Side Rendering)의 범위에서 말할 수 있는 하나의 부분이기 때문에 더욱 자세한 내용을 공부하려면 SSR, CSR을 공부하면 될 것 같다.