Ws, Was, SSR(서버사이드 렌더링), CSR(클라이언트사이드 렌더링)
1. 웹 서버 (WS: Web Server)
• 역할: 정적 웹 페이지 반환
• 웹 서버는 클라이언트(예: 웹 브라우저)로부터 HTTP 요청을 받아서, 서버에 저장된 정적인 파일(HTML, CSS, 이미지 등)을 그대로 반환합니다.
• 정적 웹 페이지: 이미 만들어져 있는 파일이므로, 서버에서 특별한 처리 없이 요청이 들어오면 해당 파일을 그대로 클라이언트에 전송합니다.
• 예시:
• 사용자가 http://example.com/index.html을 요청하면, 웹 서버는 서버에 저장된 index.html 파일을 그대로 반환합니다.
2. 웹 애플리케이션 서버 (WAS: Web Application Server)
• 역할: 정적 + 동적 웹 페이지 반환
• 웹 애플리케이션 서버는 클라이언트의 요청에 따라 동적 웹 페이지를 생성하여 반환합니다. 동적 웹 페이지는 클라이언트의 요청에 따라 서버에서 실시간으로 생성됩니다.
• 동적 웹 페이지: 요청 시점의 데이터를 기반으로 페이지를 생성합니다. 예를 들어, 사용자의 로그인 정보나 데이터베이스에서 가져온 정보를 포함한 페이지를 생성할 수 있습니다.
• 예시:
• 사용자가 http://example.com/user/123을 요청하면, 웹 애플리케이션 서버는 데이터베이스에서 ID가 123인 사용자의 정보를 조회하고, 이 정보를 포함한 HTML 페이지를 생성하여 반환합니다.
3. 웹 서버와 웹 애플리케이션 서버의 차이점 요약
• 웹 서버(WS): 주로 정적인 콘텐츠(HTML, CSS, 이미지)를 클라이언트에게 전달하는 역할을 합니다. 웹 서버는 파일을 그대로 반환하므로, 서버에서 별도의 로직 처리 없이 요청에 응답할 수 있습니다.
• 웹 애플리케이션 서버(WAS): 정적인 콘텐츠뿐만 아니라, 클라이언트의 요청에 따라 동적인 콘텐츠(실시간으로 생성된 페이지)를 생성하여 반환합니다. 서버에서 비즈니스 로직을 실행하고, 데이터베이스와 상호작용하며, 그 결과를 기반으로 페이지를 생성합니다.
CGI와의 관계
• CGI (Common Gateway Interface): 초기에 웹 서버와 애플리케이션을 연결하는 기술로 사용되었습니다. 웹 서버는 클라이언트의 요청을 CGI를 통해 애플리케이션에 전달하고, 애플리케이션이 동적인 콘텐츠를 생성하여 웹 서버에 반환하면, 웹 서버는 이를 클라이언트에 전달합니다.
CGI는 웹 서버와 애플리케이션 간의 연동을 위한 초기 기술이었으며, 이후에는 더 효율적이고 성능이 뛰어난 기술들이 등장하게 됩니다.
1. 초기 웹: 서버 사이드 렌더링과 단일 서버 처리
과거에는 웹 애플리케이션이 지금처럼 분리된 구조를 가지고 있지 않았습니다. 웹 애플리케이션은 주로 서버에서 모든 처리를 완료한 후 클라이언트(브라우저)로 완성된 HTML 페이지를 보내주는 방식이었습니다. 이 과정은 다음과 같이 진행되었습니다:
• 서버 사이드 렌더링 (Server-Side Rendering, SSR):
• 사용자가 브라우저에서 웹 페이지를 요청하면, 서버는 요청을 받아 필요한 데이터를 처리하고, HTML을 생성하여 클라이언트로 반환했습니다.
• 서버에서 모든 연산(데이터베이스 조회, 비즈니스 로직 처리)을 수행한 후 완성된 HTML 파일을 클라이언트에게 보내주기 때문에, 클라이언트는 이 HTML을 렌더링만 하면 되었습니다.
이 당시에는 **웹 서버(WS)**와 **웹 애플리케이션 서버(WAS)**의 구분이 명확하지 않거나, 둘을 함께 사용하는 방식이 일반적이었습니다. 서버는 정적 페이지뿐만 아니라 동적 페이지도 생성하여 클라이언트에 제공했습니다. 이 구조에서는 프론트엔드와 백엔드의 구분이 모호했습니다.
2. 클라이언트 사이드 렌더링의 등장과 프론트엔드와 백엔드의 분리
모바일 기기와 웹 애플리케이션의 복잡성이 증가하면서, 서버에서 모든 처리를 담당하는 구조의 한계가 드러나기 시작했습니다. 특히, 페이지 전환이 많거나 상호작용이 복잡한 애플리케이션의 경우, 서버 사이드 렌더링만으로는 사용자 경험(UX)을 개선하기 어려웠습니다.
이러한 문제를 해결하기 위해, 클라이언트가 더 많은 작업을 처리하도록 하는 클라이언트 사이드 렌더링 (Client-Side Rendering, CSR) 개념이 등장했습니다:
• 클라이언트 사이드 렌더링 (CSR):
• 서버는 클라이언트에게 초기 HTML 페이지와 함께 JavaScript 파일을 전달합니다.
• 이 JavaScript 파일이 클라이언트(브라우저)에서 실행되면서 필요한 데이터를 서버에서 비동기적으로 가져와 페이지의 일부를 동적으로 렌더링합니다.
• 페이지 전환이나 데이터 업데이트와 같은 작업이 서버 요청 없이 클라이언트에서 즉시 처리되므로, 사용자 경험이 크게 개선되었습니다.
3. 프론트엔드와 백엔드의 분리
클라이언트 사이드 렌더링이 확산되면서, 애플리케이션의 아키텍처가 프론트엔드와 백엔드로 명확하게 분리되기 시작했습니다:
• 프론트엔드:
• 클라이언트 측에서 실행되는 부분으로, 주로 HTML, CSS, JavaScript로 작성된 사용자 인터페이스를 담당합니다.
• JavaScript 프레임워크(예: React, Angular, Vue.js)를 통해 클라이언트에서 데이터를 받아 동적으로 페이지를 렌더링합니다.
• 프론트엔드는 REST API 또는 GraphQL을 사용하여 백엔드에서 데이터를 받아오고, 이 데이터를 사용하여 UI를 업데이트합니다.
• 백엔드:
• 서버 측에서 실행되는 부분으로, 데이터베이스와의 상호작용, 비즈니스 로직 처리, 인증 및 권한 부여 등을 담당합니다.
• 백엔드는 클라이언트 요청을 받아 필요한 데이터를 처리한 후, API 형태로 클라이언트에 데이터를 제공합니다.
이 분리로 인해, 프론트엔드 개발자는 주로 사용자 경험과 UI에 집중하고, 백엔드 개발자는 서버 로직과 데이터 관리에 집중할 수 있게 되었습니다.
4. 정리
• 초기 웹(서버 사이드 렌더링):
• 서버가 모든 처리를 담당하여 완성된 HTML 페이지를 클라이언트에 반환.
• 프론트엔드와 백엔드의 구분이 모호함.
• 클라이언트 사이드 렌더링의 등장:
• 클라이언트가 JavaScript를 사용해 서버로부터 데이터를 비동기적으로 가져오고, 동적으로 페이지를 렌더링.
• 사용자 경험이 개선되고, 페이지 전환이 부드러워짐.
• 프론트엔드와 백엔드의 분리:
• 프론트엔드는 클라이언트 측 UI와 상호작용을 담당.
• 백엔드는 서버 측 데이터 처리와 비즈니스 로직을 담당.
• 이로 인해 두 영역이 명확하게 구분되었으며, 각각의 역할에 집중할 수 있는 아키텍처가 탄생.