![[그림 1-1] 정보의 일방적인 공급과 취득이 이뤄지는 Web 1.0](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/906c965e-6df1-460c-8f33-930b13e1eb8e/SSR%EC%9D%B4%EB%9E%80_(4).png)
본격적으로 SSR과 CSR을 설명하기에 앞서, 웹 서비스의 역사를 통해 다양한 렌더링 방식의 탄생과정을 알아보겠습니다. 웹은 크게 Web 1.0, 2.0, 3.0으로 발전해 왔습니다.
[그림 1-1] 정보의 일방적인 공급과 취득이 이뤄지는 Web 1.0
Web 1.0의 웹 서비스는 1990년 팀 버너스리가 최초로 만든 웹 브라우저와 웹 서버를 통해 시작됩니다. 서버에 미리 만들어져있는 정적인 HTML 파일들이 있고, 클라이언트는 그것을 받아와서 화면에 표시하는 방식으로 작동했습니다. HyperText Markup Language의 줄임말인 HTML은 문서나 데이터의 논리적인 구조를 표기하고 문서와 문서를 링크로 연결하는 표준 마크업 언어입니다. 즉, HTML 로직이 내재되지 않은 마크업 언어이기 때문에 정적으로 사용자들에게 정보를 전달만 할 수 있었습니다. 당시 웹은 미리 만들어둔 HTML만으로 이루어져 있는 단순하고 정적인 파일을 서버에서 가져온 그대로 사용하는 SSG(Static Site Generation) 방식으로 동작하였습니다. SSG 방식은 페이지 이동 시 해당 페이지의 HTML 파일을 새로 받아와서 전체 페이지를 업데이트하는 **MPA(Multi Page Application)**입니다. 이 시기에는 단순한 정보 제공을 목적으로 정보의 일방적인 공급과 취득이 이루어졌습니다.[1]
이후 1994년, 웹페이지 디자인을 위한 CSS가 등장하고, 1995년 넷스케이프는 동적인 웹 사이트를 만들기 위해 브라우저에서 동작하는 프로그래밍 언어인 자바스크립트(JavaScript)를 개발하게 됩니다.
시간이 지나면서 사용자와 상호작용이 가능한 동적인 웹페이지가 필요해짐에 따라 PHP, JSP, ASP 같은 서버에서 실행되는 서버 스크립트 언어가 등장했으며, 서버에서 직접 데이터를 받아서 동적으로 HTML을 생성한 후 클라이언트에 전달하는 **SSR(Server Side Rendering)**이 사용되었습니다.
1996년, <iframe> 태그가 등장하며 문서 내 또 다른 문서를 담을 수 있게 되었고, 이를 통해 일부분만 업데이트하거나 동적인 콘텐츠를 사용하는 것이이 가능해졌습니다. 또한 1998년 XMLHttpRequest API가 등장하면서 서버로부터 HTML 문서 전체가 아닌 JSON과 같은 포맷으로 필요한 데이터를 받아올 수 있게 되었습니다. 이를 통해 JavaScript를 이용해서 동적으로 HTML 요소를 생성하고 페이지에 업데이트할 수 있게 됩니다. 이 방식은 후에 Web 2.0에서 Ajax라는 공식적인 이름을 갖게 됩니다.
![[그림 1-2] 상호 교류가 가능해진 Web 2.0](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/bd619ff2-f3d6-47ec-b9bb-c3c808c5cba1/SSR%EC%9D%B4%EB%9E%80_(14).png)
[그림 1-2] 상호 교류가 가능해진 Web 2.0
Web 2.0의 웹 서비스는 JavaScript의 출현으로 동적인 웹 페이지를 구현할 수 있게 되면서 시작됩니다. 서버와 클라이언트가 HTML 페이지와 JavaScript 로직을 통해 데이터를 주고받을 수 있어 유저 간 상호 교류가 가능하게 되고, 웹은 참여와 공유의 장으로 발전합니다.
이 시기에 앞서 언급한 Ajax가 구글에서 Gmail과 Google Maps를 만드는 데 사용되면서 웹의 역사에 있어 큰 획을 긋게 됩니다. Ajax는 서버와 클라이언트가 비동기적 정보 교환을 하며, 화면 전환 시 전체 페이지가 아닌 필요한 부분만 렌더링하는데 사용하는 기술입니다. 이전에는 이메일 전송 시 메일 전송이 완료되고 새 화면이 뜰 때까지 기다려야했지만, Gmail의 경우 메일 전송 중 다른 작업이 가능했고, 화면 전환 시 끊기지 않는 사용감으로 사용자 편의성에 큰 발전을 가져왔습니다. 이렇게 **CSR(Client Side Rendering)**과 **SPA(Single Page Application)**가 등장하게 됩니다. CSR은 웹 페이지 렌더링이 클라이언트 측에서 이루어지는 방식이며, SPA란 단일 HTML 페이지에서 필요한 데이터만 부분적으로 가져와 렌더링하며 전체 웹 사이트를 구현하는 방식을 말합니다.[2]
이후 JQuery, React 등 다양한 JavaScript 라이브러리와 Node.js의 등장은 보다 빠르고 효율적으로 동적인 웹 애플리케이션을 생성할 수 있게 되었습니다. 이는 CSR의 부흥을 이끌며 웹 산업에 상당한 영향을 미쳤습니다. 기존 서버에서 이루어지던 비즈니스 로직이나 UI 작업이 클라이언트로 옮겨가 클라이언트 측 개발 프로세스가 복잡해졌고, 유저가 많아지면서 방대해진 데이터 때문에 웹 사이트가 매우 복잡하며 정교해지게 되어 자연스럽게 프론트엔드 영역과 백엔드 영역이 분리되었습니다.
이후 초기 로딩 속도, 검색 엔진 최적화 등과 같은 문제가 있는 CSR에 한계를 느끼며, 이러한 단점을 보완할 수 있는 SSR이 다시 주목받게 되었습니다. 또한 초기 렌더링 방식으로 SSR을 사용하고 그 이후에는 CSR을 사용하는 Isomorphic App이 등장했으며, CSR과 SSR의 장점을 섞어서 사용하는 Universal Rendering 방식도 많이 사용되고 있습니다.[3][4]