CSR과 SCR, SPA와 MPA

CSR vs SSR

: 웹 애플리케이션의 렌더링하는 주요한 접근 방식이다.

브라우저가 렌더링될 때 html콘텐츠 생성를 클라이언트(브라우저)가 처리하느냐, 서버가 처리하느냐에 따라csr과 ssr로 나뉘게 된다.

csr (client-side-rendering)

브라우저가 HTML을 받은 뒤, 자바스크립트를 실행해 콘텐츠를 동적으로 생성하는 방식

초기 요청 시 서버는 최소한의 html 구조와 자바스크립트 파일을 전달한다.

리액트를 예시로 들어보자.

// index.html
<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

브라우저는 위와 같은 html 뼈대만 다운받는다.

그리고 <div id='app'></div>를 통해 자바스크립트 파일들이 실행되면서 dom을 동적으로 구성하고 화면에 렌더링한다.

이러한 작동방식때문에 csr 방식의 웹페이지가 실행될 때

초기에는 빈 화면이 표시되고, 자바스크립트를 통해 콘텐츠가 동적으로 로드된다.

초기 로드는 느릴 수 있지만, 이후의 페이지 전환은 빠른게 특징이다.

ex) React, Vue, Angular 등

SSR (server-client-rendering)

SSR 방식은 서버가 애초에 완성된 HTML을 생성하고 브라우저에 전달한다.
완성된 HTML을 전달받은 브라우저는 이를 바로 렌더링하면 된다.

이 덕분에 초기 로딩 속도가 빠르며,

완전한 HTML을 검색 엔진 크롤러에게 제공하기 때문에 SEO에 유리하다.

CSR에서는 콘텐츠가 빈 최소한의 HTML을 반환하기 때문에 JavaScript 실행을 지원하는 크롤러에서는 이를 전혀 읽지 못한다.

Googlebot과 같은 최신 크롤러는 JavaScript를 처리할 수 있지만, 실행 시간이 오래 걸리면 크롤러가 콘텐츠를 놓칠 수도 있다.

이와 반면 SSR은 크롤러가 HTML을 바로 인식하고 인덱싱할 수 있다.

하이브리드 렌더링 방식

최근에는 CSR과 SSR의 장점을 결합한 하이브리드 렌더링 방식이 주목받고 있다.

대표적으로 Next.js가 있는데, 초기 렌더링은 서버에서 수행(SSR)하고,

이후의 사용자 상호작용은 클라이언트에서 처리(CSR)하도록 설계되어,

초기 로딩 속도와 사용자 경험을 모두 만족시킬 수 있다.

렌더링 방식 선택 시 고려사항

SEO 중요도:

검색 엔진에 노출이 중요하다면 SSR또는 하이브리드 방식 고려

페이지 전환 속도:

사용자 경험(UX)을 중시한다면 CSR이 적합

서버 부하와 클라이언트 성능:

대규모 트래픽을 처리해야하거나 저사양 클라이언트를 지원해야한다면 CSR이 적합

SPAvs MPA

웹 애플리케이션의 구조를 나타내는 주요 방식

MPA(Multi Page Application)

이름 그대로 여러개의 HTML 페이지로 구성된 애플리케이션이다.

각 웹페이지마다 별도의 HTML 파일을 가지고 있으며, 페이지 이동시마다 각각의 HTML파일을 새로 로드해야 한다.

클라이언트가 서버에 페이지를 요청하면 HTML 페이지만 넘겨준다.

MPA는 서버에서 렌더링된 HTML 파일로 구성됐으므로 SSR 방식을 채택한다.

장점

페이지마다 키워드가 노출되어 있으므로 SEO에 좋다.
각 페이지가 독립적으로 작동하기 때문에 개발자가 필요한 만큼의 자유도를 가지고 웹 애플리케이션을 구축할 수 있다.
모든 데이터는 서버에 저장되어 있으므로 보안적인 측면에서 장점

단점

프론트엔드와 백엔드 간의 개발 업무가 밀접하게 연관된다.
페이지 이동 시 새로운 파일을 받아야 하기 때문에 사용자 경험 측면에서 불리
서버로부터 문서에 대한 모든 데이터를 받아오기 때문에 서버 부담 증가

SPA (Single Page Application)

하나의 HTML 페이지로만 구성된 애플리케이션이다.

그리고 페이지를 이동할 때마다 해당 페이지의 html 파일을 가져오는 게 아니라

자바스크립트를 이용해 콘텐츠만 변경하여 웹페이지를 보여주는 방식으로 작동한다.

SPA는 주로 CSR을 채택한다. 그러나 Next.js 같이 SSR의 방식도 함께 채택하는 경우도 있다.

대표적으로 React를 생각해보자.

React 앱의 index.html

div id="root"></div>

그리고 index.js

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<App />

);

우리가 리액트로 만든 페이지를 방문할 때 초기 로드시, 이 index.html 파일과 함께 필요한 js, css, 이미지 등의 필요한 모든 리소스를 가져온다.

index.html 파일에는 주로 <div id="root"></div>만 포함되어 있으며, 리액트는 이 div를 통해 컴포넌트를 렌더링한다.

따라서 자바스크립트가 실행될 때까지는 페이지가 비어 있기 때문에 로딩 대기중의 짧은 시간 동안에는 빈 페이지가 화면에 띄어있다.

장점

사용자 경험 측면에서 가장 큰 장점을 가지고 있다.
새로고침없이 콘텐츠가 업데이트되기 때문에 애플리케이션의 반응성이 뛰어나고 사용자는 매끄러운 인터랙션이 가능하다.
서버 부담이 경감
초기 로드시 서버에 html, js, css, 이미지 등의 정적인 리소스를 한번만 요청한다. 그리고 동적인 콘텐츠 생성은 전부 클라이언트가 하기 때문에 결과적으로 서버의 부담이 경감한다.

