[Web] 정적, 동적 웹페이지, SPA, SSR, CSR

1. 정적 웹페이지, 동적 웹페이지

• 정적 웹페이지 (static web page)
  • 서버에 저장되있는 HTML, CSS파일을 그대로 보여주는 것
  • 추가 통신, 계산이 없어서 속도가 빠르고 서버 부담이 적음
  • 추가, 수정, 삭제 등을 해야할 때 HTML 자체를 수정해야해서 번거롭다.
  • 소개 페이지, 메뉴 페이지, 포트폴리오 등

• 동적 웹페이지 (dynamic web page)
  • 상황에 따라 서버에 저장되있는 HTML에 데이터 추가, 수정을 해서 보여주는 것
  • 한 페이지에 상황, 시간, 요청에 따라 다른 모습을 보여줌
  • 상대적으로 보안에 취약하고 검색 엔진 최적화가 어렵다.
  • 블로그, 게시판, 날씨 정보 등
  • 동적 웹페이지의 종류에는 CSR, SSR, 복합적인 방법 등이 있다.

2. SPA, SSR, CSR, TTV, TTI

TTV (Time To View)
TTI (Time To Ineract)

SPA(Single Page Aplication)

하나의 문서에서 필요한 부분만 서버에서 받아와서 업데이트를 시켜서 사용성이 좋아진다.

CSR(Client Side Rendering)

• 순서

  1. 사이트 접속
  2. 인데스 파일 다운 (텅 비어있음)
  3. 웹사이트의 모든 로직이 담긴 JS파일을 요청
  4. 동적으로 HTML을 생성할 수 있는 웹 어플리케이션이 담긴 JS파일을 다운받게 됨
  5. 이 순간부터 웹사이트가 보여지고 사이트 사용이 가능함 (TTV + TTI)

• 단점

  • 사용자가 첫 화면을 보기까지 오래 걸릴 수 있다.
  • 좋지 않는 SEO (Search Engine Optimization)

SSR(Server Side Rendering)

서버에서 필요한 파일을 모두 가지고 와서 HTML 파일을 완성시킨 다음 HTML을 동적으로 제어하는 소스코드와 같이 클라이언트에게 보내준다.

• 순서

  1. 사이트 접속
  2. 잘 만들어진 인덱스 파일 받아옴. 웹사이트 보기가 가능
  3. 아직 동적으로 HTML을 제어하는 JS파일을 안받음
  4. JS파일을 요청해서 받아옴
  5. 사용자가 웹사이트 인터랙션 이용 가능

• 장점

  • 페이지 로딩이 빨라진다.
  • 효율적인 SEO (Search Engine Optimization)

• 단점

  • 이전 static 사이트들 문제와 동일하게 깜빡임 이슈가 있다. 사용자가 이벤트를 발생시키면 웹사이트를 서버에서 다시 받아야되기 때문이다.
  • 서버에 과부하가 걸리기 쉽다.
  • 빠른 로딩은 좋지만 JS파일을 늦게 다운받다보니 반응이 없는 경우가 발생할 수 있다.