SSR과 CSR

SSR (Server Side Rendering)

SSR은 서버에서 웹 페이지의 HTML 구조를 동적으로 생성하여 클라이언트 (웹 브라우저)에게 제공하는 기술이다. 이는 주로 백엔드 개발 영역에 속하며, Java 기반 환경에서는 JSP (JavaServer Pages), Thymeleaf 등의 템플릿 엔진이 대표적으로 사용된다.

동작 흐름:

1. 클라이언트 (웹 브라우저)가 특정 웹 페이지에 대한 HTML 요청을 서버 (WAS)로 전송한다.
2. 서버 (WAS)는 요청을 받고 필요한 애플리케이션 로직을 수행하며, 데이터베이스 (DB)를 조회한다.
3. 조회된 데이터를 기반으로 서버 측에서 HTML 코드를 동적으로 생성한다.
4. 서버는 완전히 렌더링된 HTML 페이지를 클라이언트에게 응답한다.

SSR의 장단점:

장점:

• 빠른 초기 로딩 (First Contentful Paint): 서버에서 완전히 렌더링된 HTML을 응답하므로, 클라이언트는 페이지 내용을 즉시 화면에 표시할 수 있어 초기 로딩 속도가 빠르다.
• SEO (Search Engine Optimization) 유리: 검색 엔진 크롤러는 자바스크립트 실행 없이 완전한 HTML 구조를 쉽게 수집하고 파싱할 수 있어 검색 엔진 최적화에 유리하다. 특히 초기 콘텐츠 노출이 중요한 웹사이트 (예: 전자상거래, 뉴스 사이트)에 효과적이다.

단점:

• 높은 서버 부하: 모든 페이지 요청에 대해 서버가 HTML을 렌더링해야 하므로, 트래픽이 많은 웹사이트의 경우 서버 부하가 크게 증가할 수 있다.
• 느린 페이지 전환: 초기 로딩 이후의 페이지 이동 시에도 서버에서 새로운 HTML을 렌더링하여 응답해야 하므로, 클라이언트 측에서 부분적으로만 업데이트하는 방식에 비해 속도가 느릴 수 있다.

SEO (Search Engine Optimization)

SEO는 검색 엔진 (Google, Bing 등)에서 특정 웹사이트가 상위에 노출될 수 있도록 웹사이트를 최적화하는 과정을 의미한다. SSR은 초기 HTML 구조를 제공하여 검색 엔진 크롤러의 접근성을 높임으로써 SEO에 긍정적인 영향을 미칠 수 있다.

CSR (Client Side Rendering)

CSR은 웹 브라우저에서 자바스크립트를 사용하여 동적으로 HTML 구조를 생성하고 DOM (Document Object Model)에 적용하는 기술이다. 이는 웹 페이지를 마치 모바일 앱처럼 부분적으로 업데이트하여 사용자 경험을 향상시키는 데 주로 사용되며, 프론트엔드 개발 영역에 속하는 React, Vue.js 등의 JavaScript 프레임워크가 대표적이다.

동작 흐름:

1. 클라이언트 (웹 브라우저)가 서버에 HTML 파일을 요청한다.
2. 서버는 기본적인 HTML 구조 (대부분 비어 있거나 최소한의 정보만 포함)와 함께 JavaScript 파일의 링크를 응답한다.
3. 웹 브라우저는 응답받은 HTML을 파싱하고, JavaScript 파일의 링크를 통해 JavaScript 코드를 서버에 요청하여 다운로드한다.
4. 다운로드된 JavaScript 코드는 클라이언트 측에서 실행되어 서버에 필요한 데이터 (주로 JSON 형태)를 HTTP API 요청을 통해 비동기적으로 가져온다.
5. JavaScript 코드는 응답받은 JSON 데이터를 기반으로 HTML 요소를 동적으로 생성하고 DOM을 조작하여 화면을 그린다 (렌더링).

CSR의 장단점:

장점:

• 빠른 사용자 인터랙션: 초기 로딩 이후에는 필요한 데이터만 서버에서 비동기적으로 가져와 클라이언트 측에서 빠르게 DOM을 업데이트하므로, 사용자 인터랙션에 대한 응답성이 뛰어나다.
• 빠른 페이지 전환: 초기 로딩 이후에는 전체 페이지를 다시 로드할 필요 없이 필요한 부분만 업데이트하므로, 페이지 간 전환 속도가 빠르다. SPA (Single Page Application) 개발에 주로 사용된다.

단점:

• 느린 초기 로딩: 초기 페이지 로딩 시 필요한 모든 JavaScript 파일을 다운로드하고 실행해야 하므로, 애플리케이션 규모가 클수록 초기 로딩 시간이 길어질 수 있다.
• SEO 불리: 검색 엔진 크롤러가 JavaScript를 제대로 실행하지 못하거나 실행하는 데 시간이 오래 걸릴 수 있어 초기 콘텐츠를 제대로 인덱싱하지 못할 수 있다. 따라서 SSR에 비해 SEO에 불리할 수 있다.

요약:

SSR과 CSR은 웹 페이지를 렌더링하는 방식에서 뚜렷한 차이를 보이며, 각각의 장단점을 가지고 있다. 웹 애플리케이션의 특성 (초기 로딩 속도, 사용자 경험, SEO 요구 사항 등)에 따라 적절한 렌더링 방식을 선택하거나 혼합하여 사용하는 것이 일반적이다.