[배포] 정적 웹사이트 vs 동적 웹사이트

 

정적 웹사이트와 동적 웹사이트

 

정적 웹사이트

• HTML 파일(코드) 자체로 배포되는 사이트 (CSR, Client Side Rendering)
• 현대의 2-tier Architecture에서 정적 웹사이트의 사용이 더욱 보편적

 

동적 웹사이트

• 서버에 의해 HTML 파일이 동적으로 생성되는 사이트 (SSR, Server Side Rendering)

 

 

 

웹사이트 렌더링 방식의 변천

 

• AJAX 이전에는 요청에 따라 결과가 변하는 동적인 웹페이지를 만드려면, 서버가 매번 동적으로 생성해야 했다.
• 동적 웹사이트를 받아오기 위해서는, 서버가 HTML의 형태로 브라우저에 제공해주어야만 했기 때문에,
• 헤더나 푸터 등의 페이지 구성요소의 중복 요청/응답이 빈번했고, 네트워크 상에서 주고받는 패킷의 크기가 비교적 커졌다.
• AJAX 이전에는 서버에서 웹페이지를 만드는 기술이 보편화되었고,
• 동적 웹사이트를 만드는 기술로는 PHP, JSP, ASP, node.js 등이 사용되었다.
• 점차 브라우저의 발달과 AJAX 기술이 보편화되면서, 모든 동적인 정보들을 서버가 부담할 필요가 없어진다.
• 필요한 부분만 클라이언트가 요청할 수 있게 되었고, 이로 인해 서버의 부하가 다소 줄어들게 된다.
• 이에 따라 서버는 JSON과 같은 순수한 데이터 포맷만 제공해주는 형태로 흐름이 바뀌기 시작했으며,
• 클라이언트 사이드(웹페이지)는 자바스크립트와 AJAX 기술을 이용해 Single Page Application으로 변모하기 시작한다.
• 자바스크립트는 동적인 렌더링을 지원하나, 결국 서버가 웹페이지를 렌더링하지 않으며,
• HTML/CSS/JS 파일의 소스 코드 그대로 작동하는 특징을 갖고 있기 때문에, 정적 웹사이트라고 할 수 있다.

 

// 동적 웹페이지 예제 (node.js)
const http = require('http');

const server = http.createServer((req, res) => {
  res.setHeader('Content-Type', 'text/html'); // HTML 문서의 형태로 전달됨
  res.end('<h1>동적 웹페이지</h1><p>with 랜덤한 값</p>' + Math.random()); // 서버에 의해서 동적으로 바뀜
});

server.listen(3000);

 

 

더이상 동적 웹사이트는 쓰이지 않을까?

여전히 사용된다.

SSR의 장점을 살리기 위해서 다양한 방법으로 동적 웹사이트가 만드는 경우도 있고,

성능의 향상을 극대화하기 위해 CCR, SSR의 하이브리드 형태로 구성하는 경우도 있다.