SSR, CSR, SPA 차이점 및 개념, Virtual Dom

SPA

• 용자가 클릭을 할 때마다 서버에서 새로운 .html 파일을 새로 받아오는 게 아니라, 처음에 받은 페이지 하나에서 필요한 부분만 교체하며 보여주는 방식.

CSR 클라이언트 사이드 랜더링

• SPA라는 구조를 가장 효율적으로 서비스하기 위해 선택하는 전략이 바로 CSR이다.
• 서버는 텅 빈 HTML과 JS 파일만 보내주고, 브라우저(클라이언트)가 JS를 실행해 동적으로 DOM을 생성하고 화면을 그리는 방식.
• React, Vue
• 장점:
  • 첫 로딩 이후에는 서버 부하가 적음.
  • 변경된 데이터만 받아오므로 화면 전환이 매우 빠름.
• 단점:
  • 초기 로딩 속도(TTV)가 느림 (JS 파일이 무거울수록 심화).

SSR 서버 사이드 랜더링 

• 사용자가 요청할 때마다 서버에서 즉석으로 HTML을 생성(렌더링)하여 완성된 페이지를 브라우저에 전달하는 방식.
• Thymeleaf, JSP등
• 장점:
  • 초기 로딩 속도가 빠름 (이미 완성된 HTML을 받기 때문).
• 단점:
  • 페이지 이동 시마다 화면 깜빡임(새로고침) 발생.
  • 서버가 매번 페이지를 생성해야 하므로 서버 부하가 높음.

(SSR + CSR)

최근 트렌드는 두 방식의 장점만 합치는 것이다. 첫 화면은 서버에서 빠르게 보여주고(SSR), 이후 동작은 부드럽게(CSR) 처리한다.

 

• Next.js: 리액트 기반의 프레임워크지만, SSR과 SSG(Static Site Generation)를 기본으로 지원한다. "SEO가 중요한 리액트 서비스"를 만들 때 필수적인 선택지다.
• Nuxt.js: Vue.js 진영에서 Next.js와 같은 역할을 하는 프레임워크다.

Dom 이란?

개념: 웹 페이지(HTML 문서)를 브라우저가 이해할 수 있도록 객체(Object) 형태로 만든 모델.

HTML은 단순한 텍스트 파일일 뿐이야. 자바스크립트(JS)는 텍스트를 직접 수정할 수 없어. 그래서 브라우저가 HTML을 읽어서 "이 버튼은 하나의 객체야", "이 글자는 하나의 속성값이야"라고 자바스크립트가 건드릴 수 있는 형태로 변환해 주는 거야.

Dom의 한계와 문제점

요즘 웹은 한 페이지에서 수만 번의 변화가 일어나. 그런데 DOM의 특정 요소를 하나 바꾸면, 브라우저는 그 변화 때문에 영향받는 다른 요소들의 위치를 다 다시 계산(Reflow)하고 색칠(Repaint)해야 해.

 

• 성능 저하: 이 과정이 너무 자주 일어나면 화면이 버벅거리게 돼.
• 해결책: 그래서 "실제 DOM을 매번 건드리지 말고, 메모리에 가짜 DOM(Virtual DOM)을 만들어서 연습해본 뒤에 한 번에 반영하자!"라는 아이디어가 나온 거지.

 

Vurtual Dom

실제 DOM의 구조를 자바스크립트 객체 형태로 메모리에 복사해둔 가벼운 복사본이다.

실제 화면에 직접 그리는 것이 아니라, 메모리상에서 먼저 연산을 수행하기 때문에 훨씬 빠르다.

동작 원리 (Diffing & Patching)

변화가 발생했을 때 리액트가 화면을 업데이트하는 3단계 과정이다.

1. Render: 데이터가 변경되면 전체 UI를 Virtual DOM에 리렌더링한다. (메모리상의 가상 객체만 생성하는 것이라 매우 빠름)
2. Diffing (비교): 이전의 Virtual DOM 스냅샷과 방금 만든 새로운 Virtual DOM을 비교하여 실제로 바뀐 부분만 찾아낸다.
3. Reconciliation (재조정/Patching): 바뀐 부분만 실제 DOM에 적용한다.

State 상태값을 내려받아서 사용하기 까지의 과정

1. 먼저 컴포넌트 내부에서 관리할 데이터를 선언해. 리액트의 경우 useState 같은 훅(Hook)을 사용해서 상태의 초기값을 설정. 이 단계에서 메모리상에 해당 상태를 위한 공간이 할당
2. 사용자가 버튼을 클릭하거나 API로부터 데이터를 받아오는 등의 이벤트가 발생하면, 상태를 변경하는 함수(예: setState)를 호출
   ( 중요한 점은 상태를 직접 수정(state = new)하는 게 아니라, 반드시 제공된 함수를 써야 한다는 것,
   그래야 프레임워크가 "상태가 바뀌었으니 화면을 다시 그려야겠구나!"라고 인지할 수 있음)
3. 상태 변경 함수가 호출되면 컴포넌트는 리렌더링(Re-rendering) 단계에 진입
   가상 돔 생성: 바뀐 상태값을 반영하여 새로운 가상 돔(Virtual DOM) 트리를 메모리에 새로 생성
   디핑(Diffing): 이전 단계에서 가지고 있던 기존 가상 돔과 방금 만든 새로운 가상 돔을 비교
   재조정(Reconciliation): 비교 결과, 실제로 바뀐 요소가 무엇인지 찾아냄
   
4. 계산이 끝나면 바뀐 부분만 실제 브라우저의 DOM에 적용
5. 결과적으로 HTML 템플릿 안에 작성해두었던 변수 자리에 새로운 상태값이 채워지게