[Web] Static Page와 Dynamic Page

인터넷을 이용하면서 접속하게 되는 웹 페이지는 크게 두가지로 나뉜다.
저장된 파일을 그대로 보는 정적 웹 페이지(Static Web Page)와 다른 인자들에 의해 변경되어 보이는 동적 웹 페이지(Dynamic Web Page)다.
각각의 특징들을 살펴보자.

✅ 정적 웹 페이지 (Static Web Page)

• 웹 서버에 이미 저장된 파일(html, image, 자바스크립트 등)를 클라이언트에게 전송하는 웹 페이지
• 사용자는 서버에 저장된 데이터가 변경되지 않는 한 고정된 웹 페이지를 보게 된다.
• 모든 사용자는 같은 결과의 웹 페이지를 서버에 요청하고 응답 받는다.

✏️ 장점

• 다른 처리 없이 요청에 대한 파일만 전송하기 때문에 빠르다.
• 단순한 문서로 웹 서버를 구축하므로 호스팅 서버에 연결하는 비용이 적다.

✏️ 단점

• 저장된 정보만 보여주기 때문에 서비스가 한정적이다.
• 추가, 삭제, 수정 등의 작업이 모두 코드를 건드려야 하기 때문에 관리가 힘들다.

✅ 동적 웹 페이지 (Dynamic Web Page)

• 요청 정보를 처리한 후에 제작된 HTML 문서를 클라이언트에게 전송하는 웹 페이지
• 사용자는 상황, 시간, 요청 등에 따라 달라지는 웹 페이지를 보게 된다.
• 같은 페이지라도 사용자마다 다른 결과의 웹 페이지를 서버에 요청하고 받을 수 있다.
• 우리가 보는 대부분의 웹 페이지는 동적 웹 페이지다.

✏️ 장점

• 다양한 정보를 조합하여 웹 페이지를 제공하기 때문에 서비스가 다양하다.
• 웹 사이트 구조에 따라 추가, 수정, 삭제를 사용자측에서 가능하기 때문에 관리가 쉽다.
• 관리가 쉽기 때문에 전체적인 사이트 운영 비용이 절감될 수 있다.

✏️ 단점

• 사용자에게 웹 페이지를 전달하기 전에 처리하는 작업이 필요하기 때문에 상대적으로 느리다.
• 웹 서버외에 추가적으로 처리를 위한 어플리케이션 서버가 필요하기 때문에 추가 비용이 들 수 있다.
• 백업, 복원이 상대적으로 어렵다.

✏️ 동적 웹 페이지의 종류

1. CSR(Client Side Rendering)

• 웹 페이지를 클라이언트(브라우저)에서 동적으로 렌더링 하는 방식으로, 서버에게 HTTP 요청을 보내고 서버는 클라이언트에게 HTML, CSS, JS 파일 등을 응답 데이터에 담아 보내준다.
• 클라이언트는 응답 데이터에 있는 HTML, CSS, JS 파일로 렌더링을 하되, 추가적인 데이터가 필요하면 주로 Ajax를 이용한 비동기 통신을 통해 추가적인 렌더링을 진행한다.

---

2. SSR(Server Side Rendering)

• 웹 페이지를 서버에서 동적으로 렌더링하는 방식으로, 서버에 HTTP 요청을 보내고 서버는 클라이언트에게 완전하게 만들어진 HTML 파일을 응답 데이터에 담아 보내주며 브라우저 해당 파일로 페이지를 렌더링한다.
• CSR 방식은 처음에는 서버로부터 데이터가 없는 HTML 파일을 받고 이후 추가적인 데이터를 요청하여 진행하지만, SSR 방식은 처음부터 완전하게 만들어진 HTML 파일을 응답받기 때문에 추가적인 데이터를 가져오기 위한 네트워크 비용이 발생하지 않는다.

---

3. MPA(Multi Page Application)

• 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드 되고, 그에 맞춰 전체 페이지를 다시 렌더링하는 방식이다. (SSR 방식)
• 인터넷 주소창에 주소를 입력하거나 링크를 클릭하는 등, 사용자가 어떠한 요청을 하게 되면, 그에 맞는 HTML, CSS, JS, Image 등의 파일들이 전부 다운로드 되어 렌더링된다.
• 장점
  • 검색 엔진 최적화(SEO, Search Engine Optimization) 관점에서는 유리함
  • MPA는 완성된 형태의 HTML 파일을 서버로부터 전달 받기에 검색엔진이 페이지를 크롤링하기에 적합함
• 단점
  • 새로운 페이지 이동 시 깜빡거림
  • 프론트엔드와 백엔드가 밀접하게 연결되어 개발이 복잡할 수 있음

---

4. SPA(Single Page Application)

• 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한 번만 다운로드 한다.
  그 이후, 새로운 페이지에 대한 요청이 있을 때마다 페이지 갱신에 필요한 데이터만 전달 받아 페이지를 갱신한다. (CSR 방식)
• 즉, MPA 방식과 달리 특정 링크를 클릭했다고 해서 그에 관련된 모든 파일을 다운받는 게 아니라 필요한 정보만 받아서 그 정보를 기준으로 업데이트하는 방식이다.
• SPA를 만드는 데 사용하는 프레임워크로 React, Vue, Angular가 있다.
• 장점
  • 전체 리소스를 최초 접속 시에 가져오기에 맨 첫 페이지 로딩시간은 길지만 이후 페이지에서는 속도가 더 빠름
  • MPA와 달리 페이지의 일부만 바뀌는 것이기에 깜빡거림이 없고 반응속도가 좋음
  • 로컬 데이터를 효과적으로 캐싱할 수 있음
• 단점
  • 초기에 웹 애플리케이션에 필요한 모든 정적 리소스를 한번에 다 받기 때문에 초기 구동 속도가 느림.
  • SEO 관점에서 불리