정적 페이지 vs 동적 페이지

정적페이지(static)

화면의 내용/데이터 등의 변동이 없는 페이지
이미 만들어져 있는 HTML 문서를 사용자에게 보여주는 경우
-> 데이터베이스와 소통하지 않는다
-> only 사용자와의 소통만!(웹 서버에서만 처리한다)

동적페이지(dynamic)

데이터 처리/연산을 통해 화면의 내용, 데이터가 변하는 페이지
서버측 스크립트와 데이터베이스가 상호작용하여 HTML 문서 생성 후 보여주는 경우
-> 데이터베이스와의 소통이 중요
-> 사용자와 데이터베이스 모두 소통(웹 서버에서 웹 어플리케이션 서버로 전달한다)

동적 페이지의 종류

(1) CSR (Client Side Rendering)

• 웹 페이지를 클라이언트 (브라우저)에서 동적으로 렌더링 하는 방식으로, 서버에게 HTTP 요청을 보내고 서버는 클라이언트에게 HTML, CSS, JS 파일 등을 응답 데이터에 담아 보내준다.
• 초기에 모든 데이터를 가져온 후 브라우저가 js파일을 다운받아 동적 dom을 생성하기 때문에 초기 로딩속도가 느리지만 추후 변경 데이터가 있을 시 해당 부분만 새로 다운받으면 된다.
• SPA는 해당 방식을 채택(하나의 페이지에서 변경된 부분만 새로 데이터를 받는다.)
• 리액트, 뷰, 앵귤러 등이 해당 방식.

(2) SSR (Server Side Rendering)

• 웹 페이지를 서버에서 동적으로 렌더링 하는 방식으로, 서버에 HTTP 요청을 보내고 서버는 클라이언트에게 완전하게 만들어진 HTML 파일을 응답 데이터에 담아 보내주며 브라우저는 해당 파일로 페이지를 렌더링한다.
• 서버에서 css까지 적용된 html을 유저에게 먼저 렌더링하여 보여주고 브라우저에서 js코드를 html에 연결하기때문에 사용자는 빠르게 구현된 정적 페이지를 볼 수 있다.
• MPA는 해당 방식을 채택(변경 사항이 있을때마다 전체를 새로 다운받는다.)