리액트 React/리액트 React

SSR, CSR 비교

leexx 2023. 4. 3. 02:46

렌더링 이란

  • 브라우저 렌더링이란 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면(view)에 표시해주는 작업을 말함
  • 즉, 브라우저가 서버로부터 HTML, CSS, JavaScript 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 브라우저 화면을 그려주는 것
  • 만약 www.naver.com 을 입력한다면, 네이버의 서버로 화면을 그릴 내용을 요청하고 받아서 화면에 그림
  • Client 에서 그린다면 CSR, Server 에서 그린다면 SSR 임

 

CSR

CSR 이란?

  • CSR = Client Side Rendering
  • 사용자가 요청할 때 마다, 리소스를 서버에서 보내주면 클라이언트 (브라우저) 는 이를 해석 해서 화면에 그려줌

예시

  • body 안에는 id="root" 만 달랑 하나 들어있고, 어플리케이션에 필요한 자바스크립트의 링크만 들어가있다.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="Amazing web site" />
    <title>App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="app.js"></script>
  </body>
</html>
</html>
  • HTML이 텅텅 비어있기 때문에 처음 접속하게 되면 빈 화면만 보이게 되고, 링크된 자바스크립트를 다운로드 받게 됨
    • 여기에는 어플리케이션에 필요한 로직, 구동하기 위한 프레임워크, 라이브러리의 소스코드들도 모두 포함되어 있음
    • 그렇기 때문에 처음 다운로드 받을 때 꽤나 시간이 소요될 수 있음 (TTFB = Time To First Byte)
    • 따라서 다운받은 리소스를 화면에 그리는데도 시간이 오래 걸림 (FCP = First Colorful Paint)

장점

  1. SSR 에 비해 구현이 간단함
  2. Client 가 그리기 때문에, Server 에 무리가 없음
  3. 유저가 사이트를 사용할 때, 상호작용을 빠르게 할 수 있음

단점

  1. 사용자가 첫 화면을 보기까지의 시간이 오래 걸릴 수 있음
  2. 좋지 않은 SEO (Search Engine Optimization) 성능
    • 검색엔진은 어떤 리소스가 클라이언트에게 보여질 지 알 수 없기 때문에, 검색 노출이 잘 안됨

유용하게 쓰일 수 있는 경우

  • 유저와 사이트의 상호작용이 많은 경우

 

SSR

SSR 이란?

  • SSR = Server Side Rendering
  • SSR은 CSR과 달리 클라이언트에서 모든 것을 처리하지 않고, 웹 사이트에 접속하면 서버에서 필요한 데이터를 모두 가져와서 HTML 파일을 만듦
  • 다 만들면, 클라이언트에게 HTML 파일과, HTML 파일을 동적으로 제어할 수 있는 소스코드를 클라이언트에게 보내줌
  • 클라이언트는 이렇게 이미 만들어진 HTML 문서를 사용자에게 바로 보여줌

 

SSR 의 장점 (= CSR 의 단점)

  1. 사용자가 첫 화면을 보기까지의 시간이 CSR 에 비해 빨라짐
  2. 보다 좋은 SEO 성능

 

SSR 의 단점

  1. Blinking Issue
    • 사용자가 새로고침을 하게 되면 전체 웹사이트를 다시 서버에서 받아와야 하기 때문에 화면이 없어졌다가 나타남
  2. 서버 비용 증가
    • 서버가 하는 일이 많다보니, 서버의 비용이 증가할 수 있음
    • 또한 사용자의 요청이 많을 경우, 서버에 데이터를 요청하는 횟수가 많아짐에 따라 비용 증가 가능
  3. 상호작용 (event) 이 많은 사이트의 경우
    • 매번 클라이언트에서 새로 그려야하기 때문에, SSR 의 장점을 살릴 수 없음

 

SSR 이 유용하게 쓰일 수 있는 곳

  • SEO 가 필요한 곳
  • 그려야 하는 컨텐츠가 아주 많은 경우 (서버는 클라이언트보다 빠르게 HTML 문서를 만들 수 있음)
  • 클라이언트에게 최대한 빠른 화면을 보여주어야 하는 경우 (단 서버에서 빨리 줘야 함)

 

SSR 관련 프레임워크

  • Next.js
    • SSR의 대표주자
    • v13 에서 페이지 단위가 아닌 컴포넌트 단위로 CSR, SSR 구현 (ClientComponent, ServerComponent) 이 가능
    • 즉 컴포넌트 단위로 서버가 잘하는 것 (SSR) 은 서버에게 시키고, 클라이언트가 잘하는 것 (CSR) 은 클라이언트에게 시킬 수 있음
    • 단 Next.js 는 배포 시 Vercel 을 사용하지 않는다면 배포가 번거롭다고 함, 다만 Vercel 은 비용이 비쌈
  • Remix
    • 과거에는 유료였으나 최근 오픈소스로 풀렸음
    • 성능이 Next.js 에게 크게 모자라지 않으나 사용자 수는 1/10 도 안되는 수준

 

어떤 것을 선택해야 할까

  • 중요한 것은 프로덕트에서 무엇을 중요하게 생각하냐 임
    • SEO 가 중요하고, 컨텐츠가 많다면 SSR
    • 컨텐츠가 그리 많지는 않으나 상호작용이 중요하다면 CSR
    • 컨텐츠도 많고, 상호작용도 중요하고, SEO 도 중요하면 Next.js

 

참고자료

https://kemut.tistory.com/7

https://www.startupcode.kr/company/blog/archives/12

https://ctdlog.tistory.com/46