CSR? SSR? (+ Vue 기준 설명)

이리·2025년 3월 15일

쌓다보면늘어가는CS지식

목록 보기

3/3

CSR? SSR?

Client가 만드는 페이지! Server가 만들어서 던져주는 페이지! 라고 단순하게 이해하고있었는데, 이러한 수준의 이해는 아느니만 못하다는 생각에 한번 공부해보았습니다.

함께 보시죠!

(기존 CSR, SSR에 대한 개념이 확실하신 분은 3번으로 넘어가도 좋습니다.)

1. 개념 정리

CSR(Client Side Rendering)

단어에서 의미하는 그대로 Client Side에서 Rendering 맡는 것을 의미합니다.

그림으로 쉽게 이해해보자면

사용자의 요청이 들어옵니다.
프론트서버로부터 HTML을 다운받습니다. (진입점 Html ex. vue - index.html)

→ 여기서 중요한 점은 HTML을 다운받았다고해서 Client가 창을 볼 수 없습니다. 빈 HTML을 다운받은 상태기 때문이죠!
프론트 서버로부터 JavaScript를 다운받습니다.
JavaScript를 돌리며 처음 넘겨받은 HTML을 채웁니다.

→ 이때 프로젝트 내의 모든 HTML과 JS를 채웁니다.
모든 데이터를 받았을때 최종적으로 사용자에게 창을 보여줍니다.

위에서 언급했다시피 중요한 점은 처음 넘겨받은 HTML에는 내용이 없는 빈 HTML이라는 것과 모든 데이터가 연동이 됐을때 비로소 사용자에게 창이 보이기 시작한다는 점입니다.

SSR(Server Side Rendering)

Server Side에서 Rendering을 진행한 뒤 Client에게 던져주는 걸 의미합니다.

그림으로 쉽게 이해해보자면

사용자의 요청이 들어옵니다.
서버에서는 요청된 주소의 HTML을 사용자에게 넘겨줍니다. (정적 HTML Map.vue)

→ 여기서 HTML은 요청 주소의 HTML입니다. CSR의 초기 HTML과 다른점은 이 HTML은 /map 과 같이 요청된 주소에 해당하는 HTML이라는 점입니다.(내용이 있는 것이죠!)

→ 이미 내용이 들어있기 때문에 사용자는 창을 볼 수 있습니다. 다만, JavaScript를 아직 다운받지 못했기때문에 단순히 기능이 없는 창을 보게 됩니다.
사용자는 서버로부터 JavaScript를 다운받습니다. (Map.vue를 수행할 수 있는 최소한의 JavaScript)
JavaScript를 돌리며 처음 넘겨받은 HTML의 동작을 추가합니다.
모든 데이터를 받았을때 창이 동작합니다.

CSR과 다르게 SSR은 HTML을 다운받은 즉시 사용자에게 보여줄 수 있습니다. 빈 HTML이 아니기 때문이죠. 하지만 JavaScript를 다운받은 상태가 아니기때문에 정상적으로 동작하지 않습니다.

여기서 CSR과 SSR의 가장 큰 차이는

CSR은 처음에 전체 앱의 JavaScript를 한번 로드한 후, 사용자가 다른 페이지로 이동할 때 서버로부터 HTML 전체를 다시 받지 않고, 클라이언트 측에서 라우팅을 처리하여 필요한 데이터만 추가로 가져와 페이지를 보여주지만,

SSR은 각 페이지 요청마다 서버가 페이지를 새롭게 렌더링하고 그 결과를 HTML로 보내주기 때문에 매번 페이지가 바뀔 때마다 서버에 새로운 요청이 발생한다는 점입니다.

2. CSR, SSR 차이 정리

	CSR	SSR
초기 웹 페이지 로딩	HTML, CSS와 모든 Script들을 한번에 불러온다.	필요한 부분의 HTML과 Script만 불러온다.	CSR보다 SSR의 첫 로딩 속도가 더 빠릅니다.
나머지 로딩 시간	이미 첫페이지 로딩 시 나머지 부분을 구성하는 코드를 받아왔기 때문에 빠르다.	첫 페이지와 동일하게 서버와 통신을 반복한다.	CSR이 SSR보다 더 빠릅니다.
서버 자원 사용	처음 한번의 요청 이후에는 클라이언트가 렌더링하기 때문에 서버의 부담이 적습니다.	요청마다 서버가 페이지를 렌더링해야하기 때문에 서버 부하가 높습니다.	CSR이 SSR보다 서버 자원 면에서 효율적입니다.

3. Vue 적용 설명

저는 CSR 기반 Vue를 사용해 본적이 있어 이 개념을 이용해서 CSR SSR을 정확하게 이해해보고 싶었습니다. 다음은 제가 이해한 내용을 바탕으로 CSR, SSR을 Vue의 관점에서 정리해본 결과입니다.

틀린 내용이 있을 수 있으니 지적, 충고, 정정요청 모두 대 환영입니다!

가정 환경

📂 src
 ├ 📂 components
 │ ├ Main.vue
 │ └ Map.vue
 ├ 📂 js
 │ ├ mapApi.js
 │ └ login.js
 └ index.html

사용자는 /map으로 요청을 보냅니다.
/map은 Map.vue에서 처리되며 mapApi.js가 필요합니다.
/map에 Main.vue, login.js는 사용되지 않습니다.

CSR

사용자의 /map 요청 → 프론트 서버가 Index.html을 전송 (빈페이지)
필요한 모든 JS 로딩 → Main.vue, Map.vue, mapApi.js, loginApi.js
사용자 측에서 JavaScript가 실행되며 빈 html에 Map.vue 화면을 채웁니다
이후 /main 에 대한 요청이 오면 다운받은 Main.vue와 loginApi.js를 사용해 렌더링합니다.

SSR

사용자의 /map 요청 → 서버에서 렌더링한 Map.vue의 HTML을 내려줍니다.

→ 이때 사용자는 바로 map 페이지를 확인할 수 있습니다.
Map 페이지에 필요한 최소한의 JS를 로딩합니다. → mapApi.js, 그외 필요 js
JavaScript가 실행되며 기능을 연결합니다.
이후 /main에 대한 요청이 오면 다시 Main.vue, loginApi.js를 내려받아 화면을 채웁니다.

4. SEO(Search Engine Optimization)

SSR과 CSR에 대해 구글링을 하다보면 항상 둘의 차이점에 SEO라는 부분이 있습니다.

저도 처음에 이 부분을 이해하기 어려워서 애를 좀 먹었는데 여기까지 읽으신 여러분이라면 이제 정확하게 이해가능합니다.

구글링을 하면 SEO에 대응하기 위해서는 SSR이 CSR보다 용이하다 라는 말을 쉽게 찾을 수 있습니다.

왜일까요?

그건 처음 초기 웹 페이지 로딩을 보면 알 수 있습니다.

초기렌더링때 CSR은 index.html을 보여주기때문에 빈페이지로 검색 엔진이 긁어올 데이터가 없습니다 🫢

반면, SSR은 초기 렌더링에서 내용이 꽉찬 HTML을 내려보내주기 때문에 검색엔진이 내용을 확인하고 결과로 보여줄 수 있는 것이죠.

구글이 최근 CSR 페이지도 어느 정도 렌더링하여 검색엔진을 최적화한다고 하는데 아직 SSR이 더 안정적이고 효율적이라고합니다!

끝!

이리

이전 포스트