SPA (Single Page Application) 이란?

SPA (Single Page Application)

Single Page Application의 약자로 단일 페이지로 구성된 웹 애플리케이션. SPA가 등장하기 전에 구성하던 방식인 서버 사이드 렌더링(SSR)의 경우, 화면에 보여질 리소스를 서버로 요청하고, 서버로 부터, 받아온 리소스를 렌더링한다.

SPA의 경우 렌더링의 역할을 서버에 넘기지 않고 브라우저에서 처리하는 방식이다. 모든 정적 리소스를 AWS S3같은 정적 저장소에서 다운로드하고, 이후 새로운 페이즈를 요청하면 요청시 갱신에 필요한 정보만 바꾸어 화면에 띄어주면 된다.

SPA의 장점

• 새로운 페이지 요청 시 전체를 렌더링하지 않고, 변경되는 부분만 갱신하기 때문에 전체적인 트래픽 감소와 렌더링에서 좋은 효율을 가진다.
• 새롭게 갱신 되는 부부만 렌더하기 때문에 새로고침이 발생하지 않고 빠른 이동이 가능
• 번거로운 요청과 응답 없이 정적 파일 내에서 변경된 부분만 렌더하기 때문에 불필요한 트래픽이 감소하고, 속도, 반응성 향상으로 자연스러운 UX 사용자 경험을 제공한다.
• 모듈화 또는 컴포넌트 개발이 용이.
• 백엔드와 프론트엔드가 명확하게 구분 가능

SPA 단점

• 처음 구동할 때 정적리소스를 모두 가져와야 하기 때문에 초기 구동속도가 느리다.
• SPA 구조 상 데이터 처리를 클라이언트에서 하는 경우가 많은데 JS 코드가 외부에 노출 될 위험이 있다.
• 검색 엔진이 크롤링할 때 Javascript를 실행하지 않고 어플리케이션이 로드 되기 전의 코드를 크롤링 하기 때문에 인덱싱이 제대로 이루어지지 않아 검색엔진 최적화가 어렵다.

SPA 그림.

 

 

 

 

 

 

아래 종민불님 블로그 참고

 

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

SPA(Single Page Application)란?