AJAX vs SPA(Single Page Application)

 

 

전체 페이지가 아닌 일부 페이지만 변경된다는 점에서 둘이 비슷한 건가 ? 라고 생각이 들어 찾아보았더니 완전히 다른 거였군요

 

	AJAX	SPA
개념	페이지 새로고침 없이 데이터를 서버에서 가져옴	처음 한 번 페이지 로드, 그 이후 JS로 화면 전환
목적	데이터만 갱신 (부분 업데이트)	전체 UI를 JS로 제어
기술	JS + XMLHttpREquest 또는 fetch()	Vue, React, Angular 등 framework 기반
화면 갱신 방식	데이터만 바꾸고 DOM 일부 수정	라우터, 컴포넌트로 화면 전환 모두 JS로 처리
서버 역할	데이터 제공 (API)	처음 HTML 한 번 주고 이후 API만 응답

 

AJAX 는 메뉴판은 그대로 있는데 필요한 음식만 추가로 주문하는 느낌 (필요한 데이터만 바꿔 끼우는 형식)

ex) 댓글 새로 불러오기, 좋아요 수 증가 등

 

SPA는 건물 자체를 다 지어놓고 내부 호실만 용도에 맞게 이동하는 느낌 (HTML 전체를 다시 받는 게 아니라 JS가 화면을 바꿔줌)

ex) URL만 바꾸고 화면 전환

 

SPA도 내부적으로 AJAX를 쓴다. axios, fetch 등