CSR SSR 동작 단계 | CSR SSR 개념적 차이, 장단점

사전 개념 정리

CSR과 SSR에 대해 공부하기 전에 알아두어야 하는 사전 지식에 대해 먼저 정리해보려고 한다.

1. MPA와 SPA

▶ MPA (MultiPage Application)

출처:https://www.excellentwebworld.com/what-is-a-single-page-application/

전통적 페이지 Lifecycle, 탭을 이동할 때 (링크 클릭 시) 마다 서버로부터 새로운 HTML 파일을 받아와서 페이지 전체를 새로 렌더링 하는 방식
렌더링 방식으로 SSR을 사용

▶ SPA (Single Page Application)

하나의 페이지로 구성된 웹 어플리케이션, 페이지가 전체적으로 렌더링 되지 않고 필요한 부분만 동적으로 렌더링 되는 방식
렌더링 방식으로 CSR을 사용

2. SPA 사용까지의 웹의 역사

▶ 예전

Static Site(정적인 페이지)로 주로 구성되어 있음
방식
1. 서버에 이미 잘 만들어진 HTML 문서들이 존재
2. 사용자가 인터넷에 주소를 입력
3. 서버에 이미 배포되어 있는 HTML문서를 받아와서 보여주는 유저에게 보여 줌
불편한 점
- 페이지 내에서 링크를 클릭해서 다른 페이지로 이동하려면 HTML파일 전체를 새로 받아와야 함

▶ 1996

문서 내에서 또 다른 문서를 담을 수 있는 <iframe>태그가 도입 → 문서를 부분적으로 업데이트할 수 있게 됨

▶ 1998

우리가 많이 쓰는 fetch API의 원조인 XMLHttpRequest API가 개발됨 → HTML 문서 전체가 아닌 필요한 데이터만 서버에서 받아올 수 있게 됨
받아온 데이터를 js를 이용해서 동적으로 HTML요소를 생성해서 페이지를 업데이트하는 방식

▶ 2005

AJAX(Asynchronous JavaScript And XML) 탄생
페이지 새로고침 없이 서버에서 비동기적으로 데이터 요청 가능 → 현재 널리 쓰이는 SPA(single page application)를 가능하게 만들어 줌
지메일, 구글 맵에서 사용하는 방식

이러한 웹의 발전으로 웹사이트의 사용성이 좋아짐에 따라 SPA를 주로 사용하게 되었고, 동시에 사용자의 PC도 성능 향상되면서 웹은 많은 것들을 무리 없이 처리할 수 있게 되었다.

또한 자바스크립트가 표준화되고, 강력한 커뮤니티가 형성되면서 Angular, React, Vue와 같은 프레임워크가 출현하게 되었다. 이와 함께 웹사이트는 CSR(Client Side Rendering)의 시대로 접어들게 된다.

CSR과 SSR

1. CSR (Client Side Rendering)

[STEP]

유저가 웹사이트에 요청을 보낸다. (링크나 메뉴 클릭)
서버 대신 CDN으로 정적 HTML 파일과 javaScript 링크들을 유저에게 빠르게 제공한다.
브라우저는 HTML을 다운로드한 후 javaScript파일도 다운로드 한다.
(이때 유저는 화면을 볼 수 없고 로딩 화면을 보고 있음 🔄)
브라우저가 javaScript를 가져온다.
JS가 실행되고 ajax를 통해 API 요청을 만들어 동적컨텐츠를 가져오고, 이를 통해 최종 컨텐츠를 렌더링 한다.
(이때 유저는 placeholder를 보게 된다.)
서버는 API가 요청한 데이터 요청에 응답한다.
최종 컨텐츠가 클라이언트 브라우저에서 DOM처리를 사용하여 렌더링 된다.
(이때부터 유저는 화면과 Interaction이 가능해진다.)

[특징]

Client 쪽에서 data를 요청하면 Server에서 렌더링에 필요한 재료(app에 필요한 로직, app을 구동하는 프레임워크/라이브러리의 소스코드 등)를 받아서 Client 쪽에서 HTML화면을 구성한다.
초기 HTML의 <body> 안은 id, root, app에 필요한 js파일 정도로 거의 비어있는 상태이다.

오늘날의 SPA인 Angular, React, Vue 등은 CSR에 해당된다.

[장점]

서버 측 부하가 적다
- Server는 비어있는 뼈대만 있는 HTML을 Client에 전달해 주기만 하면 되기 때문이다.
반응속도가 빠르고 UX도 우수함
- Client에서 연산, 라우팅들을 모두 직접 처리하기 때문이다.

[단점]

