SSR과 CSR의 차이 (부제: React vs Next.js)

SSR은 뭐고 CSR은 뭘까? 그리고 각각의 차이점은 무엇일까?

CSR의 대표(?) 라이브러리이자 프론트엔드에서 많이 사용되는 React와 SSR 프레임워크인 Next.js를 사용하면서 느낀점도 적어보려고 한다.

 

대표 이미지

 

 

---

SSR이란?

SSR(Server Side Rendering)이란 서버에서 렌더링 준비를 마친 후 클라이언트에 전달하는 방식이다.

SSR의 동작 방식

 

번역하자면, 

 

1. 사용자가 웹 사이트에 요청을 보낸다.

2. 서버에서 즉시 렌더링 가능한 HTML 파일을 만든다. 

3. 브라우저(클라이언트)에서 HTML을 렌더링하지만 상호작용(조작) 할 수 없다.

4. 브라우저(클라이언트)에서 Javascript를 다운 받는다.

5. 이때 사용자는 렌더링 된 HTML (콘텐츠)를 볼 수 있다. 만약 사이트를 조작한다면 이 행동은 기억된다.*

6. 브라우저(클라이언트)가 Javascript 프레임워크를 실행한다.

7. 이전에 기억된 사용자의 상호작용이 실행되고, 페이지가 상호작용이 가능해진다.

 

*이때, "the interactions can be recorded"라는 말이 잘 이해되지 않아서 찾아봤다.

1. 초기 렌더링 단계
: HTML이 먼저 렌더링되어 사용자에게 콘텐츠가 보임JavaScript는 아직 로딩 중인 상태
2. 사용자 상호작용 단계
: 사용자가 버튼 클릭, 폼 입력 등의 동작을 시도함, 이때 JavaScript가 아직 로드되지 않아 실제 동작은 실행되지 않음, 브라우저는 이러한 사용자의 시도된 상호작용을 이벤트 큐에 저장
3. JavaScript 활성화 단계
: JavaScript 파일이 완전히 로드되고 실행됨이벤트 큐에 저장된 사용자 상호작용들이 순차적으로 처리됨

=> 사용자 경험을 개선하는데 도움이 되며, JavaScript가 로드되는 동안 사용자의 의도된 동작이 손실되지 않도록 보장한다.

출처: perflecity

좀 더 간단한 SSR 동작 방식

 

간단하게 보자면 위와 같은 그림으로 표현 할 수 있다.

번역하면 아래와 같다.

 

1. 서버에서 렌더링 준비가 된 HTML을 보낸다.

2. 브라우저가 페이지를 렌더링하면 페이지를 볼 수 있게 되고, 브라우저가 Javascript를 다운 받는다.

3. 브라우저가 React를 실행한다.

4. 페이지가 상호작용 가능하게 된다.

 

CSR이란?

CSR(Client Side Rendering)이란 SSR과 반대로 서버로부터 모든 자원(html, css, javascript)를 받아서 클라이언트에서 렌더링을 하는 것이다.

CSR의 동작 방식

번역하자면,

 

1. 사용자가 웹 사이트에  요청을 보낸다.

2. CDN이 HTML 파일과 Javascript 링크를 보낸다.

*CDN이란? Content Delivery Network의 약어로 웹 콘텐츠를 사용자와 가까운 위치에서 전송하여 로딩 속도를 높이는 분산 서버 네트워크이다. CSR에서도 엔드 유저의 요청에 물리적으로 가까운 서버에서 응답을 제공한다. (대표적인 서비스: AWS CloudFlare)

3. 브라우저에서 HTML과 Javascript를 다운 받는 동안 사용자에게 사이트는 보여지지 않는다.

4. 브라우저가 Javascript를 다운 받는다.

5. Javascript가 실행 되면서 데이터를 위한 API가 호출된다. 사용자는 placeholder를 볼 수 있다.

6. 서버에서 API에 대한 응답을 보낸다.

7. API의 데이터가 placeholder를 채우고 페이지가 상호 작용 가능하다.

 

CSR의 간단한 동작 방식

간단하게 말하면

1. 서버에서 브라우저에 응답을 보낸다.

2. 브라우저에서 Javascript를 다운 받는다.

3. 브라우저에서 React를 실행한다.

4. 페이지는 보여지고, 상호 작용 가능하다.

 

즉, SSR과 다르게 브라우저가 JS를 다운 받고 실행 가능해질 때까지 페이지를 볼 수 없다.

 

차이점

1. 로딩 속도

SSR은 첫 페이지 로딩 속도는 빠르지만 이후 요청에서도 첫 페이지와 동일한 순서를 거치므로 상대적으로 느리다고 할 수 있다.

CSR은 첫 페이지를 로딩할 때 필요한 자원을 모두 받아오기 때문에 상대적으로 느리지만 이후 요청에서는 빠르다.

 

