WEB - SPA

SPA(Single Page Application)

---

전통적인 웹 페이지 동작 방식

클라이언트	동작	서버
	최초 접속 요청 ->
	<- HTML파일 전송
	다음 페이지 이동 요청 ->
(새로고침)	<- 새로운 HTML파일 전송

• 페이지 이동을 하고 서버에 요청을 하면 서버가 HTML파일을 만들어서 클라이언트에 보내주고 브라우저가 HTML을 반영해서 보여주기전 새로고침이 일어난다. 

 

SPA 동작 방식

클라이언트	동작	서버
	최초 접속 요청 ->
	<- HTML파일 전송
	AJAX(비동기 통신) ->
받은 JSON토대로 변경된 부분만 렌더링	<- JSON전달

• HTML렌더링을 서버가 하는 것이 아닌 클라이언트가 받은 JSON을 토대로 한다
• CSR(Client Side Rendering)방식으로 렌더링한다.

 

SPA란?

• 화면 이동시에 필요한 데이터를 서버로부터 HTML로 전달받지 않고, 필요한 데이터만 서버로부터 JSON으로 전달받아 클라이언트가 렌더링 하는것을 말한다.

 

SPA의 장단점

• 장점
  1. 필요한 부분만 업데이트 하기 때문에 트래픽이 적고 페이지 이동이 빨라진다.
  2. 모듈화, 컴포넌트화를 통해 유지보수를 쉽게 만들고 개발 속도를 빠르게 만들어준다.
• 단점
  1. 리소스를 초기에 다 다운받기 때문에 초기 구동 속도가 느리다.

 

reference

junsday.tistory.com/40

medium.com/iotrustlab/%EC%9B%B9-spa-single-page-application-%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C-ba9e26ad1cc5

velog.io/@josworks27/SPA-%EA%B0%9C%EB%85%90