서버 사이드? 클라이언트 사이드?
-
Server-side : Server에서 HTTP 요청을 보내서 직접적으로 엔드 포인트를 바꾸는 방식 = 페이지 직접 접근
-
Client-side : Client 내부(history pushstate) 를 통해서 주소창의 엔드 포인트를 바꾸는 방식으로 서버에 실존하지 않는다. = 가상 엔드포인트
- 항상 서버 사이드/클라이언트 사이드 라우팅을 맞춰야하는 것은 아니다.
- 파일만 serving 하는 웹 서버를 사용 시, 서버 사이드 라우팅은 사용할 수 없다.
HistoryAPI & pushState
DOM의 Window 객체는 history 객체를 통해 브라우저의 세션 기록에 접근할 수 있는 방법을 제공한다. 사용자가 지닌 방문기록을 통해 '앞으로 가기/뒤로 가기' 등이 가능해진다. History API - MDN
pushState 는 브라우저의 세션 기록 스택에 상태를 추가합니다. history.pushState(state, title[, url]); 의 구문형태로 활용해볼 수 있다.
const state = { 'page_id': 1, 'user_id': 5 }
const title = ''
const url = 'hello-world.html'
history.pushState(state, title, url)SPA(Single Page Application)
단일 페이지 어플리케이션은 이름 그대로 '하나의 페이지로 구성'되며 배포가 간단하고, 필요한 부분만 갱신하기 때문에 전체 새로고침이 발생되지 않아 사용성이 좋다.
SPA의 핵심가치는 사용자 경험(UX) 향상에 있으며, 애플리케이션 속도 향상에도 기대할 수 있어 모바일 퍼스트 전략에 부합하다.
그러나 '상대적으로 느린 초기 구동속도', 'SEO(검색엔진 최적화 문제' 를 지니고 있다.
Single Page Application & Routing
SPA(Single Page Application) 개발에서 고려할 사항
서버사이드렌더링,클라이언트사이드렌더링
Introduction to the server side - MDN
Introduction to client-side frameworks - MDN
