CSR, SSR, SSG, ISR

1. CSR (Client-Side Rendering)

클라이언트(브라우저)에서 페이지를 렌더링하는 방식입니다.

CSR 과정

1. 사용자 접속

• URL 입력 → 서버가 빈 HTML 전달
• JavaScript파일을 로드하는 코드만 포함

2. JavaScript 다운로드

• 브라우저가 JS 다운로드
• 하얀 화면 상태 유지

3. React 앱 실행

• JS가 실행되며 필요한 Data API요청

4. 콘텐츠 표시

• 페이지 로드 완료 및 상호작용 가능

CSR의 장 단점

장점	단점
빠른 인터랙션: 페이지 로드 후 빠른 상호작용이 가능	첫 로딩 속도: JavaScript 로드 전까지 콘텐츠가 표시되지 않아 초기 로딩이 느림
페이지 전환 빠름: 페이지 이동이나 상태 변경이 빠르게 이루어짐	SEO 불리: JavaScript로 렌더링되어 검색엔진이 콘텐츠를 제대로 인식하기 어려움

검색 엔진의 크롤링이 HTML을 기반으로 하기 때문

---

2. SSR (Server-Side Rendering)

서버에서 렌더링한 HTML을 클라이언트에 전달하는 방식입니다.

SSR 과정

1. 사용자 접속

• URL 입력 → 서버가 완성된 HTML 전송

2. 즉시 콘텐츠 표시

• 브라우저가 HTML 렌더링 및 JS 다운로드

3. React 앱 실행

• JS가 실행되며 필요한 Data API요청

4. 상호작용 가능

SSR의 장 단점

장점	단점
빠른 첫 로딩 속도: 서버에서 렌더링된 HTML을 제공하므로 즉시 콘텐츠가 표시됨	서버 부하: 서버에서 매번 HTML을 렌더링해야 하므로 서버 부하가 큼
SEO에 유리: 서버에서 완성된 HTML을 클라이언트에 제공하여 SEO에 유리함	페이지 전환 시 새로 고침: 페이지 이동 시마다 서버로부터 새로운 페이지를 받아옴

---

CSR vs SSR 핵심 차이점 요약

구분	CSR	SSR
초기 로딩	느림 (JS 번들 파일 다운로드 필요)	빠름 (완성된 HTML 즉시 제공)
페이지 전환	즉시 반응 (API 호출만 발생)	전체 새로고침 (새 HTML 요청)
서버 부하	적음 (클라이언트에서 렌더링 처리)	많음 (매 요청마다 서버에서 렌더링)
SEO	문제 발생 가능 (크롤링 어려움)	최적화 용이 (완성된 HTML 제공)
사용 사례	대시보드, 관리자 페이지, SPA 웹 앱	뉴스 사이트, 블로그, 이커머스 상품 페이지

최신 프레임워크(Next.js, Nuxt.js)는 SSR + CSR 하이브리드 방식을 채택합니다.

• 첫 방문: SSR로 빠른 로딩과 SEO 대응
• 이후 동작: CSR로 부드러운 UX 제공

---

3. SSG (Static Site Generation)

SSG는 빌드 시에 모든 페이지를 미리 렌더링하여 정적 파일을 생성하는 방식입니다. 서버에서 HTML을 미리 생성한 후, 클라이언트는 정적 파일을 받아서 빠르게 렌더링합니다.

SSG의 장단점

장점	단점
매우 빠른 로딩: 빌드 타임에 모든 페이지를 미리 렌더링하므로 빠른 페이지 로딩 속도 제공	동적인 콘텐츠 어려움: 모든 콘텐츠가 정적으로 생성되어 동적 데이터를 처리하기 어려움
서버 부하 없음: 서버에서 정적 파일을 제공하므로 서버 부하가 거의 없음	빌드 시간이 길어짐: 사이트가 커지면 전체 사이트를 다시 빌드해야 하므로 빌드 시간이 길어짐
SEO에 유리: 정적 HTML을 클라이언트에게 제공하여 검색 엔진이 콘텐츠를 쉽게 크롤링

---

4. ISR (Incremental Static Regeneration)

ISR은 SSG의 발전된 형태로, 빌드된 페이지를 동적으로 갱신할 수 있는 기능입니다. 페이지를 미리 빌드하되, 특정 시간 후에 변경된 페이지를 서버에서 갱신합니다.

ISR의 장단점

장점	단점
SSG의 장점: SSG의 장점을 그대로 이어받아 빠른 페이지 로딩 속도를 제공	추가 설정 필요: 재빌드 주기 등을 설정해야 하므로 추가적인 설정이 필요
페이지를 최신 상태로 유지: 주기적으로 페이지를 재빌드하여 최신 콘텐츠 제공	서버에서 일부 렌더링 처리: 일부 동적 콘텐츠는 서버에서 렌더링하여 제공해야 함

---

Reference
https://www.elancer.co.kr/blog/detail/214
https://dev-ellachoi.tistory.com/28
https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8