SPA(Single Page Application) 이란?

직역하자면 하나의 페이지 라는 것입니다. it 언어로 번역하자면 웹페이지의 구조가 어떤 방식으로 작동하는지를 설명하는 용어입니다.

옛날에는 MPA(Multi Page Application)가 주류를 이뤘습니다. MPA란 사이트가 여러개의 페이지로 이루어진 것을 말합니다. 웹사이트 페이지마다 필요한 데이터(html, css, javascript…)를 응답받은 후 랜더링 했습니다.

예시를 들겠습니다.

스크린샷 2023-10-06 오전 10.22.35.png

m.naver.com 에 접속합니다. 접속하는 순간 화면을 표출하는데 필요한 데이터들(html, css, javascript, 이미지)을 응답 받았습니다.

노션_ssr.png

그리고 www.naver.com/services.html 로 화면을 이동하면 해당 화면을 표현하기 위한 데이터들을 응답받았습니다.

SPA.png

하지만 근래에는 최초에 화면을 진입하면 모든 데이터들을 응답받습니다. 이후 해당 도메인 주소의 다른페이지 에서는 화면을 표출하는데 필요한 데이터 말고 서버와 통신에서 주고받는 데이터만 응답받는 방식입니다.

React, Vue, Angular, Svelte가 대표적은 SPA의 방식입니다.