첫 화면을 보기까지 걸리는 시간이 너무 길다.
- V-dom을 만들기 위해 렌더링에 필요한 파일을 통째로 다 불러와야 한다.
- ex) /index, /two 등의 페이지를 만들기 위해서 필요한 것을 처음에 다 가져와야 만들 수 있음
SEO(Search Engine Optimization, 검색엔진 최적화)에 좋지 않음 (Low SEO)
- 검색 엔진(ex 구글, 네이버) 등은 웹 크롤러 로봇이 웹사이트의 html을 분석해서 어떤 검색어로 찾을 수 있는 사이트 인지 판단하여 검색 최적화를 해주는데, CSR의 HTML body는 대부분 텅텅 빈 상태이기 때문에 이 과정에서 불리하다.
- 구글에서는 JS파일을 인식하여 페이지가 다 로딩된 후에 웹 크롤러가 동작한다고 하지만 아직까지 잘 안 된다.
페이지 캐싱이 잘 안 된다.
- 클라이언트에서 새로 페이지를 만들어야 하는데 처음에는 빈 화면으로 오니까 캐싱할 방법이 없음

2. SSR (Server Side Rendering)

위와 같은 CSR의 문제점을 개선하기 위해 1990년대에 사용하던 Static Site에서 영감을 받은 SSR이 등장하게 된다.

[STEP]

유저가 웹사이트에 요청을 보낸다.
서버는 렌더링 할 준비가 된 HTML 파일들을 만든다.
브라우저는 HTML을 빠르게 렌더링 할 수 있다.
(이때 유저는 정적인 화면을 볼 수는 있지만, Interaction 할 수는 없다.)
브라우저는 javaScript를 다운로드하여 동적인 화면을 만든다.
유저는 컨텐츠 화면을 볼 수도 있고, Interaction도 할 수 있다.
브라우저가 JS 프레임워크를 실행한다.
그다음 브라우저는 javaScript를 다운로드하고 js를 실행하면서 페이지를 대화식으로 만든다.

[특징]

서버에서 필요한 데이터를 모두 가져와서 HTML데이터를 만들게 되고, 이렇게 잘 만들어진 HTML 파일을 동적으로 조금 제어할 수 있는 소스코드와 함께 클라이언트에게 보내준다.
클라이언트에서는 잘 만들어진 HTML 문서를 받아와서 사용자에게 바로 보여줄 수 있다.

[장점]

CSR보다 첫 페이지 로딩이 빠름
- 서버에서 렌더링 준비를 마친(모든 데이터가 담긴) HTML이 Client로 전달되기 때문이다.
효율적 SEO 가능
- 마찬가지로 서버에서 렌더링 준비를 마친(모든 데이터가 담긴) HTML이 Client로 전달되기 때문에 JS를 모르는 웹 크롤러도 첫 페이지를 읽을 수 있기 때문이다.

[단점]

Static Sites에서 발생했던 blinking 이슈 여전히 발생
- 사용자가 링크를 클릭하게 되면 전체적인 웹사이트를 다시 서버에서 받아 오는 것과 동일하기 때문에 좋지 않은 UX(사용자 경험)를 경험할 수 있음
서버 과부하에 걸리기 쉬움
- 사용자가 클릭을 할 때마다 서버에 요청해서 필요한 데이터를 가지고 와서 html화면을 구성해야 하므로 사용자의 수가 많을수록 치명적이다.
사용자가 페이지를 빨리 확인할 수는 있으나 동적으로 데이터를 처리해주는 js는 아직 연결되지 못해서 클릭 시 반응이 없을 수 있음(매우 치명적 단점)
- 즉 TTV와 TTI의 간격이 큰 편 (아래 더 보기 클릭)

TTV (Time To View) : 사용자가 웹사이트를 볼 수 있는 시간
TTI(Time To Interact) : 사용자가 웹사이트에서 클릭등의 Interaction을 할 수 있는 시간

문제 해결 방법

▶ CSR

최종적으로 번들링 해서 유저에게 보내주는 js파일을 어떻게 하면 효율적으로 많이 분할할 수 있을지 고민해야 한다.
js파일을 분할하여 정말 필수적인 파일만 보내면 사용자가 웹페이지의 첫 화면을 보는 시간을 줄여줄 수 있다.

▶ SSR

TTV와 TTI의 단차를 어떻게 하면 줄여서 사용자에게 매끄러운 UI, UX를 제공할 수 있을지 고민해야 한다.

CSR과 SSR의 특징과 장, 단점에 대해 포스팅해보았는데, 다음 포스팅에는 둘의 장점을 모아둔 앱이나, 다른 해결방안들은 어떤 것들이 있는지에 대해 포스팅해봐야겠다.

참고자료

저작자표시 비영리 변경금지

JM's NOTE🌙

CSR SSR 동작 단계 | CSR SSR 개념적 차이, 장단점

1. MPA와 SPA

▶ MPA (MultiPage Application)

▶ SPA (Single Page Application)

2. SPA 사용까지의 웹의 역사

▶ 예전

▶ 1996

▶ 1998

▶ 2005

1. CSR (Client Side Rendering)

[STEP]

[특징]

[장점]

[단점]

2. SSR (Server Side Rendering)

[STEP]

[특징]

[장점]

[단점]

▶ CSR

▶ SSR

댓글

티스토리툴바