과거의 웹 사이트는?
전통적인 과거의 웹 사이트는 문서 하나에 전달되는 파일의 용량이 작았음
→ 어떤 요소를 한 번 클릭하면 Server에서 완전히 새로운 페이지를 전송 (용량이 작았기 때문에 부담X)
→ SSR(Server Side Rendering, 서버 사이드 렌더링) 방식으로 화면에 보여질 리소스를 Server로 요청하고, 받아와서 렌더링
하지만! 시간이 흘러 웹 사이트가 고도화되어 한 페이지 각각의 용량이 커졌고, 매번 새로운 페이지를 전달하는 것이 점점 버거워짐
이러한 문제를 해결하기 위해 SPA 등장!
SPA(Single Page Application)
SPA는 'Single Page Application'의 약자, 단일 페이지로 구성된 웹 애플리케이션
기존 SSR방식과 다르게 렌더링 역할을 서버에게 넘기지 않고 브라우저에서 처리
웹 애플리케이션에 필요한 모든 정적 리소스를 최초로 한번 받고, 이후 새로운 페이지 요청 시 페이지 갱신에 필요한 데이터만을 전달받아 페이지 갱신
SPA의 장점
- 전체적인 트래픽 감소, 렌더링에서 효율적 (새로운 페이지 요청 시, 전체를 렌더링 하지 않고 변경되는 부분만 갱신하기 때문)
- 빠른 화면 이동 가능(변경되는 부분만 렌더링하기 때문에 새로고침 발생X)
- 앱 같은 자연스러운 사용자 경험(UX) 제공(트래픽 감소, 속도와 반응성 향상)
- 모듈화, 컴포넌트별 개발 용이
- 백엔드, 프론트엔드 비교적 명확히 구분 가능
SPA의 단점
- 초기 구동 속도 느림(필요한 정적 리소스를 한번에 다운로드 하기 때문)
- 데이터 처리를 Client에서 하는 경우가 많은데, 해당 로직들은 js를 통해 구현되므로 코드가 외부에 노출되는 보안적 문제 존재
- SEO(검색 엔진 최적화) 어려움(검색 엔진이 크롤링 시, js를 실행하지 않고 애플리케이션이 로드되기 전 빈 상태의 코드를 크롤링하기 때문에 인덱싱이 제대로 이루어지지 않음)
SPA 프레임워크
Angular, React, Vue
→ 모두 SPA를 쉽고 확장성 있게 구현하는 것을 목표로 함
아는 것을 잘 설명할 수 있는 개발자되기👩🏻💻