웹 렌더링 방식(SSR, CSR, SSG)

📌 초창기의 웹 렌더링

초창기의 모든 웹 페이지는 정적인 페이지였다. 대부분의 로직은 서버에서 수행되고, 브라우저는 서버로부터 전달받은 정적인 HTML과 CSS를 단순히 렌더링 하는 방식으로 동작했다. 화면에 어떠한 변화를 주려고 화면을 전환하면 그때마다 서버로부터 새로운 HTML을 전송받아서 다시 렌더링 하는 것이다. 매번 처음부터 새로 렌더링 하기 때문에 성능적인 문제가 발생했고 전환될 때마다 화면이 깜박이는 문제 등이 발생했다.

📌 Ajax의 등장

1999년 자바스크립트를 통해서 서버와 브라우저가 비동기로 데이터를 주고받을 수 있는 Ajax가 등장한다. Ajax의 등장은 새로운 패러다임의 전환이었는데, 매번 전체 페이지에 대한 데이터를 가져올 필요 없이 필요한 부분의 데이터만 불러와서 동적으로 웹 사이트 화면을 변경할 수 있게 된 것이다. 항상 새롭게 렌더링 하지 않아도 되기 때문에 깜박임 없이 자연스러운 화면 전환이 가능해졌다. 또한 서버에서만 이루어지던 다양한 로직 처리나 HTML 생성을 클라이언트에서도 처리할 수 있게 되었다.

이런 과정 속에서 클라이언트 사이드에서 쉽게 화면 처리를 할 수 있도록 여러 가지 라이브러리나 프레임워크가 만들어지기 시작했다. 2006년에는 jQuery가 등장하면서 어려운 DOM 조작을 쉽게 컨트롤할 수 있게 되었다. 또한 오늘날에는 복잡하고 거대해진 웹 애플리케이션을 보다 쉽게 구축할 수 있도록 도와주는 Angular, React, Vue 등의 다양한 프레임워크가 활발하게 사용되고 있다.

📌 Client Side Rendering(CSR)

React와 같은 프론트엔드 프레임워크들은 클라이언트 사이드에서 전적으로 웹 렌더링을 책임지는 방식이 보편화되었다. 서버에서 아무 내용 없는 빈 HTML을 보내면 클라이언트에서 동적으로 태그와 스타일을 생성해 페이지를 채우게 된다. 이렇게 되면 최초에 HTML을 받는 것 외에는 페이지 렌더링을 위해서 별도의 HTTP 통신을 할 필요가 없어진다. 그렇게 서버는 오직 Ajax를 통해 필요한 데이터를 주고받는 역할만을 수행한다.

이러한 방식을 Single Page Application(SPA)라고 부른다. 서버 측에서는 텅 빈 HTML 문서 하나와 자바스크립트 코드만 내려주고 이후에 모든 일들은 클라이언트 측에서 브라우저가 비동기로 처리하게 된다. 유저가 어떤 버튼을 클릭했을 때, 원격 API를 호출해서 데이터를 가져온 후 HTML 문서로 렌더링 하는 일련의 과정이 모두 자바스크립트를 통해 브라우저에서 일어나게 된다.

문제는 클라이언트 사이드 렌더링 방식 또한 여러 문제들이 존재한다는 것이다. 대표적인 것이 SEO(Search Engine Optimization) 문제가 있다. 구글 크롤러와 같은 여러 웹 크롤러들은 웹 사이트의 HTML을 읽어들이고 인덱싱하여 검색 엔진이 해당 페이지를 찾아내도록 한다. 그런데 클라이언트 사이드 렌더링 방식으로 만들어진 웹사이트는 최초에 빈 HTML만 렌더링 하여 크롤러들이 제대로 컨텐츠를 읽어들일 수 없다는 문제가 있다.

또한 렌더링을 위해 많은 양의 자바스크립트 코드가 실행되다 보니 성능적 이슈가 생겨났다. 클라이언트 사이드 렌더링 방식은 첫 페이지 로딩이 느리다. 최초로 서버에서 받은 빈 HTML은 페이지 로드에 필요한 자바스크립트를 참조하는데 클라이언트 렌더링 할 때 페이지 로드에 필요한 자바스크립트 코드, 프레임워크나 라이브러리 소스 코드를 모두 불러오기 때문이다.

