[Web] 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)

YUZAMONG·2025년 1월 21일

CDN CSR SSR placeholder seo spa web

Web

목록 보기

1/4

서버 사이드 렌더링(Server Side Rendering, SSR)

서버쪽에서 렌더링을 해서 화면에 보여주는 방식을 말한다.
서버로부터 완전하게 만들어진 HTML 파일을 클라이언트에게 넘겨받아 화면을 그리기 때문에 첫 화면 로딩 속도가 빠르다.

클라이언트 단(브라우저)에서는 데이터를 깊고 정교하게 관리할 필요가 없다.

동작 단계

사용자가 웹 사이트에 요청을 보냄
서버는 렌더링 가능한 HTML 파일을 만듦
브라우저는 빠르게 HTML 파일을 읽고 화면을 렌더링 함
아직 JS 파일을 읽지 않았기 때문에 조작은 불가능함
브라우저가 JS를 읽음
사용자의 조작(버튼 클릭, 폼 입력 등)이 기록됨
브라우저가 JS 프레임워크를 실행함
기록된 사용자 조작이 실행되고 페이지 상호작용도 가능해짐

장단점

장점

첫 페이지 로딩 속도가 빠름
*검색 엔진 최적화가 가능함

단점

초기 로딩 이후 페이지 이동 시 속도가 CSR에 비해 느림
매번 새로고침 해야하기 때문에 깜빡임이 발생함
서버에 과부하가 올 수 있음
TTV(Time To View)와 TTI(Time TO Interact) 간의 공백 시간이 발생함

검색 엔진 최적화(Search Engine Optimization)
웹사이트의 가시성과 순위를 향상시키기 위해 검색 엔진의 알고리즘에 맞춰 콘텐츠, 구조, 메타데이터 등을 최적화하는 과정이다.

클라이언트 사이드 렌더링(Client Side Rendering, CSR)

클라이언트(브라우저)가 렌더링을 맡아서 하는 방식을 말한다.
서버에서는 비어있거나 간단한 HTML 파일만 전달하고, 브라우저에서 자바스크립트를 다운로드하고 실행하여 동적으로 HTML을 생성한다.
SSR에 비해 처음에 화면을 띄우는 데 시간이 더 걸릴 수 있다.

SPA가 CSR 방식으로 작동된다.
🔗 SPA(Single Page Application)이란?

동작 단계

사용자가 웹사이트에 요청을 보냄
*CDN이 HTML과 JS 파일에 접근할 수 있는 링크를 보냄
브라우저는 HTML, JS 파일을 다운받음
아직 화면에 아무것도 렌더링되지 않음
다운이 완료된 JS가 실행되고, 데이터를 위한 API가 호출됨
비어있거나 Placeholder가 표시될 수 있음
서버가 API 요청에 응답함
서버로부터 받아온 데이터를 *placeholder 자리에 넣어줌
페이지 상호작용이 가능함

CDN(Content Delivery Network)
사용자에게 웹 콘텐츠를 더 빠르고 효율적으로 전달하기 위해 전 세계 여러 서버에 콘텐츠를 분산 저장하고 제공하는 네트워크이다.

Placeholder
UI에서 사용되는 임시 텍스트로, 주로 입력 필드(input field)에 사용된다.
사용자에게 어떤 값을 입력해야 하는지에 대한 힌트를 제공하기 위해 보여진다. 입력 필드에 텍스트를 입력하기 전까지 나타나며, 사용자가 입력을 시작하면 자동으로 사라진다.
사용자에게 콘텐츠가 로딩 중임을 나타내는 표시로도 사용된다.