SSR

의미

• SSR(Server Side Rendering) : 웹 페이지를 브라우저 대신 서버에서 렌더링하는 방식

특징

• 서버에서 웹 페이지를 브라우저로 보내기 전에 완전히 렌더링함
• 렌더링 과정
  • 웹 페이지를 처음 렌더링 할 때
    • 브라우저가 서버의 URI로 GET요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송
    • 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링됨
  • 웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우
    • 서버가 데이터베이스의 데이터를 불러옴
    • 서버가 웹 페이지를 완전히 렌더링 된 페이지로 변환함
    • 서버가 브라우저에 응답으로 보냄
  • 브라우저에서 다른 경로로 이동할 때
    • 서버가 웹 페이지를 처음 렌더링할 때와 동일한 작업을 다시 수행

장점

• SEO(Search Engine Optimization)에 유리
  • 모든 콘텐츠가 HTML에 포함되어 있기 때문에 효율적인 검색엔진 최적화 가능
• 웹 페이지의 첫 화면 렌더링이 빠름
  • 브라우저에 웹페이지가 도착했을 때 이미 렌더링이 완료된 상태이기 때문

단점

• blinking 이슈
  • 새로운 데이터가 필요할 때마다 새롭게 렌더링된 웹사이트를 서버로부터 받기 때문임
• 사용자가 많을수록 서버에 부담
  • 서버가 데이터 요청을 받을 때마다 필요한 데이터를 가져와서 HTML을 만듦
• 사용자와 상호작용하기까지 시간이 걸림 (TTV !== TTI)
  • HTML와 CSS 파일이 실행되어도, 사용자와 상호작용을 담당하는 JavaScript 파일이 실행되기까지 시간이 걸릴 수 있기 때문

TTV와 TTI : 웹 사이트의 성능을 판단하는 기준 중 하나
TTV(Time To View) : 화면이 보여지기 전까지 걸리는 시간
TTI(Time To Interact) : 사용자와 상호작용하기까지 걸리는 시간

cf. SSG

• SSG(Static Site Generation) a.k.a Static Rendering
  • 서버에서 요청하는 즉시 웹 페이지를 만드는 SSR와는 달리, 서버에서 요청하기 전에 웹 페이지를 미리 만들어두는 방식으로 데이터가 바뀔 일이 거의 없는 페이지에 적합함
  • 한편, SSR은 데이터가 달라져 미리 웹 페이지를 만들기 어려울 때 더 적합함

---

CSR

의미

• CSR(Client Side Rendering) : 웹 페이지를 서버 대신 클라이언트에서 렌더링하는 방식
  • 대표적인 클라이언트인 웹 브라우저에서 렌더링이 됨

특징

• 서버에서 전달받은 파일을 바탕으로 브라우저에서 웹 페이지를 완전히 렌더링함
• 렌더링 과정
  • 웹 페이지를 처음 렌더링 할 때
    • 브라우저의 요청을 서버로 보내면 서버는 웹 페이지의 골격이 될 단일 페이지(Single Page)와 JavaScript 파일을 클라이언트에 보냄
    • 클라이언트가 웹 페이지를 받으면, 웹 페이지와 함께 전달된 JavaScript 파일을 활용해 브라우저의 웹 페이지를 완전히 렌더링 된 페이지로 바꿈
  • 웹 페이지 내용에 데이터베이스의 데이터가 필요할 때
    • 브라우저가 Fetch와 같은 API를 사용하여 데이터베이스에 저장된 데이터를 가져와서 웹 페이지에 렌더링함
  • 브라우저에서 다른 경로로 이동할 때
    • 맨 처음 서버로부터 전달받은 웹 페이지 파일과 동일한 파일에 필요한 데이터를 전달 받아 다시 렌더링함

장점

• 빠른 라우팅
  • 다른 경로가 요청될 때, 동적으로 라우팅을 관리하기 때문에 사용자와 웹사이트 간 상호 작용이 많은 경우 강력한 사용자 경험을 제공

단점

• SEO(Search Engine Optimization)에 불리
  • HTML에 콘텐츠가 별로 없고, javascript에 대부분의 내용이 포함되어 있음
• 웹 페이지의 첫 화면 렌더링이 느림
  • 브라우저에서 렌더링이 실행되고, javascript 파일 크기가 크기 때문

---

정리하기

SSR과 CSR의 차이점

기준	SSR	CSR
웹페이지의 렌더링 위치	서버	클라이언트(ex. 브라우저)
데이터베이스의 데이터가 필요할 때	서버가 데이터베이스의 데이터를 불러온 후 웹페이지를 다시 렌더링해서 보냄	브라우저가 API를 사용하여 데이터베이스에 저장된 데이터를 가져와서 웹 페이지를 렌더링
다른 경로 요청	서버가 웹 페이지를 다시 보냄	페이지를 새로고침 하지 않고, 동적으로 라우팅을 관리
장점	SEO 유리, 웹 페이지 첫 화면 렌더링이 빠름	빠른 라우팅
단점	Blinking 이슈, TTV ≠ TTI	SEO 불리, 웹 페이지의 첫 화면 렌더링이 느림

언제 어떤 방법을 쓰는가

SSR

• SEO가 우선순위인 경우, 일반적으로 SSR을 사용
• 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우, 단일 파일의 용량이 작은 SSR 이 적합
• 웹 페이지가 사용자와 상호작용이 적은 경우, SSR 을 활용

CSR

• SEO 가 우선순위가 아닌 경우, CSR을 이용
• 사이트에 풍부한 상호 작용이 있는 경우, CSR 은 빠른 라우팅으로 강력한 사용자 경험을 제공
• 웹 애플리케이션을 제작하는 경우, CSR을 이용해 더 나은 사용자 경험(빠른 동적 렌더링 등)을 제공

---

참고사항

• SPA와 MPA는 페이지 구성 방식에 따른 구분이고, CSR과 SSR은 렌더링 방식에 따른 구분임
• 보통 SPA로 페이지 구성을 하면 CSR 렌더링 방식을 따르고, MPA로 페이지 구성을 하면 SSR 렌더링 방식을 따름

참고하면 좋은 자료
드림코딩, 서버사이드 렌더링
우아한TECH, CSR&SSR