[TIL] 렌더링 : CSR과 SSR

들어가기 전
CSR 방식의 렌더링을 하는 어플리케이션에서 발생한 이슈를 해결하기 위해 SSR로 변경한 경우가 있다고 하였다.
왜 해결되는 건지 SSR과 CSR이 갖는 장단점을 바탕으로 이를 학습하고자 한다.

렌더링

브라우저 렌더링

브라우저 렌더링이란 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면에 표시하는 작업을 의미한다. 브라우저는 서버로부터 HTML, CSS, JavaScript 문서를 전달받고 브라우저 엔진이 문서를 해석해 브라우저 화면을 그려주는 것이다.

그리고 이러한 브라우저 렌더링은 SSR 과 CSR 방식으로 이루어진다.

어플리케이션에서의 응용

우리가 사용하는 여러 어플리케이션은 다 같은 어플리케이션이 아니다.

크게 3가지의 종류로 나눌 수 있다.

1. 웹앱
   1. 모바일 기기의 크기로 줄인 Web을 의미한다.
2. 하이브리드 웹앱
   1. 웹앱의 단점을 보완한 것이다.
   2. 겉은 일반 앱처럼 보이지만 실제로는 웹을 기반으로 작동한다.
   3. 어플 안에서 웹페이지를 불러오는 형식으로 실제로는 웹이 실행되는 방식이다.
   4. 하지만 네이티브 앱 보다 UI구성 디자인이 취약, 속도 느림, 기능적 접근 제한 등의 단점이 존재한다.
   5. 브라우저 성능에 따라 앱의 성능이 좌우된다.
3. 네이티브 앱
   1. 모바일 기기의 최적화된 언어로 개발해 유저가 사용하기에 빠르고 편하다.
   2. 다양한 기능들에 대한 접근이 자유롭다.
   3. 실행속도도 하이브리드 앱에 비해 빠르고 안정적이다.

이런 다양한 어플리케이션의 방법이 있다.

안드로이드 개발자는 당연하게 XML과 Compose를 활용하고, 데이터를 가공해 사용자에게 View를 띄워주기 때문에 당연히 CSR 아니야? 라고 할 수 있다.

하지만 위에 명시한 방식 처럼 일반 앱이지만 그 위에 브라우저를 실행시킨 하이브리드 웹앱 방식이 존재하기 때문에 브라우저 렌더링 방식에 대한 이해가 필요하다.

실제로 네이버 메일, 트위터, 우버 등에서는 하이브리드 앱 방식을 사용하고 있다.

SSR : 서버 사이드 렌더링

SSR은 Server Side Rendering으로 서버측에서 렌더링하는 방식이다. 사용자가 웹페이지에 접근할 때 서버에 페이지에 대한 요청을 하며 서버에서는 html,view와 같은 리소스들을 해석하고 렌더링하여 사용자에게 반환한다.

가장 중요한 것은 서버에서 렌더 될 준비를 끝마친 상태로 HTML 응답을 브라우저(클라이언트)에 보내는 것이다. 그 의미가 바로 렌더링이라는 의미이다.

CSR : 클라이언트 사이드 렌더링

CSR 이란?

Client Side Rendering의 약자로 클라이언트 측에서 렌더링을 하는 방식이다.

사용자의 요청이 올 때마다 리소스(데이터)를 서버에서 제공받은 후 클라이언트가 해석하고 UI를 렌더링 하는 방식이다.

안드로이드를 예시로 들어 설명하자면

• 동작 원리: 클라이언트는 서버로부터 데이터를 요청하고(JSON, XML 등), 받은 데이터를 바탕으로 안드로이드 앱 내에서 UI를 다시 구성합니다. 이레트로픽, RecyclerView, TextView 등 안드로이드의 UI 구성 요소를 활용하여 사용자에게 데이터를 표시합니다.

SSR과 CSR의 차이

각각의 장단점을 바탕으로 차이를 이해하고자 한다.

SSR의 장단점

장점

• 검색엔진 최적화 (SEO) 가 가능하다.
• 첫페이지 로딩 속도가 빠르다.

단점

• 초기 로딩 이후 페이지 이동 시 서버에서 받아와야 하므로 CSR에 비해 속도가 느리다.
• 매번 새로고침을 해야하기 때문에 깜빡임 로딩 이슈가 발생한다.
• 서버의 과부하가 발생할 수 있다.
• TTV(Time To View) 와 TTI (Time To Interact)의 공백시간이 존재한다.

CSR의 장단점

장점

• 새로고침이 발생하지 않아 사용자 경험에 도움이 된다.
• 초기 로딩 이후 빠른 웹사이트 렌더링이 가능하다.
• 필요한, 변경된 데이터만 받아오므로 트래픽이 감소한다.

단점

• 초기 로딩이 느리다. (웹의 경우 초기 한번 전체를 받아오기 때문이다.)
• 검색엔진 최적화에 보완 필요하다.

각 방식을 사용하기 좋은 상황

SSR                                                                                                      CSR

- 네트워크가 느릴 때	- 네트워크 빠를 때
- 검색엔진 최적화가 필요할 때	- 검색엔진 최적화가 필요 없을 때
- 페이지 상호작용이 별로 없을 때	- 페이지 상호작용이 많이 필요할 때

* SEO : 검색엔진 최적화란?

SEO는 Search Engine Optimization의 약자로 직역하자면 검색 엔진 최적화 라고 할 수 있다.

검색 엔진 최적화는 검색 엔진으로부터 웹 사이트나 웹 페이지에 대한 트래픽의 품질과 양을 개선하는 과정이다.

검색 엔진 최적화를 위해서는 시멘틱한 태그의 작성부터 웹 페이지 렌더링 기법까지 작은 부분부터 큰 틀을 정하는 것까지 다양한 방법을 시도할 수 있는데, 이 모든 것은 검색봇(Robot)에게 잘 보이기 위함이라고 할 수 있다.

검색 엔진 최적화가 잘 된 사이트일 수록 웹 사이트가 브라우저 단에서의 트래픽이 적다는 것을 의미하고 이는 곧 검색봇이 그 사이트를 들어가서 읽을 때 편하다는 것을 의미한다.

이 때, 봇이 읽어들이는 것이 편하다는 것은 그만큼 많은 정보를 읽어들여서 검색 엔진에 노출시킬 수 있다는 것이다.

• SSR
  • SEO 측면에서는 문제될 것이 없었다. 애초에 서버 단에서 모든 컨텐츠를 로드하여 전달하기 때문에 클라이언트 단에서는 트래픽이 생길 만한 로직이 없다. 검색봇이 읽기에 더할 나위 없이 편할 것이다.
• CSR
  • SEO 측면에서 문제를 야기한다. 검색봇이 웹 사이트를 들어갔는데 브라우저(클라이언트)단의 트래픽이 많아서 그만큼 읽어들일 수 있는 정보의 양도 적어지고 이는 곧 검색 엔진 최적화에 방해가 된다.