[협업] CSR, SSR이 뭐에요??

오늘은 프로젝트를 진행하던 중 CSR, SSR이 무엇인지 설명해드리지 못했습니다.. 따라서, 그에 대한 내용을 정리해드리고자 합니다..
CSR, SSR을 알기 이전에 먼저 SPA, MAP 키워드에 대해 먼저 파악해야 할 필요가 있을 것 같습니다..!

SPA, MAP

SPA(Single Page Application)

: SPA란 하나의 페이지로 구성된 웹 어플리케이션입니다.

ex) 헤더 고정 메뉴 선택 클릭한부분만 바뀌는 사이트들이 SPA입니다!

 

MPA

MPA (=Multi Page Application) : 탭을 이동할때마다, 서버로부터 새로운 HTML을 새로 받아와서 페이지 전체를 새로 랜더링 하는 전통적인 웹 페이지 구성방식

매번 새로운 HTML을 서버로부터 받아옴 + 전환시 화면 깜빡임

⇒ AJAX의 등장 ⇒ 대부분의 사이트들이 SPA를 통해 UX 기능을 향상시키는 추세라고 합니다..

 

Rendering 방식

SPA에서의 렌더링 방식: CSR
MPA에서의 렌더링 방식: SSR

 

SPA: 웹 어플리케이션에 필요한 정적 리소스를 초반 한번에 모두 다운로드하고, 그 이후 새로운 페이지 요청이 있을때, 페이지 갱신에 필요한 데이터만 전달받아서 클라이언트에서 페이지를 갱신하기 때문에 자연스럽게 랜더링방식을 CSR 을 선택한 것입니다.

MAP: 새로운 요청이 있을 때마다, 서버에서 이미 랜더링된 정적 리소스를 받아오기 때문에 랜더링 방식으로 SSR 을 선택한 것입니다.

단, 주의 ! SPA, MAP (페이지가 몇개인지) 와 CSR,SSR(랜더링을 어디에서 하는지)는 다른 개념입니다!!

---

그럼 CSR이 가장 좋은 방식인가??

CSR, SSR, SSG 정의와 차이점

정의

- CSR (=Client Side Rendering) : 클라이언트 쪽에서 렌더링이 일어난다.

- SSR (=Sever Side Rendering) : 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식

- SSG(= Static Site Generation = Static Rendering): 서버쪽에서 렌더링 준비를 끝마친 정적인 페이지를 클라이언트에게 전달하는 방식

차이점

- CSR vs SSR:

- Client랑 Server 중에서 어느 쪽(Side)에서 rendering을 준비하는지를 나타낸다고 생각하시면 조금이나마 쉬울실 것 같습니다..!

 

CSR: 클라이언트쪽, SSR: 서버쪽

- SSR vs SSG : 서버에서 HTML을 보내준다는건 비슷하지만, 언제! HTML파일을 만들어주는지 가 큰 차이점이라고 생각합니다.

SSR: 요청할 때 즉시 만드니까 데이터가 달라진다. 즉, 미리 만들기 어려운 페이지에 적합하다.
SSG: 미리 다 만들어두니까 잘 안변하는 페이지에 적합합니다.

 

---

CSR, SSR (React)

동작 과정

1. User가 Website를 방문하여, 브라우저가 서버에게 콘텐츠 요청합니다.
2. 서버는 브라우저에게 빈 뼈대 HTML과 연결된 JS링크를 전달합니다.
3. 브라우저에서 연결된 JS링크를 통해, 서버로부터 JS파일 다운로드합니다.
4. React를 실행시켜, 동적으로 페이지 생성(React DOM) 후 화면 출력합니다. -(이 때, TTV,TTI 간극이 없습니다.)

 

SEO 관점

SEO ? 검색 엔진 최적화라 부르며, 웹사이트가 검색 결과에 더 잘 보이게 최적화하는 과정이라고 하더군요!

브라우저들이 가진 웹 크롤러는 HTML읽어서 검색가능한 색인을 만든다. 그렇지만 CSR에서는 빈 뼈대 HTML과 연결된 JS링크만을 전달합니다.

 

 

만약 위처럼 웹 크롤러 봇에게 전달하면..

웹 크롤러 봇: 뭐야 왜 HTML은 텅텅 비어있어 나 JS 실행할 줄은 모르는데;;

 

따라서, JS를 실행할줄모르는 크롤러봇 입장에선 검색엔진이 색인할만한 콘텐츠가 보이지 않습니다.

단, 구글 크롤러는 JS를 실행 가능하지만, 완벽하지는 않습니다.

 

- 장점

 - 초기 로딩 이후 구동속도는 빠름

 - 클라이언트쪽에서 연산, 라우팅 모두 담당 → 서버 부하 분산

 - HTML과 JS로직이 완전히 연동된 HTML파일만을 띄움 → TTV, TTI 사이 간극 없음

 - 화면 깜빡임 없음

 

- 단점

- 초기 로딩속도가 느리다.

- SEO에 불리하다.

 

---

단점 보완 방법

방법 1. CSR

• code splitting, tree-shaking, chunk분리하여, 초기 로딩 속도 보완
• pre-rendering 방식 이용(웹 라이브러리, 웹팩 플러그인을 통해 각 페이지에 대한 HTML파일 미리 생성해둔 뒤, 서버에서 요청하는 자가 만약 크롤러 라면, 사전에 rendering된 HTML 버전 페이지를 보여주는 방식) ⇒ SEO 개선
• SSR, SSG 도입⇒ 초기 로딩 속도 보완 및 SEO 개선

방법 2. 라이브러리 이용

React JS: NEXT JS, Gatsby

Angular: Universal(코어 4부터는 Angular코어 모듈에 포함되서, 엄밀히 말하면 프레임워크는 아니라고 합니다...)

View JS: NUXT

방법 3. CSR + SSR

Isomorphic App 성격의 Universal Rendering 방식입니다.

: 초기 랜더링은 CSR, 그 이후는 SSR로 가져가면 어떨까 싶습니다.

※Isomorphic : 같은 모양의, 동일 구조의

 

- 장점: 초기로딩 속도 보완, SEO 개선, CSR의 장점을 가질 수 있습니다.

- 단점: 클라이언트와 서버가 모두 같은 코드로 돌아감 → 예상과 다른 결과를 맞이할 수 있습니다.

 

 

다 각자 단점이 있습니다.. 그럼 어떻게??

서비스 성격에 따라 다르다고 결론 내릴 수 있겠습니다..

즉, 대부분 고객 개인정보로 이루어진 페이지, 유저랑 상호작용이 많다 ⇒ CSR

그리고, 회사 홈페이지, 누구에게나 항상 같은내용, 업데이트 거의 안함 ⇒ SSG

또, 사용자에 따라 페이지 내용달라진다. 빠른 인터렉션이 중요하다, 화면 깜빡임 안된다, 상위노출되면 좋겠다. ⇒ CSR + SSR