220110 TIL

Zoey·2022년 1월 10일

TIL 백엔드 프론트엔드

TIL

목록 보기

1/7

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

정적웹페이지

정적 웹페이지(static web page)는 서버에 저장되어있는 HTML+CSS 파일 그대로 보여주는 것!
사용자는 서버의 저장된 데이터가 변하지 않는 한 같은 화면을 보게 된다.
모든 사용자는 같은 결과의 웹페이지를 서버에 요청하고 받는다.

장점: 요청 파일만 전송하면 되기 때문에 속도가 빠르고 단순한 문서들로 이루어져있어 구축 비용이 적다!
단점: 수정/삭제/추가 등의 작업을 서버에서 직접 다운받아 관리해야하므로 번거로움

동적웹페이지

반면 동적 웹페이지(dynamic web page)는 상황에 따라 서버에 저장되어있는 HTML에 데이터 추가/가공을 해서 보여주는 방법입니다 🙂
같은 페이지라도 사용자에 따라 다른 결과의 웹페이지를 요청하고 받을 수 있음.
동적 웹페이지는 한 페이지에서 상황/시간/사용자요청에 따라 다른 모습을 보여줄 수 있다는 장점이 있지만 상대적으로 보안에 취약하고 모습이 계속 변하기 때문에 (많은 경우 주소도 같이 변함!) 검색 엔진 최적화(search engine optimazation, SEO)가 어렵습니다.

장점:
-상황/시간/사용자요청에 따라 다른 모습을 보여줄 수 있다.
-사용자단에서 관리가 가능하므로 운영비용이 적게든다.

단점: 정적에 비해 보안에 취약하고 모양이 계속 변하기 때문에 검색 엔진 최적화(search engine optimazation, SEO)가 어렵다.

> 동적웹페이지의 종류

Client-side rendering (CSR) 자바스크립트에 데이터를 포함해서 보낸 후, 클라이언트 쪽에서 HTML을 완성하는 방법
- 점점 더 복잡해지는 웹페이지를 구현하기 위해서 전통적인 방식의 SSR보다는 CSR로 웹을 구현하는 경우가 많아짐

동작과정 : HTML 다운로드-> JS 다운로드 -> JS 실행 -> DATA 서버로부터 받기 -> Content 확인가능

장점: 
- 클라이언트 사이드 렌더링은 사용자의 행동에 따라 
필요한 부분만 다시 읽어들이기때문에 SSR 보다 조금 더 빠른 인터랙션이 가능
- page 전체를 요청하지 않고 페이지에 필요한 부분만 변경하게 하기 때문에, 
모바일 네트워크에서도 빠른 속도로 렌더링이 가능
- lazy loading을 지원해줌
 ❓lazy loading이란 ? 페이지 로딩 시 중요하지 않은 리소스의 로딩을 늦추는 기술
 (Ex. 스크롤 내려야만 해당 이미지 보이게 하는 것)

- 서버사이드 렌더링이 따로 필요하지 않기때문에 일관성있는 코드를 작성할 수 있음

단점:
- Googlebot과 Searchconsole에 검색 노출이 되지 않음 
(브라우저가 없기때문에, html만 가져와서 검색에는 뜨지 않음)
- 페이지를 읽고, 자바스크립트를 읽은 후 화면을 그리는 시간까지 
모두 마쳐야 콘텐츠가 사용자에게 보여지기 때문에 초기구동 속도가 느림

Server-side rendering (SSR) 서버 쪽에서 템플릿 HTML에 데이터를 끼워넣어 완성된 형태의 HTML을 보내주는 방법

전통적인 웹 어플리케이션 렌더링 방식

장점: 
- 사용자가 처음으로 컨텐츠를 볼 수 있는 시점을 앞당길 수 있음
- 검색엔진최적화(SEO) 적용이 용이

단점: 
- 모든 요청에 관해 필요한 부분만 수정하는 것이 아닌, 완전히 새페이지를 로딩하고 렌더해줌(새로고침)
- 전체를 로딩하다보니 CSR보다 느리고, bandwitdh를 많이 쓰고, 사용자 경험 좋지 않음
(사용자가 처음으로 컨텐츠를 볼 수는 있으나, 화면단에는 html요소들이 나오나 js파일이 다 다운로드 되지않아서 버튼이 클릭되지않는 등의 현상이 있을 수 있음)