Single Page Application (SPA)

<SPA이란?>

싱글 페이지 애플리케이션은 웹 브라우저가 전체 페이지를 새로 로드하는 기본 방식 대신, 웹 서버로부터 새로운 데이터를 받아 현재 웹 페이지를 동적으로 다시 작성하는 웹사이트 또는 웹 애플리케이션입니다. 따라서 사용자는 서버에서 새로운 페이지를 로드하지 않고도 웹사이트를 사용할 수 있어, 성능이 향상되고 보다 인터랙티브한 경험을 얻을 수 있습니다. 

 

반면 A 페이지를 만들면 A html 템플릿, B 페이지를 만들면 B html 템플릿 방식은 전통적인 웹 사이트를 만들 때 사용하는 Multi-Page Application 입니다. 

 

<언제 SPA 사용하나요?>

• 동적 상호작용 : 전체 페이지를 다시 로드하지 않고 빈번한 사용자 상호작용이 필요한 애플리케이션의 경우
• 실시간 업데이트 : 원활한 사용자 경험을 위해 실시간 응답성이 중요한 경우
• 풍부한 사용자 인터페이스 : 애니메이션 및 동적 콘텐츠와 같은 기능이 있는 인터랙티브한 인터페이스를 위해
• 서버 부하 최소화 : 서버 부하와 대역폭 사용량을 줄이는 것이 우선인 경우
• 단일 페이지 콘텐츠 : 여러 페이지가 필요하지 않고 논리적으로 단일 페이지에 콘텐츠를 표시할 때

<SPA 장점들>

• 더 빠른 사용자 경험 : SPA는 한 번 로드되고 필요한 데이터만 가져오기 때문에 페이지 리로드를 줄이고 부드럽고 반응성 있는 사용자 경험을 제공합니다.
• 성능 향상 : 서버 요청을 최소화하고 필요한 컴포넌트만 업데이트함으로써 서버 부하를 크게 줄이고, 빠른 로딩 시간과 향상된 성능을 제공합니다.
• 대역폭 사용량 감소 : SPA는 특정 상호작용에 필요한 데이터만 가져오므로, 클라이언트와 서버 간의 데이터 전송량을 최소화하여 대역폭 사용량을 줄이고 효율성을 높입니다.
• 크로스 플랫폼 호환성 : SPA는 다양한 기기와 플랫폼과 호환되어 데스크톱, 태블릿, 모바일 기기에서 일관된 사용자 경험을 제공합니다.
• 확장성 : SPA는 클라이언트-서버 상호작용을 효율적으로 관리하여 웹 애플리케이션의 확장성을 지원합니다.

<SPA 단점들>

• 느린 초기 로드 : 초기 로딩이 느릴 수 있어 인터넷 속도가 느린 사용자의 경험에 영향을 줄 수 있습니다.
• SEO 문제 : SPA는 JavaScript에 크게 의존하기 때문에 검색 엔진 최적화(SEO)가 어려울 수 있습니다.
• 보안 위험 : 크로스 사이트 스크립팅(XSS)과 같은 보안 문제에 취약할 수 있습니다.
• 클라이언트 측 리소스 집약적 : 클라이언트 측에 많은 부담을 주어 구형 기기에서는 성능 저하가 발생할 수 있습니다.
• JavaScript 의존성 : 사용자가 JavaScript를 비활성화하면 필수 기능이 작동하지 않을 수 있습니다.

참고 자료 :
https://developer.mozilla.org/ko/docs/Glossary/SPA

단일 페이지 애플리케이션 (Single-page application, SPA) - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

https://www.bloomreach.com/en/blog/what-is-a-single-page-application#:~:text=A%20single%20page%20application%20is,browser%20loading%20entire%20new%20pages.

What Is a Single Page Application?

https://www.geeksforgeeks.org/what-is-single-page-application/

What is Single Page Application? - GeeksforGeeks