SSR, CSR, SSG 등

☑️SSR이란?

https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FkLONB%2Fbtr5Rgqf5Hd%2F04Vrq80XgnfD9fHHSXKSd0%2Fimg.png

 

SSR은 Server Side Rendering의 약자로, 서버 측에서 요청을 받으면 HTML을 완전히 렌더링 가능한 상태로 만들어 클라이언트에게 전송하는 방식입니다. 쉽게 말해 서버 쪽에서 HTML '요리'를 모두 마친 후 클라이언트에게 제공하는 것이죠. Spring의 JSP, PHP 등이 대표적인 SSR 방식의 예시입니다.

이와 관련하여 MPA(Multi Page Application)라는 개념이 있습니다. 이는 사용자가 페이지를 이동할 때마다 서버로부터 새로운 HTML을 받아와 페이지 전체를 다시 렌더링하는 전통적인 웹 페이지 구성 방식입니다.

☑️CSR이란?

https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbfYO3T%2Fbtr53D5HiMO%2FdYI42mXnuktIDBPTBVWrQ0%2Fimg.png

 

CSR은 Client Side Rendering의 약자로, 렌더링이 클라이언트(브라우저) 측에서 이루어지는 방식입니다. 서버가 요청을 받으면 클라이언트는 JavaScript를 통해 서버에 있는 데이터를 가져와 화면을 구성합니다. React, Vue 등이 CSR 방식의 대표적인 예시입니다.

이와 함께 SPA(Single Page Application)가 있는데, 이는 하나의 페이지로 구성된 웹 애플리케이션을 말합니다. 즉 새로고침없이 JS 내부에서 라우팅만 바꾸어 하나의 화면에서 효율적으로 콘텐츠를 볼 수 있는 것이 특징입니다. SPA로 개발된 웹사이트에서는 메뉴를 선택할 때 일반적으로 헤더는 고정된 상태에서 메인 콘텐츠 영역만 변경됩니다.

☑️ SSR과 CSR의 차이점

SPA는 주로 CSR로 렌더링하고, MPA는 주로 SSR로 렌더링합니다.

SPA는 웹 애플리케이션에 필요한 정적 리소스를 처음에 한꺼번에 모두 다운로드하고, 이후 새로운 페이지 요청이 발생하면 필요한 데이터만 전달받아 클라이언트에서 페이지를 갱신하기 때문에 CSR 방식을 활용합니다.

반면 MPA는 새로운 요청이 있을 때마다 서버에서 이미 렌더링된 정적 리소스를 받아오기 때문에 SSR 방식을 사용합니다.

다만, 이런 특징으로 인해 'SPA = CSR, MPA = SSR'이라는 오해가 생기기도 합니다. 그러나 이 두 개념은 페이지의 개수와 렌더링 주체에 따라 구분되는 별개의 개념이라는 점을 기억해야 합니다.

즉, CSR은 클라이언트 측에서 렌더링하는 방식이고, SSR은 서버 측에서 렌더링하는 방식입니다. 말 그대로 어느 '측(Side)'에서 렌더링을 준비하느냐에 따라 나뉘는 개념인 것입니다.

☑️ SEO 관점에서의 차이

CSR은 SEO(검색 엔진 최적화)에 취약한 편입니다. 이는 대부분의 검색 엔진 크롤러가 JavaScript를 실행하지 않고 HTML만 읽기 때문에, CSR로 구현된 페이지는 초기에 빈 HTML만 제공되어 콘텐츠가 제대로 색인되지 않을 수 있습니다.

반면 SSR은 이미 완성된 HTML을 제공하기 때문에 검색 엔진이 콘텐츠를 쉽게 읽고 색인할 수 있어 SEO에 유리합니다.

☑️ SSR과 CSR의 장단점 비교

구분	SSR	CSR
초기 로딩 속도	빠름 (완성된 HTML 즉시 표시)	느림 (JS 다운로드 후 렌더링)
서버 부하	높음 (모든 렌더링 서버에서 처리)	낮음 (클라이언트에 분산)
사용자 경험	페이지 전환 시 깜빡임	부드러운 페이지 전환
SEO	유리 (완성된 HTML 제공)	불리 (초기 빈 HTML)
개발 복잡도	상대적으로 단순	상대적으로 복잡
대역폭 사용	페이지마다 새로운 HTML	초기 로드 후 데이터만 교환

☑️ SSG란?

SSG(Static Site Generation)는 빌드 시점에 페이지를 생성하여 정적 파일로 제공하는 방식입니다. Next.js에서 지원하는 이 방식은 SSR의 SEO 이점과 CSR의 성능 이점을 모두 가져갈 수 있습니다. 서버에서 미리 HTML을 생성해 놓기 때문에 SSR보다 더 빠른 응답 속도를 제공하면서도, 완성된 HTML을 제공하므로 SEO에도 유리합니다.

☑️ 인증 방식의 차이

SSR은 세션 기반 인증 방식에 유리합니다. 서버에서 사용자 세션을 관리하고 각 요청마다 세션 정보를 확인할 수 있기 때문입니다.

반면 CSR은 토큰 기반 인증(JWT 등)에 유리합니다. 클라이언트에서 토큰을 저장하고 API 요청 시 함께 전송하는 방식으로, 서버의 상태를 유지할 필요가 없어 확장성이 뛰어나기 때문입니다.

☑️결론

SSR과 CSR은 각각의 장단점이 있으며, 애플리케이션의 특성과 요구사항에 따라 적절한 방식을 선택하는 것이 중요합니다. 최근에는 Next.js, Nuxt.js와 같은 프레임워크를 통해 두 방식의 장점을 모두 활용하는 하이브리드 접근법도 많이 사용되고 있습니다.

웹 개발 시 프로젝트의 성격, SEO 요구사항, 사용자 경험, 개발 복잡도 등을 종합적으로 고려하여 가장 적합한 렌더링 방식을 선택하는 것이 현명할 것입니다.

 

 

https://dev-ellachoi.tistory.com/28

이제는 알아야겠다! CSR과 SSR의 차이점과 장단점 (SPA, MPA, SSG, Universal Rendering 까지)