SPA

Static Website

• 말그대로 정적인 웹사이트.

• 화면에 보이는 컨텐츠 그대로 html 파일에 작성되어있어서, 서버에 저장된 html 파일 그대로 브라우저에 보이는 것.
  

• 예를 들어, wecode.co.kr(실제로는 static website는 아니지만) 도 사용자에 따라, 시간에 따라 항상 똑같은 내용을 보여주는 사이트이므로 static website로 만들어도 된다.

• Static website에 적합한 사이트는 뭐가 있을까요?

  • 회사 소개 페이지, 반복이 없는 포트폴리오 페이지, gatsby 블로그 등
  • ex) http://infolab.stanford.edu/~sergey/

Dynamic Website

• Static website와 반대.
  • 서버에 저장된 html 파일이 그대로 브라우저에 그려지는 것이 아니라, 다이나믹하게(=동적으로) html 파일이 만들어지는 것이다. 요즘 대부분의 웹사이트가 dynamic website라고 생각하면 된다.
    

• 예를 들어, airbnb 사이트에서 어제 접속하고, 오늘 접속할 때마다 추천 숙소 목록이 바뀐다. 목록 디자인은 그대로인데, 숙소 목록 데이터가 바뀜!

Multi Page Application (MPA)

SPA (Single Page Application)

• 하나의 파일로 전체 사이트(=여러 페이지)를 구현
  • 이름 그대로, 단일의 html 페이지에서 전체 웹 사이트/서비스를 구현.
  • HTML 태그 자체를 자바스크립트가 동적으로 생성

CSR (Client Side Rendering)

• 동적으로 만들어지는 곳이 client side 인지?

SSR (Server Side Rendering)

• 아니면 server side 인지?