📌 SSR (Server Side Rendering)

브라우저가 서버에 페이지를 요청하면 서버가, 필요한 데이터로 HTML을 구성하여 브라우저에 전송한다. 그러면 브라우저에서, 응답받은 HTML을 그대로 렌더링한다. SSR은 말 그대로 서버 측에서 웹페이지를 렌더링 하는 기술을 뜻한다. SSG와 가장 큰 차이점은 빌드 타임에 웹사이트 전체를 미리 만들어 놓는 것이 아니라, 클라이언트로부터 요청이 들어올 때마다 실시간으로 해당 웹페이지를 만들어낸다는 것이다.

SSR을 사용하면 애플리케이션에서는 변경된 데이터가 즉시 웹페이지에 반영이 되고 유저마다 다른 유저 경험을 제공하기도 용이해진다. 따라서 수시로 업데이트되고, 개인화된 경험을 제공해야 하는 전자 상거래(E-commerce) 플랫폼이나 소셜 네트워크 서비스(SNS)에 매우 적합한 렌더링 방식이라고 할 수 있다.

서버에서 모든 콘텐츠를 로드하여 전달하기 때문에 SEO 면에서 이점이 있다. 그리고 첫 페이지 로딩이 빨라지는데, 이미 페이지 로드에 필요한 데이터를 서버에서 불러왔기 때문에 클라이언트 사이드에서 별도의 자바스크립트 코드를 더 불러올 필요가 없기 때문이다.

하지만 서버 사이드 렌더링에서도 단점이 존재한다. 서버에서 매번 동적으로 계산하여 페이지를 렌더링 하기 때문에 서버 부하가 생겨날 수 있다. 또한 서버로부터 매번 페이지를 전달받기 때문에 서버에서 페이지를 생성하는 시간이 소요된다.

웹 서버만 있으면 쉽게 호스팅이 가능한 SPA나 SSG와 달리, SSR을 사용하려면 서버 측에서 웹 페이지를 렌더링 하기 위해서 애플리케이션 서버가 추가로 필요하다. 그리고 SSR을 사용하는 서비스에서는 원격 API나 Headless CMS를 사용하는 대신에 자체 데이터베이스 서버나 클라우드 플랫폼에 데이터를 저장해놓는 경우가 많다. 그래서 이러한 인프라를 구축하고 운영할 수 있는 여건이 되는 중대형 서비스에서 SSR이 많이 사용되고 있다.

📌 SSG (Static Site Generation)

위의 과정들을 거쳐 사람들은 이런 생각을 가지게 되었다. 유저의 데이터에 따라 다르게 보여주는 페이지의 경우는 매번 서버에서 동적으로 생성할 필요가 있지만, 모든 유저에게 항상 같은 내용을 보여주는 페이지는 동적으로 생성할 필요가 없지 않을까?

회사 소개 페이지 같은 경우에는 모든 유저에게 같은 화면이 보이기 때문에 동적으로 생성할 필요가 없다. 한 번만 생성한 이후에 CDN으로 어딘가에 저장해두고 필요할 때마다 로드하면 되는 것이다. React와 같은 프레임워크를 사용한다면 Next.js나 Gatsby.js 등의 사용으로 정적 페이지를 생성할 수 있다.

❓ CDN (Content Delivery Network)?

증가한 데이터를 지연 없이 처리하기 위해 데이터를 분산해서 전달하는 기술이다. CDN은 지리적 제약 없이 전 세계 사용자에게 빠르고 안전하게 콘텐츠를 전송할 수 있는 콘텐츠 전송 기술이다. CDN은 서버와 사용자 사이의 물리적인 거리를 줄여 콘텐츠 로딩 시간을 최소화한다. CND은 각 지역에 캐시 서버(PoP, Points of presence)를 분산 배치해, 근접한 사용자의 요청에, 원본 서버가 아닌 캐시 서버가 콘텐츠를 전달하게 된다.

SSG는 다음과 같은 과정으로 생성된다. React에 Next.js나 Gatsby.js 등의 라이브러리를 사용하여 개발한 정적 웹 페이지를 빌드한 후 산출물을 CDN으로 배포한다. 그리고 필요할 때마다 CDN으로부터 전달받은 정적 페이지를 유저에게 빠르게 제공한다.