SSR vs CSR - 현대 웹 렌더링의 역사와 이해

렌더링이란?

렌더링은 웹 페이지나 애플리케이션의 코드 (HTML, CSS, JavaScript 등)를 사용자가 볼 수 있는 화면으로 변환하는 과정이다. 이 과정을 통해 서버에서 전달된 코드가 웹 브라우저에서 처리되어, 사용자가 텍스트, 이미지, 버튼 등을 볼 수 있도록 화면에 표시된다.

SSR, CSR이란?

렌더링은 어디서 실행되는지에 따라 두 가지 방식으로 나뉜다.

SSR (Server-Side Rendering)

• 서버에서 미리 완성된 HTML을 만들어서 사용자에게 전달하는 방식
• 서버에서 렌더링 작업을 수행하므로 페이지 로딩이 빠르고, SEO(검색 엔진 최적화)에 유리

CSR (Client-Side Rendering)

• 클라이언트(사용자 브라우저)에서 렌더링이 진행되는 방식
• 서버에서는 HTML의 기본 구조와 JavaScript를 보내고, JavaScript가 브라우저에서 실행되면서 화면이 완성됨
• React와 같은 프레임워크에서 CSR을 기본으로 사용함

요약하자면 SSR은 서버에서, CSR은 클라이언트에서 렌더링이 이루어지는 방식이다.

웹 렌더링의 진화: CSR과 SSR의 등장

1. 초창기 웹 렌더링

• 초기 웹은 서버에서 HTML을 완성하여 클라이언트로 전달하는 방식이었다. 따라서 템플릿 언어를 통해 정적 HTML을 생성했다.
• 당시에는 CSR(Client-Side Render)의 개념이 없었고, Javascript 또한 없었다.

2. JavaScript의 발전과 CSR의 등장

• JavaScript가 도입되면서 CSR이 가능해졌고, 클라이언트에서 HTML을 동적으로 렌더링할 수 있게 되었다.
• CSR(Client-Side Rendering)이 본격화되면서, 빈 HTML을 받아 JavaScript로 페이지 전체를 렌더링하는 방식이 인기를 끌게 되었다.
• CSR은 빠른 화면 전환과 인터랙티브한 웹 애플리케이션에 적합했다.

3. CSR의 단점과 SSR의 재조명

단점

• 초기 페이지 로딩 속도가 느림
• SEO(검색 엔진 최적화)에 불리함

상세설명

• 초기 속도가 느림: CSR은 클라이언트 브라우저에서 JavaScript를 렌더링하므로, 초기 페이지 로딩 속도가 느리다는 단점이 있다. 초기 로딩 시 JavaScript 파일을 모두 다운로드하고 실행해야 하므로 첫 화면이 표시되기까지 시간이 지연될 수 있다.
• CSR은 또한 SEO(검색 엔진 최적화)에 불리하다. JavaScript가 브라우저에서 실행된 후에야 콘텐츠가 로드되므로, 검색 엔진 크롤러가 JavaScript를 실행하지 못하는 경우 페이지가 제대로 인덱싱되지 않을 수 있다.

해결방안

• 이에 따라, SSR의 장점을 다시 활용할 필요가 있었음

4. SSR과 CSR의 혼합 방식

• Next.js와 같은 프레임워크가 등장하면서 SSR과 CSR의 장점을 혼합한 하이브리드 방식이 가능해졌다.
• 초기 페이지는 SSR로 빠르게 렌더링하고, 이후 상호작용은 CSR로 처리하는 방식으로 초기 로딩 속도와 SEO의 문제점을 개선하면서도 사용자 경험을 극대화할 수 있게 되었다.

요약

템플릿 언어와 SSR → JavaScript 발전으로 CSR 등장 → CSR의 단점 해결을 위해 SSR과 CSR 혼합 사용