정적 웹페이지 vs 동적 웹페이지

 

정적 웹페이지(static web page): 서버에 저장되어있는 HTML+CSS 파일 그대로 보여주는 방법

동적 웹페이지(dynamic web page): 상황에 따라 서버에 저장되어있는 HTML에 데이터 추가/가공을 해서 보여주는 방법

 

 

정적 웹페이지 특징 

웹페이지에서 추가적인 통신 및 계산이 필요 없기 때문에 속도가 빠르고 서버에 부담이 적다는 장점이 있지만추가/수정/삭제 등 내용 변경이 필요할 때 HTML 자체를 수정해야 하기 때문에 번거롭다는 단점이 있습니다.

모든 사용자는 같은결과의 웹페이지를 서버에 요청하고 응답받음

예) 사용자요청에 데이터 영향 받지않는 홈페이지, 홈페이지의 회사소개, 음식메뉴, 포토폴리오,게시판 날씨 정보등 내용이 변하지 않고 고정적인 페이지 

 

동적 웹페이지 특징

한 페이지에서 상황/시간/사용자요청에 따라 다른 모습을 보여줄 수 있다는 장점이 있지만 상대적으로 보안에 취약하고 모습이 계속 변하기 때문에 검색 엔진 최적화(search engine optimazation, SEO)가 어렵다는 단점이 있습니다.

예)우리가보는 대부분의 웹페이지는 동적 웹 페이지 네이버 블로그, 티스토리, 홈페이지 게시판 등

 

 

정리 

	정적인페이지	동적 웹페이지
특징	서버에 저장되어있는 그대로 html전송	요청 정보에 따라 html을 처리하여 전송
장점	속도가 빠르다. 서버 부담이 적다.->구축하는데 비용이 적음 백업, 복원이 쉬움.	상황에 맞게 변하는 모습 다양한 서비스
단점	서비스가 한정적이다. 내용 변경이 어렵다.	백업 복원이 상대적으로 어렵다. 보안에 취약하다 검색엔진최적화가 어렵다.

 

 

 

 

동적 웹페이지의 종류

Client Side Rendering (CSR)

자바스크립트에 데이터를 포함해서 보낸 후, 클라이언트에서 HTML을 완성하는 방법이다.
브라우저는 웹서버로부터 다운받은 js파일을 실행합니다.
실행하는 동안 딜레이가 발생하지만 이후에는 서버의 의존도가 낮아 빠른 화면이나 인터렉션이 가능합니다.
단순히 뼈대만 있기 때문에 SEO에 취약하다.

👍 장점

• 첫 로딩만 기다리면, 동적으로 빠르게 렌더링이 되기 때문에 사용자 경험(UX)이 좋다.
• 서버에게 요청하는 횟수가 훨씬 적기 때문에 서버의 부담이 덜하다.

👎 단점

• 모든 스크립트 파일이 로드될 때까지 기다려야 한다.
  • 리소스를 청크(Chunk) 단위로 묶어서 요청할 때만 다운받게 하는 방식으로 완화시킬 수 있지만 완벽히 해결할 수는 없다.
• 검색엔진의 검색 봇이 크롤링을 하는데 어려움을 겪기 때문에 검색엔진 최적화(Search Engine Optimization)의 문제가 있다.
  • 구글 봇의 경우는 JS를 지원하지만, 다른 검색엔진의 경우 그렇지 않기 때문에 문제가 된다.

 

Server Side Rendering (SSR)

서버에서 HTML에 데이터를 끼워넣어 완성된 형태의 HTML을 보내주는 방법이다.
브라우저에서 보는 파일을 만들어 내는 로직 파일을 서버에 올려서 실행합니다.
이미 DOM 구성이 다 된 파일을 브라우저가 받기 때문에 초기 구동 속도가 빠르다.
이미 내용이 다 차있기 때문에 검색 엔진들이 정보를 수집할때 정확한 정보를 가져갈 수 있어서 SEO에 좋습니다.

👍 장점

• 초기 로딩 속도가 빠르기 때문에 사용자가 컨텐츠를 빨리 볼 수 있다.
• JS를 이용한 렌더링이 아니기 때문에 검색엔진 최적화가 가능하다.

👎 단점

• 매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 경험이 SPA에 비해서 좋지 않다.
• 서버에 매번 요청을 하기 때문에 서버의 부하가 커진다.