정적 웹 페이지와 동적 웹 페이지

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

 

정적 웹 페이지 (Static Web Page)

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

장점

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

단점

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

 

동적 웹 페이지 (Dynamic Web Page)

• 서버에 저장된 HTML 파일이 그대로 브라우저에 나오는 것이 아닌, 동적으로 만들어지는 웹 페이지
• 요청에 관하여 사용자는 조건에 따라 다른 결과를 받게 된다.
• 사용자는 상황, 시간, 요청 등에 따라 달라지는 웹 페이지를 보게 된다.

1. CSR (Client Side Rendering)

• CSR은 데이터가 없는 HTML 문서나 Static 파일만을 처음에 받아와 로드하고, 이후에 데이터를 요청하여 받아오는 방식이다.
• 자바스크립트를 사용하여 브라우저에서 페이지를 직접 렌더링을 진행한다.
• 모든 로직, 데이터 가져오기, 템플릿 및 라우팅 등은 서버가 아닌 클라이언트 측에서 처리한다.

2. SSR (Server Side Rendering)

• CSR과 상반되게 서버에서 동적으로 데이터까지 전부 삽입하여 완성된 HTML을 넘겨준다.

• 서버 렌더링은 브라우저에서 응답을 받기 전에 처리되므로 클라이언트에서 데이터를 가져오거나 템플릿 작성에 대한 추가 왕복이 발생하지 않는다. (어쨌든 웹 서버에서 모든 요청이 처리된다.)

3. MPA (Multi Page Application)

• 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드 되고, 그에 맞춰 전체 페이지를 다시 렌더링하는 방식이다. (즉, SSR 방식으로 렌더링한다.)

• 인터넷 주소창에 주소를 입력하거나 링크를 클릭하는 등의 사용자가 어떠한 요청을 하게 되면, 그에 맞는 완전한 페이지를 받아오고 다시 렌더링된다.

• 장점은 검색 엔진 최적화(SEO, Search Engine Optimization) 관점에서는 유리하지만, 단점으로는 새로운 페이지를 이동할 때마다 완전히 새로 렌더링 되므로 깜빡거리고 프론트엔드와 백엔드가 밀접하게 연결되어 개발이 복잡할 수 있다.

4. SPA (Single Page Application)

• 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한 번만 다운로드를 한다.
  그 이후, 새로운 페이지에 대한 요청이 있을 때마다 페이지 갱신에 필요한 데이터만 전달 받고 그 정보를 기준으로 페이지를 갱신한다. (즉, CSR 방식으로 렌더링한다.)

• SPA를 만드는데 사용되는 프레임워크로 React, Bue, Angular가 있다.

• 장점으로는 최초 접속 시 맨 첫 페이지 로딩 시간을 길어도 이후 페이지부터는 속도가 빠르다. 또한 앞선 MPA와 달리 깜빡거림이 없고 반응 속도가 좋다. 또한 로컬 데이터를 효과적으로 캐싱할 수도 있다. 단점으로는 초기 구동 속도가 느리고 SEO에 불리하다는 것이다.

Referece

https://velog.io/@dyunge_100/WEB-%EC%A0%95%EC%A0%81-%EC%9B%B9-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%99%80-%EB%8F%99%EC%A0%81-%EC%9B%B9-%ED%8E%98%EC%9D%B4%EC%A7%80

[WEB] 정적 웹 페이지와 동적 웹 페이지