TIL 2021.7.15 : 정적 웹 vs 동적 웹

정적 웹 (Static Web)

1. 서버에 저장된 파일(html, css, javascript)들이 그대로 전달되어 보여지는 웹페이지

2. 서버는 사용자의 요청(request)에 맞는, 서버 자신이 저장하는 웹페이지를 클라이언트로 보낸다.

3. 클라이언트는 서버에 저장된 데이터가 변경되지 않으면 계속 같은 페이지를 보게 된다.

단, 이 설명은 완벽히 맞는 말은 아니다. 아래 짤의 설명처럼 정적웹의 경우에도 클라이언트의 브라우저가 받아온 자바스크립트의 코드를 '요리해서' 일부 부분이 매번 다르게 보여질 수 있다(이건 뒤에서 설명할 클라이언트 사이드 렌더링과 일맥상통하는 내용이다). 즉, 정적 웹의 정의는 '언제나 같은 화면이 보인다가 아니라, 이미 만들어져 서버가 저장하고 있는 리소스(html, css, javascript)를 클라이언트가 서버에서 가져와서 보여지게 하는 것'이다.

4. 정적웹의 사용례

   회사 소개 페이지, 댓글 없는 블로그 등등

 

동적 웹 (Dynamic Web)

1. 서버에 있는 데이터들을 스크립트에 의해 가공처리 한 후 생성되어 전달되는 웹 페이지

2. 클라이언트의 요청 정보를 처리한후 제작된 HTML 문서를 클라이언트에게 전송하는 웹 

3. 데이터베이스에서 값을 읽어서 접속할 때마다 최신 정보를 주는 것.

4. 같은 웹페이지라도 사용자마다 다른 모습의 웹페이지를 서버에 요청하고 받을 수 있다.

5. 동적웹의 사용례

   블로그, 티스토리, 홈페이지 게시판 

 

그렇다면 클라이언트 사이드 렌더링(CSR)은 정적웹? 동적웹? 

React나 Vue로 웹개발을 했다면 클라이언트 사이드 렌더링을 하는데 이것은 정적웹 동적웹 둘 중 어느 방식으로 동작할까? 정답부터 말하면 정적웹으로 동작한다. React나 Vue로 만든 웹앱 서비스는 웹서버에서 단순히 웹껍데기(= 정적자원 : html, css, javascript)를 다운 받고, 클라이언트인 브라우저가 다른 서버(주로 DB를 다루는 서버)와 JSON으로 데이터를 주고받으며(데이터 통신) 로그인, 상품 정보 받아오기, 결제하기등의 핵심 작업들을 수행하는 것이기 때문이다. 이때, 클라이언트의 핵심 작업들은 웹서버에서 가져온 javascript 코드가 담당한다. 

 

참고사이트

1. 얄팍한 코딩 사전 : 정적웹은 뭐고 동적웹은 뭔가요?

2. https://velog.io/@pluviabc1/%EC%A0%95%EC%A0%81-%EC%9B%B9%EA%B3%BC-%EB%8F%99%EC%A0%81-%EC%9B%B9%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94-%EC%96%84%ED%8C%8D%ED%95%9C-%EC%BD%94%EB%94%A9-%EC%82%AC%EC%A0%84

3.  https://maily.so/grabnews/posts/ce76c9

4. https://blog.naver.com/insaweb/221650456057

5. https://www.zehye.kr/etc/2019/12/06/12etc_static_dynamic_webpage/