2. SEO

검색 엔진은 크롤러로 웹 사이트를 읽는다. CSR은 Javascript가 동작한 이후에 컨텐츠가 동적으로 생성 되기 때문에 Javascript가 실행되어야 metadata를 읽을 수 있지만 SSR은 렌더링 가능한 HTML 파일이 브라우저에 먼저 보여지기 때문에 Javascript가 실행되지 않아도 컨텐츠를 파악 할 수 있다.

 

3. 서버 자원 

매번 서버에 요청하는 SSR이 서버 자원을 많이 사용한다.

 

그렇다면 SSR과 CSR은 각각 어떨 때 사용하면 좋을까?

🤓 SSR

- 네트워크가 느린 환경

- SEO가 필요할 때

- 최초 로딩이 빨라야 하는 사이트를 개발 할 때

- 메인 스크립트가 크고 로딩이 느릴 때

- 상호작용이 적은 사이트를 개발 할 때

 

=> 서버에서 많은 연산을 감당하고, 클라이언트의 부담을 줄여야 할 때, SEO 개선이 필요할 때 사용 

 

🤓 CSR

- 네트워크가 빠른 환경

- SEO가 상관 없을 때

- 서버의 성능이 좋지 않을 때

- 사용자에게 보여줄 데이터 양이 많을 때 (로딩 창을 띄워서 사용자 경험을 개선시킬 수 있다.)

- 메인 스크립트가 가벼울 때

- 상호 작용이 많은 사이트를 개발 할 때

 

=> SSR과 반대

 

 

CSR과 SSR을 사용해본 경험

이때까지 사용해본 프론트엔드 라이브러리, 프레임워크라고 하면 React, Vue.js, Next.js가 있다.

그 중 React는 Javascript 기반 SPA(Single Page Application) 라이브러리이자 CSR을 기본으로 지원한다.

그리고 Next.js는 React를 기반으로 SSR을 사용할 수 있도록 한 프레임워크이다.

 

*라이브러리와 프레임워크의 차이 : 프레임워크는 라이브러리보다 개발자가 해야 할 일이 적다. 
예를 들어 React의 경우 번들러, 라우팅 등을 직접 설정(구현) 해야 하지만 Next에서는 프레임워크에서 라우팅(버전에 따라 page 또는 app 라우팅 지원), middleware 설정, 이미지 최적화 등을 지원해준다. 정해진 규칙에 따르기만 하면 사용할 수 있다.

 

 

하지만 React라고 CSR, Next.js라고 SSR만 사용하는 것은 아니다.

Next.js 13버전부터는 "use client" 구문을 사용해서 useEffect, useClient 등 React 훅을 사용한 클라이언트 렌더링을 페이지 별로 사용할 수 있다.

React도 별도의 설정이 필요하지만 SSR로 할 수 있다고 한다 (해본 적은 없다😅)

 

어쨌든 둘 다 사용해보고 나서 개인적인 느낀점은 Next가 확실히 React 보다 편리하긴 하지만 React 기반인 만큼 React에 대한 이해없이 Next를 바로 사용하기엔 어렵다는 생각이 들었다.

(하지만 편리해서 폴더 구조를 설계하거나 번들러를 적용하기 어렵다 라는 경우 Next를 시도해봐도 좋을 것 같다..? 조금 모순적이군..)

가장 편리했던 부분은 middleware를 사용해서 response에 따라 request를 조절 할 수 있어서 사용자 인증 토큰(JWT)가 헤더에 담겨있는지 여부에 따라 회원 여부를 파악해서 라우팅 하는 기능을 쉽게 개발 할 수 있다는 것이었다.

또 <Image /> 태그로 이미지 최적화를 자동으로 해줘서 편했고, 폴더 구조에 따라 라우팅을 자동으로 처리해주는 것도 편했다.

 

그리고 사용자의 입장에서 Javascript는 동작하지 않지만 콘텐츠는 보이는 SSR과 콘텐츠가 늦게 보이지만 로딩 화면을 좀 기다리면 콘텐츠도 보이고 동작도 가능한 CSR이 뭐가 나을 지🤔는 개인적인 주관에 따라 다를 것 같다.

위에서 SSR은 어떨 때 좋고 CSR은 어떨 때 좋은 지 써둔 것처럼 상황에 따라 장단점에 맞는 라이브러리 또는 프레임워크를 잘 선택해서 써야겠다.

 

---

 

출처

https://off-dngw.github.io/posts/SSR-CSR/

SSR과 CSR의 차이

 

https://tlsdnjs12.tistory.com/24

SSR vs CSR 이란?

https://jibinary.tistory.com/268#google_vignette

[네트워크] CDN이란? 역할과 개념 쉽게 정리 (Content Delivery Network)

https://yeongjaekong.tistory.com/32