1. Static Sites

• 서버에 이미 만들어진 HTML문서들이 있고 사용자가 브라우저를 통해 특정 도메인으로 접속하면 서버에 있는 HTML문서를 받아와서 보여주는 형식

단점

• 페이지 내에서 다른 부분을 클릭할 때마다 페이지 전체를 서버에서 받아와서 업데이트 되어야해서 UX가 떨어짐

2. SPA(Single Page Application)

• 문서 내에서도 또다른 문서를 담을 수 있는 iframe태그 도입되어 페이지 내에서 부분적으로 문서를 받아와서 업데이트 가능
• XMLHttpRequestAPI가 개발된 후 JSON과 같은 포맷으로 필요한 데이터만 서버에서 받은 뒤 Javascript를 이용해 동적으로 HTML파일 생성해서 페이지 업데이트하는 방식으로 발전
• AJAX라는 방식으로 공식화, 사용자가 한 페이지 내에 머물면서 필요한 데이터를 서버에서 받아와서 부분적으로 업데이트

3. CSR(Client Side Rendering)

• 사용자들의 PC성능향상 + Angular, React, Vue와 같은 프레임워크도 등장으로 CSR활성화
• 서버에서 index.html파일 보내주고 그 안에는 어플리케이션에서 필요한 app.js같은 자바스크립트 링큼만 들어있음
• 서버로부터 자바스크립트를 다운 받으면 어플리케이션에서 필요한 로직, 어플리케이션을 구동하는 프레임워크와 라이브러리의 소스코드 모두 포함되어 있음(사이즈가 큼)
• 추가로 필요한 데이터가 있으면 서버로부터 받아온뒤 이것들을 기반으로 동적으로 HTML을 생성해 보여줌

단점

• 사용자가 첫 화면을 보기까지 오래걸림
• SEO(Search Engine Optimization)이 나쁨

4. SSR(Server Side Rendering)

• 웹사이트에 접속하면 서버에서 필요한 정보들로 HTML파일을 만들어서 HTML 파일을 동적으로 제어할 수 있는 Javascript와 함께 클라이언트에 보내줌
• CSR보다 첫번째 페이지 로딩이 빠름
• 모든 컨텐츠가 HTML에 담겨있어 SEO에 유리

단점

• 사용자가 클릭을하면 전체적인 웹사이트를 서버에서 다시 받아오는 것과 동일하기 때문에 UX가 나쁨
• 서버에 과부하가 걸리기 쉬움
• 사용자가 빠르게 웹사이트를 확인할 수 있지만, 동적으로 처리하는 Javascript를 아직 다운받지 못한 경우 기능이 작동하지 않음
• 웹사이트 성능 분석 지표인 TTV(Time To View)는 좋을지라도 TTI(Time To Interact)은 좋지 못함

5. SSG(Static Site Generation)

• React + Gatsby 조합으로 리엑트로만든 웹 어플리케이션을 정적으로 미리 서버에 만들어두면서 동적인 요소도 추가할 수 있음

[참조]

• 드림코딩 유투브 : https://www.youtube.com/watch?v=iZ9csAfU5Os&list=WL&index=2