0. 학습 배경

지난 framer-motion으로 CSR 한계 극복하기! 편을 작성하면서, 그동안 첫 개발을 클라이언트 사이드 렌더링(CSR)으로 시작해서 CSR에 익숙해지면서, 브라우저 너머에 웹서버가 있다는 사실을 잊어버렸던 것 같습니다.

그래서 CSR, SSR의 개념에 대해서 한번 더 복습하면서 다시금 웹 렌더링 방식을 상기시키면 좋겠다는 생각이 들어 CSR vs SSR 정의,특징 및 차이에 대해서 간단하게 정리해보았습니다.

1. CSR (Client Side Rendering)

클라이언트 사이드 렌더링(CSR)은 브라우저가 페이지에 필요한 최소한의 HTML 페이지와 JavaScript를 다운로드합니다. 그런 다음 JavaScript를 사용하여 DOM을 업데이트하고 페이지를 렌더링하는 방식입니다.

페이지가 처음 로드된 후에는 필요한 데이터만 가져오면 되고 JavaScript는 전체 페이지를 새로 고칠 필요 없이 페이지의 일부를 다시 렌더링할 수 있으므로 동일한 웹 사이트의 다른 페이지로 이동하는 것이 일반적으로 더 빠릅니다.(SPA)

• 장점
  • 동적으로 Dom을 그리기에 원하는 부분만 업데이트가 가능하다. ex) Header, Footer와 같은 공통 레이아웃에 사용되는 컴포넌트의 경우는 고정시켜놓고 변화가 필요한 컴포넌트만 변경한다.
    
• 단점
  • 초기로드 시 모든 로직이 담긴 JavaScript를 로드하기에 시간이 오래 걸린다.
  • SSR에 비해 취약하다.

2. SSR (Server Side Rendering)

서버 사이드 렌더링은 기본적으로 서버에서 HTML, JavaScript를 만들고 렌더링을 모두 서버에서 진행하고 클라이언트에 넘겨주는 방식입니다.

클라이언트에서 요청할 때마다 각 상황에 맞는 HTML 파일을 넘겨주기 때문에 페이지가 여러 개로 작동됩니다. (MPA)

• 장점
  • 최초에 JavaScript 파일 로드 없이도 HTML이 이미 렌더되어 보여지기 때문에 페이지 로딩이 매우 빠르다.
  • SSR은 초기 렌더링을 서버 측에서 수행하므로 검색 엔진 최적화에 유리하다.
• 단점
  • 링크이동 시 HTML파일을 새로 서버에서 받아오기에 깜빡임 현상이 발생한다.
  • 완성된 HTML을 JavaScript보다 먼저 받아와 화면상에서 HTML을 확인할 수 있지만 JavaScript 다운이 늦어지면서 기능 동작이 안될 수 있다.

3. CSR vs SSR 한눈에 비교하기

출처 : https://velog.io/@soom/CSR-Client-Side-Rendering-SSR-Server-Side-Rendering-SPA-Single-Page-Application-MPA-Multi-Page-Application

4. 느낀점

렌더링에서 브라우저와 서버의 역할을 분명하게 이해하는 것은 웹 개발에서 매우 중요한 부분이라는 것을 다시금 상기할 수 있는 좋은 기회였습니다.

CSR과 SSR 등 다양한 렌더링 방식은 결국 브라우저와 서버가 각각 어떤 역할을 맡는지에 따라 차이가 발생하며, 서비스의 목적에 따라 적합한 렌더링 방식을 선택할 수 있어야 한다는 것이 핵심인 것 같습니다. 다시 말해 주된 타깃 사용자와 서비스 특성에 맞게 선택해야 하는 부분인 것을 배울 수 있었습니다.

<참고자료 출처>

SSR 시작하기 전 알아야 할 것들 (feat. CSR)

[ 기술 스터디 ] SSR과 CSR의 차이

SSR, CSR, SEO 개념 정리

CSR, SSR