SPA(Single Page Application) 란 ?

SPA(Single Page Application)은 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다.

기존 웹 서비스는 요청시마다 서버로부터 리소스들과 데이터를 해석하고 화면에 렌더링하는 방식이다. SPA형태는 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식이다.

1. 등장 배경

기존 방식의 단점

기존의 방식은 유저가 링크를 누르면 해당 페이지로 이동하는 방식이였다. 이는 서버가 해당 페이지(html)를 내려주는 방식이다. (이러한 방식을 서버 사이드 렌더링이라 부름)
이러한 방식에서 브라우저는 페이지를 받을 때 마다 변하지 않는 정보들도 계속 다시받게된다.
(ex - 메뉴, 사이드 바 등…)

서버에서 렌더링을 담당한다는 것은 그만큼 서버 자원을 렌더링하는 데 사용한다는 의미이며 데이터의 크기 또한 커진다.

이러한 문제점을 해결 하기 위하여 특정 부분만 다시 그리는 SPA 형태가 발전하게 되었다.

2. 클라이언트, 서버 사이드 렌더링의 장점과 단점

2-1. 클라이언트 사이드 렌더링

장점

• 사용자의 행동에 따라 필요한 부분만 다시 읽어옴으로써 서버측에서 렌더링하여 다시 읽어오는 것 보다 빠른 인터렉션을 기대할 수 있다.
• 클라이언트에서만 렌더링을 진행하므로 일관성 있는 코드를 작성할 수 있다.
  • 서버사이드 렌더링을 한다고 하더라도 Ajax를 사용한다면 기능을 위하여 클라이언트 렌더링 요소가 포함될 수 밖에 없다.

단점

• 초기 구동 속도가 느리다.
  • 페이지를 읽어들이는 시간, 자바스크립트를 읽어들이는 시간, 자바스크립트가 화면을 그리는 시간까지 마쳐야 콘텐츠가 사용자에게 보여진다.
  • 서버에서 콘텐츠를 가져와야하는 일이 생긴다면 더욱 오래걸린다.
• SEO(검색 엔진 최적화, Search engine optimization) 문제가 발생한다.
  • 스크립트 언어로 화면의 전환이 이뤄지므로 크롤링하기 어렵다.

2-2. 서버 사이드 렌더링

장점

• SEO에 문제가 없다.
• 유저가 처음으로 컨텐츠를 접하는 시점을 앞당길수 있다.

단점

• 사용자와의 인터렉션이 느리다.
  • 매번 서버에 Request를 요청해야하며, DOM 조작에 있어서도 큰 비용이 소모된다.