How the web works? - part 2

Static Website

• Static Website는 이름 그대로 정적인 웹 사이트로 화면에 보이는 컨텐츠가 HTML 파일에 작성되어 브라우저에 그대로 보이는 웹사이트 입니다.
  HTML, CSS, JS 파일이 서버에 업로드 되면 개발자가 수정하기 전까지는 시간에 따라 변하지 않고 항상 똑같은 내용을 보여줍니다.
  Static Website에 적합한 예시로는 회사 소개 페이지나 자기소개 페이지가 있습니다.

Static Website 장점

• 클라이언트의 요청에 대한 파일만 보내주면 되기때문에 응답속도가 빠릅니다.

Static Website 단점

• 서버에 저장된 정보만 브라우저에 보여주기 때문에 서비스가 제한적입니다.

Dynamic Website

• Dynamic Website는 Static Website와 반대로 클라이언트로 부터 요청을 받으면 서버에서 추가적인 처리 과정을 거치고 클라이언트에게 응답을 보냅니다.
  그러므로 같은 웹 페이지라도 사용자마다 다른 결과의 웹페이지를 볼 수 있습니다.
  일반적으로 우리가 아는 대부분의 대부분의 웹 사이트는 Dynamic Website 입니다.

Dynamic Website 장점

• 여러 데이터를 가공하여 클라이언트에게 보낼 수 있어서 다양한 서비스를 제공할 수 있습니다.

Dynamic Website 단점

• 클라이언트의 요청에 대해서 서버에서 추가적인 처리과정을 거쳐야 하기
  때문에 상대적으로 응답속도가 느립니다.
  (요즘엔 서버 성능이나 인터넷 다운로드,업로드 속도가 빨라서 큰 영향을 안줍니다.)

MPA(Multi Page Application)

웹 페이지마다 HTML 파일이 존재하고 사용자가 해당 웹 페이지를 요청하면 서버가 필요한 데이터와 HTML파일을 보내주는 웹 어플리케이션입니다.

SPA(Single Page Application)

하나의 웹페이지로 이루어진 웹어플리케이션입니다.
하나의 HTML파일을 기반으로 JavaScript를 이용해서 동적으로 화면의 컨텐츠를 변경합니다.

CSR(Client Side Rendering)

HTML 다운로드 → JS 다운로드 → JS 실행 → DATA 서버로부터 받기 → Content 확인

클라이언트 사이드에서 JavaScript를 사용하여 html을 렌더링 합니다.

CSR의 특징

• 모든 JavaScript 파일을 다운 받아야 하기 때문에 초기 로딩 속도가 느립니다.
• 데이터 요청이 있을 때 서버에 요청을 하기 때문에 서버에 부하가 적습니다.
• 초기에는 HTML 파일이 비어 있기 때문에 크롤러가 데이터 수집하기 어렵습니다.
• 검색엔진 최적화(SEO)에 문제가 생길 수 있습니다.
• 사용자가 필요한 부분만 요청을 보내기 때문에 빠른 상호작용을 기대할 수 있습니다.

SSR(Server Side Rendering)

완전한 HTML파일을 다운받아 렌더링(Rendering)하며,
웹서버에 요청할때 마다 브라우저의 새로고침이 발생하고 서버에 새롭게 보여줄 페이지를 요청을 하는 방식입니다.

SSR 특징

• 다운 받는 파일이 적어서 초기 로딩 속도가 빠릅니다.
• 서버에 잦은 요청과 응답 때문에 서버에 부하가 큽니다.
• HTML에 대한 정보가 처음부터 있기 때문에 크롤러가 데이터 수집하기 용이 합니다.
• 모든 검색엔진에 대해서 검색엔진 최적화(SEO)가 가능합니다.

용어 설명

렌더링(Rendering): 웹 페이지에 접속할때 해당 페이지를 브라우저 화면에 보여주는 것