Github
PostsjsMFA-SPA

MFA-SPA

A set of two-state buttons that can be toggled on or off

MPA(Multiple Page Application)은 새로운 페이지 요청 이벤트를 받을 때 서버로부터 리소스를 받아와서 URL을 변경, 페이지 전체를 새로 렌더링한다. ssr 방식

SPA(Single Page Application)은 최초에 한번 페이지를 로드하고, 이후부터는 특정부분만 갱신한다. csr 방식

SSR

server side rendering

서버로부터 완전하게 만들어진 리소스를 받아와 페이지 전체를 렌더링하는 방식

요청을 받은 서버는 필요한 데이터와 css를 모두 삽입한 렌더링 준비를 마친 HTML과 JS코드를 응답한다.

각각의 페이지가 있기 때문에 SEO에 유리하다. 또한 초기의 로딩이 빠르다.

︎ 초기 로딩이 빠른 만큼 단점이 있다. UI가 보이는 시간과 UI가 interaction하는 시간에 간격이 있어 클릭을 해도 아무런 반응이 없을 수 있다.

매번 새로고침 되기 때문에 사용자 경험이 떨어지고, 서버가 모든 리소스를 준비하기 때문에 서버 부담이 증가된다.

CSR

client side rendering

요청에 따라 필요한 부분만 응답받아 렌더링하는 방식

요청받은 서버는 완전한 리소스를 응답한다. 모든 js파일을 전달한다.

변경되는 부분의 데이터만 가져오므로 속도가 빠르고, 서버의 부담을 줄일 수 있다. 새로고침을 하지않아 사용자 경험이 좋다.

SEO가 페이지를 빈페이지(구글은 다르다지만...)로 인식한다. 그리고 초기 로딩속도가 느리다.

CSR이 무조건 더 좋은 것은 아니다. 서비스, 콘텐츠의 성격에 따라 다르다.

SSR선택 기준

  • 검색 상위 노출 필요
  • 누구에게나 동일한 내용을 보여줄 때
  • 페이지마다 데이터가 자주 바뀔 때

CSR선택 기준

  • 개인적인 데이터로 구성될 때
  • 사용자 경험을 높이는게 중요할 때
  • 고객의 데이터 보호가 더 중요할 때