본문 바로가기
FrontEnd/2024

History모드 : SPA, SSR, CSR

by cariño 2024. 8. 5.
728x90
반응형

SPA: (Single Page Application)

각 UI는 javascript 코드로 만들어서 하나의 페이지( html 문서) 에 마운트 시킨다.

페이지를 따로 로딩하지 않아도 되기 때문에 UI를 빠르게 사용할 수 있다. 


SSR: 서버측에서 각 페이지 UI에 보여질 리소스를 생성해서 화면으로 내려주는 방식

CSR: 클라이언트에서 javascript코드로 html생성해서 보여주는 방식

 

 

[운영서버에 배포할 때 차이점]

 

 

History모드:  전체 경로를 포함해서 리소스를 요청한다.

하지만 히스토리 모드로 서버에 배포를 하게 되면 404 NotFound 페이지가 보여지게 된다. 

즉 히스토리 모드로 서버에 배포를 할 때는 추가로 사용하는 서버에 맞게 설정을 해줘야 한다. 

 

hash모드: 해시모드로 서버에 자원을 요청할 때 #뒤 값은 모두 보내지 않는다.

서버에 요청을 보낼 때 루트로만 자원을 요청하니 히스토리모드처럼 별도 서버설정 없이 사용할 수 있다. 

하지만 검색엔진 최적화 (SEO)에 노출에 치명적인 단점이 있다. 

 

hash모드는 특정 페이지를 가리키는게 아닌, 한 페이지 내에서 스크롤 하기 힘든 부분을 찾아가고자 할 때와 같이 해시를 주로 이용한다. 그렇기에 검색엔진은 이러한 해시를 하나의 페이지로 생각하지 않고 무시할 때가 많다. 

 

대부분 웹 애플리케이션을 운영 서버에 배포할 때는 history 모드를 사용한다. 

 

 

 

728x90

댓글