SPA(Single Page Application)란?

SPA(Single Page Application)란?

[INDEX]

1. SPA란 무엇인가

2. SPA 장점

3. SPA 단점

 + SPA의 단점인 SEO 문제를 보완할 수 있는 여러가지 방법들

---

 

 

1. SPA란 무엇인가

SPA란 'Single Page Application'의 약자로 단일 페이지로 구성된 웹 애플리케이션을 말합니다.

 

초기 페이지 로드 후 서버가 더 이상 HTML을 보내지 않습니다. 처음부터 HTML을 모두 다운로드하면 됩니다. 서버는 쉘 페이지를 보내고 브라우저는 사용자 인터페이스(UI)를 렌더링합니다. 그런 다음 클릭하면 SPA가 데이터 및 마크업에 대한 요청을 다시 보냅니다. 서버는 필요한 원시 자료를 다시 전송하고 브라우저는 이를 받아 업데이트된 UI를 렌더링하여 전체 페이지를 새로 고칠 필요 없이 변경된 부분만 교체합니다. 즉 HTML만 하나를 가지고 페이지 이동시에 변경 사항이 있는 CSS, javascript파일만 새로 받아 화면을 그립니다. 

 

좀 더 쉽게 설명하자면, 렌더링의 역할을 서버에게 넘기지 않고 브라우저에서 처리하는 방식입니다. 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번만 다운로드 합니다. 이후 새로운 요청 시 페이지 갱신에 필요한 비동기적 데이터만을 전달받아 페이지를 갱신하게 됩니다.  

 

전통적인 웹 페이지와의 차이

 

두 방식은 최초 접속(Initial Request)에서 요청후 HTML 을 받아오는 부분까지 동일합니다. 하지만 이후 다음 페이지 이동 시 서버에 요청하는 부분에서 차이가 있습니다.

 

전통적인 웹에서는 페이지 이동을 하고 서버에 요청을 하면 서버가 HTML 파일을 만들어서 클라이언트에 보내주고 브라우저가 HTML 을 반영해서 보여주기전 새로고침이 일어납니다.

 

하지만 SPA 에서는 페이지 이동시 서버에 AJAX로 요청하고 Server 는 JSON 만 전달해줍니다.  이후 페이지 이동시 변경되는 부분만 JSON 으로 받아온 뒤, 브라우저의 자바스크립트에서 받은 JSON 을 토대로 DOM에 변경된 부분만 렌더링 해줍니다. 

이 때 SPA는 html 렌더링을 서버가 하는게 아닌 클라이언트가 받은 json 을 토대로 하기 때문에 CSR(Client Side Rendering) 방식으로 렌더링 한다고 말합니다.  더 정확하게 설명하자면,  SPA는 서버로부터 처음에만 페이지를 받아오고 이후에는 동적으로 DOM을 구성하여 렌더링 되는 화면이 바뀌게 합니다. 바로 여기서 “동적으로 DOM을 구성하여 렌더링 되는 화면이 바뀌게 합니다.” 부분이 CSR입니다.  SPA는 처음에만 페이지를 받아오고 이후에는 받아오지 않는데 데이터가 변경 될 경우 업데이트하기 위해 CSR이란 방식을 채택한 것입니다.

 

2. SPA의 장점 

• 새롭게 갱신되는 부분만 렌더링 →   전체적인 트래픽 감소와 뛰어난 렌더링 효율성 
• 새롭게 갱신되는 부분만 렌더링 →  새로고침이 발생하지 않아 화면 깜빡임 없이 빠른 화면 이동
• 트래픽의 감소와 속도,반응성의 향상 →  앱처럼 자연스러운 사용자 경험(UX)를 제공
• CSR 의 특징을 활용한 페이지 화면전환 애니메이션 이용 가능  →  사용자 친화적인 UI 구현
• 모듈화 또는 컴포넌트별 개발이 용이 →  유지보수 용이, 개발 속도향상 
• 백엔드와 프론트엔드가 비교적 명확하게 구분 → 개발업무 분업화

 

 

2-1. 구조적 측면 |  HTML, CSS, JS에 대해 각각  단일  시간 파일 로드

html, css, javascript 를 어플리케이션의 라이프사이클에서 한 번만 로드하기 때문에 구조가 간단해집니다.

구조가 간단해지기 때문에 향상된 성능과 사용자 경험(UX)을 제공합니다.

사용자 친화적인 구조로서 빠른 반응성을 가지며 화면전환 애니메이션에도 쉬운 구조입니다.

중복되는 리소스 없이 필요한 요청만 하게 되므로 효율성이 증가하겠죠. 

빠른 상호 교환 가능성으로 인해 SPA는 탐색 횟수가 많고 반복 템플릿을 사용하는 페이지에서 매우 유용합니다.

 

2-2. 서버 측면 |  서버에 대한 추가 쿼리가 없습니다.

REST API를 통한 데이터 송수신을 하며 서버 요청이 적습니다.

서버는 여러 렌더링을 수행하는데 시간과 에너지를 소비할 필요가 없기 때문에 SPA는 서버 전체에 미치는 영향을 낮추므로 동일한 양의 트래픽에 대해 더 적은 수의 서버를 사용하여 비용을 절약할 수 있습니다.

 

 

2-3. 개발 측면 |   빠르고 반응성이 뛰어난 프런트엔드 구축

SPA를 사용하면 더 빠른 성능 시간과 함께 개발자가 사이트의 프런트 엔드를 더 빠르게 구축할 수 있습니다. 

분리된 설정을 통해 개발자는 기본 백엔드 기술과 완전히 독립적으로 프런트 엔드를 구축, 배포 및 실험할 수 있습니다. 

그들은 사용자 경험이 어떻게 보이고 느껴지기를 원하는지 디자인한 다음 해당 서비스를 통해 콘텐츠, 데이터 및 기능을 가져옵니다.

 

개발이 복잡해지지 않기 때문에 기존의 방식에 비해 손쉬운 운영 배포가 가능합니다.

 

향상된 애플리케이션 성능, 일관성, 개발 시간 단축, 인프라 비용 절감은 사용자에게 더욱 즐거운 경험을 제공하는 데 도움이 될 뿐만 아니라 개발 팀이 더욱 효율적으로 운영하는 데도 도움이 됩니다.

 

 3. SPA의 단점 

• 웹 애플리케이션에 필요한 정적 리소스를 한번에 다운로드 → 초기 구동 속도가 느림.
• SPA 구조 상 데이터 처리를 클라이언트에서 하는 경우가 많은데,  핵심 로직이 클라이언트에서 javascript 를 통해 구현될 수 있기 때문에 이는 코드가 외부에 노출되는 위험 존재 →  보안 부분에서 약점이 발생합니다.
• 검색 엔진 최적화(SEO: Search Engine Optimization )에 어려움

SPA가 검색엔진 최적화(SEO)에 부적합한 이유

검색 엔진이 크롤링할 때 JavaScript를 실행하지 않고 어플리케이션이 로드되기 전의 빈 상태의 코드를 크롤링하기 때문에 인덱싱이 제대로 이루어지지 않는다.

 

 

+ SEO에 관한 단점을 보완할 수 있는 여러가지 방법들

https://reveur1996.tistory.com/133

 

---

참고 자료

https://www.bloomreach.com/en/blog/2018/what-is-a-single-page-application

https://jongminfire.dev/spa-single-page-application-%EB%9E%80

https://blog.the-compass.kr/csr-ssr-spa-mpa-ede7b55c5f6f

https://medium.com/iotrustlab/%EC%9B%B9-spa-single-page-application-%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C-ba9e26ad1cc5

https://choihaneul9545.tistory.com/49