[8주차] 위클리 페이퍼 - 웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명해 주세요.

CSR (Client-Side Rendering)

정의

• 클라이언트 사이드에서 페이지 렌더링 작업을 수행하는 방식
• 초기 로딩 시 HTML 파일과 JavaScript 파일을 받아 브라우저에서 실행 이후, 모든 렌더링과 업데이트는 클라이언트 측에서 이루어짐

특징 (장/단점)

• 장점
  • 빠른 사용자 상호작용: 한 번 로드 되면 페이지 전환이 빠름
  • 동적 콘텐츠: 사용자 상호작용에 따라 동적으로 컨텐츠 업데이트
• 단점
  • 초기 로딩 속도: 초기 로딩 속도가 느릴 수 있음
  • SEO 문제: 초기 로딩 시, 빈 HTML 문서를 받아, SEO가 어려울 수 있음

보완 사항

• Prerendering, Dynamic Rendering, Server Components(React 18+) 등을 통해 보완 가능

사용 상황

• 대시보드 및 웹 애플리케이션
  • 사용자와의 동적인 상호작용이 중요한 경우 적합
• 실시간 데이터 피드
  • 자주 업데이트 되는 데이터를 처리하는 경우 적합

---

SSR (Server-Side Rendering)

정의

• 서버 사이드에서 페이지 렌더링을 수행한 후, 완성된 HTML을 클라이언트에 전송하는 방식
• 사용자가 페이지를 요청할 때마다, 서버에서 HTML을 생성하여 보내줌

특징 (장/단점)

• 장점
  • 빠른 초기 로딩
  • SEO 친화적: 검색 엔진이 쉽게 크롤링할 수 있음
  • 즉시 컨텐츠 제공: 사용자가 첫 페이지 컨텐츠를 요청할 때, 바로 볼 수 있음
• 단점
  • 서버 부하 증가: 매 요청마다 서버에서 렌더링을 해야 하기 때문
  • 재 요청시 속도 느링: 페이지 이동 시 재 요청을 하면, 서버 요청을 해야 하므로 전환 속도가 느릴 수 있음

보완 사항

• CDN + SSR 결과 캐싱, revalidation 등을 통한 성능 개선

사용 상황

• 컨텐츠 중심의 웹 사이트: 블로그, 뉴스 등, 초기 로딩 속도와 SEO가 중요한 경우 적합
• 마케팅 사이트: 검색 엔진 최적화가 중요한 경우 적합

---

SSG (Static Site Generation)

정의

• 정적 사이트 생성 방식
• 빌드 시 모든 페이지를 미리 생성하여 정적 파일로 서버에 저장하는 방식 요청 시 서버는 미리 생성된 정적 파일을 클라이언트에 전달

특징 (장/단점)

• 장점
  • 매우 빠른 로딩 속도: 정적 파일을 제공하여, 매우 빠른 속도를 제공
  • 높은 보안성: 서버 애플리케이션 등이 없이, 정적 파일만 제공하므로, Attack Surface가 줄어듦
  • 간단한 서버 설정: CDN을 통해 쉽게 배포할 수 있음
• 단점
  • 빌드 시점에 데이터 고정: 빌드 시점 이후에 데이터 변경이 어려움

보완 사항

• 부분 빌드 기술(예: Incremental Static Regeneration(ISR))을 통해 변경 데이터만 재생성 가능
• 클라이언트 측 API 호출 방식으로, 동적 데이터를 보강할 수 있음

사용 상황

• 정적 컨텐츠 웹 사이트: 변경이 자주 없는 정적 웹사이트의 경우 적합
  • 블로그 및 문서 사이트: 게시물이 자주 변경 되지 않는 경우 적합
  • 포트폴리오 사이트: 개인의 포트폴리오가 자주 변경되지 않는 경우 적합

---

요약

방식 렌더링 시점 초기 로딩 속도 SEO 동적 데이터 처리 서버 부하 보안성 대표 사례

방식	렌더링 시점	초기 로딩 속도	SEO	동적 데이터 처리	서버 부하	보안성	대표 사례
CSR	클라이언트	느림	낮음	우수	낮음	중간	SPA, React App
SSR	서버	빠름	높음	우수	높음	낮음	뉴스, 전자상거래
SSG	빌드 시	매우 빠름	높음	제한적	매우 낮음	높음	블로그, 문서 사이트

---

참고자료

• 전반적인 내용
  • https://www.codeit.kr/topics/fs-paper3/lessons/8639?topicVersion=1&lessonVersion=1
  • https://strapi.io/blog/what-is-website-rendering?utm_source=chatgpt.com
  • https://dev.to/josefine/rendering-strategies-basics-of-ssr-ssg-csr-isr-ll9?utm_source=chatgpt.com
• SSG의 보완 방법들에 대한 설명
  • https://vercel.com/blog/how-to-choose-the-best-rendering-strategy-for-your-app
• Incremental Static Regeneration(ISR)에 대한 설명
  • https://www.patterns.dev/react/incremental-static-rendering/