단점

초기 로드 속도가 느림 (처음 접속 시, 모든 리소스를 한 번에 다 받음)
클라이언트에 중요 비즈니스 로직이 노출될 수 있음
때문에 보안에 민감한 로직은 서버 측에서 처리하는 것이 안전
SEO에 불리
복잡한 상태관리와 메모리 누수 문제
* SPA의 메모리 누수: SPA는 컨텐츠 생성과 파괴가 동적이기 때문에 메모리 누수 발생 가능성 있음.
요소가 삭제될 때 이벤트 리스너가 제대로 제거되지 않음, 잘못된 메모리 동적 할당, 잘못된 객체 관리, 잘못된 작 업의 할당 등이 원인

<중간에 궁금했던 것들>

✅ mpa가 매 html 파일마다 키워드가 노출되어 있기 때문에 SEO에 좋다고 하는데, 그럼 js에 있는 키워드는 검색엔진이 인식을 못하는 건가?

초기의 검색 엔진은 자바스크립트를 제대로 해석하지 못해, 자바스크립트로 생성된 콘텐츠가 인식되지 않는 경우가 많았다. 그러나 최근의 검색 엔진들은 자바스크립트를 렌더링하고 해석할 수 있는 능력을 갖추고 있다.

그러나 이 과정엔 여전히 변수가 존재하는데, 자바스크립트의 실행 속도나 페이지 로딩 시간에 따라 검색엔진이 콘텐츠를 완전히 인식하지 못할 수 있다.

따라서 JavaScript SEO의 필요성이 대두되는데, 렌더링 시간을 줄이고 검색 엔진이 해당 파일을 올바르게 이해하고 인덱싱할 수 있도록 최적화 전략을 수립해야한다.

참고) https://www.next-t.co.kr/seo/seo-wiki/javascript-seo/

JavaScript SEO - 넥스트티

목차 JavaScript SEO 개요 JavaScript SEO 최적화 기법 JavaScript SEO 도구 및 리소스 JavaScript SEO 관련 문제 및 해결 방안 JavaScript SEO 개요 JavaScript의 중요성 JavaScript는 현대 웹 개발에서 중요한 역할을 담당

www.next-t.co.kr

✅ 리액트가 '마운트'하는 단계가 페이지 초기로드에 해당하는 건가?

리액트에서 마운트(Mount) 단계는 컴포넌트가 처음으로 DOM에 추가되어 화면에 렌더링되는 시점을 의미한다.

따라서 페이지 초기 로드 시 컴포넌트가 DOM에 삽입되는 과정이 마운트 단계에 해당한다고 볼 수 있다.

=> 페이지 초기 로드는 브라우저가 HTML 파일을 로드하고 React 애플리케이션을 실행하는 과정이다. 이때 React는 컴포넌트를 생성하고 DOM에 삽입하며, 이 과정이 바로 마운트 단계다. 따라서 페이지 초기 로드와 마운트는 밀접한 관련이 있다고 할 수 있다.

✅ CSR과 SSR의 사용자 경험 비교

초기 로딩 시간

: ssr > csr

페이지 전환 및 상호작용
: ssr < csr
ssr은 페이지 전환 시 서버에 새로운 요청을 보내야 하므로 csr에 비해 느릴 수 있다.

요약하면 csr은 초기 로딩 시간은 지연되지만 이후 페이지 전환은 새로고침없이 빠르고 사용자 인터랙션에 대한 반응이 즉각적이다. 반면에 ssr은 초기 로딩 시간은 짧지만 이후 페이지 전환 때마다 새로운 html 파일을 받아야하기 때문에 새로고침이 필요하다.

결론적으로, csr은 상호작용이 많은 동적 웹 애플리케이션에 적합하며 ssr은 콘텐츠 중심의 웹사이트에 더 적합

요약

- SSR과 CSR은 브라우저가 렌더링될 때 HTML 파일을 렌더링하는 주체(server, client)를 기준으로 나눈 것

- SPA와 MPA는 앱의 HTML 파일이 어떻게 구성돼있는지(단일, 페이지마다 별개)를 기준으로 나눈 것

- SPA는 주로 CSR을 채택하지만, Next.js와 같이 SSR도 함께 채택하는 경우가 있음.

- MPA은 곧 SSR 방식을 채택하는 것임.

<추가 공부사항>

SEO 최적화 전략
컴포넌트 라이프 사이클
자바스크립트 메모리 누수

'Web' 카테고리의 다른 글

HTTP 캐싱과 캐싱 제어 (0)	2025.03.06
리플로우(Reflow)와 리페인트(Repaint) & 리플로우 최적화 (0)	2025.02.26
브라우저 렌더링 작동 원리: 파싱부터 렌더링까지 (0)	2025.02.26
"웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가" (0)	2025.02.13
세션 인증과 토큰 인증 (1)	2025.02.11

개발 일기

CSR과 SCR, SPA와 MPA

CSR vs SSR

csr (client-side-rendering)

SSR (server-client-rendering)

하이브리드 렌더링 방식

렌더링 방식 선택 시 고려사항

SPAvs MPA

MPA(Multi Page Application)

장점

단점

SPA (Single Page Application)

장점

단점

요약

'Web' 카테고리의 다른 글

티스토리툴바

CSR과 SCR, SPA와 MPA

CSR vs SSR

csr (client-side-rendering)

SSR (server-client-rendering)

하이브리드 렌더링 방식

렌더링 방식 선택 시 고려사항

SPAvs MPA

MPA(Multi Page Application)

장점

단점

SPA (Single Page Application)

장점

단점

요약

'Web' 카테고리의 다른 글

'Web' Related Articles

티스토리툴바