SSR(서버사이드 렌더링) vs CSR(클라이언트 사이드 렌더링)

MPA vs SPA

• MPA(Multi Paga Application)의 약자로 여러 페이지로 구성된 웹 어플리케이션을 말한다.
  유저의 인터렉션이 발생할 때마다 서버로부터 새로운 html을 받아와 해당 링크로 이동하여 페이지 전체를 새로 렌더링 하는 웹페이지 구성 방식이다.
• SPA(Single Page Application)의 약자로 하나의 페이지로 구성된 웹 어플리케이션을 말한다.
  브라우저에 최초로 한번 페이지 전체를 로드하고, 이후 인터렉션이 일어나면 특정 부분만 Ajax를 통해 데이터를 바인딩 하는 방식이다.
  React와 Vue 등과 같은 프레임워크들이 SPA방식이다.

SSR(Server Side Rendering)

MPA는 SSR 방식을 채택한다.
SSR란 서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링 하는 방식이다.

1. User가 Website를 Request함
2. Server는 'Ready to Render', 즉시 렌더링 가능한 html 파일을 만듬.
3. 클라이언트에 전달되는 순간, HTML이 즉시 렌더링 됨 (사이트 자체는 조작 불가능(Javascrpit를 읽기전))
4. 클라이언트가 자바스크립트를 다운받음
5. 다운받아지고 있는 사이에 유저는 컨텐츠를 볼 수 있지만 조작은 불가, 이때 사용자 인터렉션을 기억함
6. 브라우저가 Javascrpit 프레임워크를 실행
7. JS가 컴파일 되고 기억하고 있던 인터렉션을 실행, 이제 상호작용 가능

서버에서 이미 렌더 가능한 상태로 클라이언트에 전달되기 때문에 JS가 다운되는 동안 사이트를 볼 수 있음
TTV(Time To View)와 TTI(Time To Interact)간에 시간 간격이 존재함. 즉, 버튼이 보이더라도 눌러도 반응 없을 수 있음.

SSR 장점과 단점

장점

• SEO, 검색엔진 최적화: 검색엔진이 웹을 크롤링하면서 페이지에 컨텐츠를 색인하는데
  SSR은 MPA를 사용하여 화면을 구성하는 각각의 페이지가 있기 때문에 seo에 유리함
• 빠른 초기 로딩: 서버로부터 화면을 렌더하기 위한 요소를 먼저 가져오기 때문에 초기 로딩속도가 빠름

단점

• 사용자 경험: 매번 페이지를 요청할 때마다 새로 고침 되기 때문에 사용자 경험이 떨어짐.
• 서버측 부하가 증가: 페이지를 요청할 때마다 모든 리소스를 다시 서버에 요청하여 응답하므로 서버이 증가함

CSR(Client Side Rendering)

CSR은 SPA을 채택한다.
사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식이다.

1. User가 Website를 Request함
2. CDN이 HTML 파일과 JS로 접근할 수 있는 링크를 클라이언트로 보냄(CDN:엔드 유저의 요청에 '물리적'으로 가까운 서버에서 요청에 응답하는 방식)
3. 클라이언트가 HTML과 JS를 다운로드 받음 (아무것도 보이지않음)
4. 다운이 완료된 JS가 실행되고 데이터를 위한 API가 호출됨 (유저는 Placeholder를 보게 됨)
5. 서버가 API로부터의 요청에 응답한다
6. API로부터 받아온 data를 placeholder 자리에 넣어준다. (상호작용 가능)

3. 클라이언트에 전달되는 순간, HTML이 즉시 렌더링 됨 (사이트 자체는 조작 불가능(Javascrpit를 읽기전))
4. 클라이언트 자바스클비트를 다운받음
5. 다운받아지고 있는 사이에 유저는 컨텐츠를 볼 수 있지만 조작은 불가, 이때 사용자 인터렉션을 기억함
6. 브라우저가 Javascrpit 프레임워크를 실행
7. JS가 컴파일 되고 기억하고 있던 인터렉션을 실행, 이제 상호작용 가능

CSR 장점과 단점

장점

• 빠른 속도 (초기화면X): 초기화면 다운을 느리지만 이후 관련된 데이터만 가져오므로 속도가 빠르다
• 서버 부화 감소: 필요한 부분만 요청하고 응답하기 때문에 서버 부화가 적다
• 사용자 친화적: 전체 페이지를 로딩하지 않아 페이지가 새로고침 되지 않는다

단점

• SEO 불리: 자바스크립트를 사용하여 사용자와 상호작용 후에 페이지 내용을 로드함 (그 전엔 빈페이지만 보인다)
• 초기 로딩속도 느림: 모든 JS 파일을 다운받아야 보이기 시작한다.

렌더링 방식 선택 기준

서비스, 프로젝트, 콘텐츠 등 성격에 따라 달라진다

Server Side Rendering

1) 상위 노출이 필요하다.
2) 누구에게나 동일한 내용을 노출한다.
3) 페이지마다 데이터가 자주 바뀐다.
4) 웹 사이트에 상호작용이 별로 없다.

Client Side Rendering

1) 개인정보 데이터를 기준으로 구성된다.
2) 좋은 사용자 경험을 제공하고 싶다.
3) 상위 노출보다 고객의 데이터 보호가 중요하다.
4) 사용자와 상호작용할 것이 많다.

Universal Rendering

Next.js를 사용하면 첫페이지는 SSR로 백엔드 서버에서 렌더링하여 빈 html이 아닌 데이터가 채워진 html을 받아 검색최적화 문제를 해결하고, 다음 페이지부터 CSR로 필요한 데이터만 부분적으로 갱신하여 서버의 과부화를 줄일 수 있다.
하지만 이러한 방법은 서버 환경 구성이나 빌드 등의 작업이 생소한 프론트엔드 개발자에게는 복잡할 수 있다.