Week 6. 웹페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징

1. CSR (Client-Side Rendering)
   • 특징:
     • 모든 JavaScript 파일과 리소스가 클라이언트(브라우저)에서 로드된 후에 렌더링이 시작됨.
     • 초기 페이지 로딩 시 HTML이 최소한의 내용으로 제공되고, 클라이언트가 모든 JavaScript를 다운로드하여 실행 후, 렌더링이 완료됨.
     • 초기 로딩 속도가 느릴 수 있지만, 첫 페이지 로딩 이후 빠른 사용자 상호작용이 가능.
   • 사용 상황:
     • 인터랙티브한 웹 애플리케이션: 사용자의 상호작용이 많은 애플리케이션 (예: SPA, 대시보드, 메신저 앱 등).
     • 클라이언트 측에서의 상태 관리와 UI 변경이 빈번하게 일어나는 경우.
     • SEO(검색 엔진 최적화)가 필요하지 않은 경우.
2. SSR (Server-Side Rendering)
   • 특징:
     • 페이지가 요청될 때마다 서버에서 HTML을 완성하여 클라이언트로 전송.
     • 첫 페이지 로드 시, 완성된 HTML이 서버에서 제공되므로, 초기 로딩 속도가 빠름.
     • 모든 페이지 요청마다 서버에서 HTML을 렌더링하기 때문에 서버 부하가 증가할 수 있음.
   • 사용 상황:
     • SEO(검색 엔진 최적화)가 중요한 웹사이트: 콘텐츠가 미리 렌더링되어 검색 엔진 크롤러가 쉽게 읽을 수 있음 (예: 블로그, 뉴스 사이트).
     • 빠른 초기 페이지 로드가 중요한 경우: 사용자가 처음 접속했을 때 빠르게 콘텐츠를 볼 수 있어야 하는 경우.
     • 서버 자원이 충분하고 서버-클라이언트 간의 지연을 최소화해야 하는 경우.
3. SSG (Static Site Generation)
   • 특징:
     • 페이지가 빌드 시점에 미리 정적으로 생성되어 HTML 파일로 제공됨.
     • 모든 페이지가 정적 파일로 준비되어 있어 페이지 로딩 속도가 매우 빠름.
     • 콘텐츠가 자주 변경되지 않는 경우에 적합. 콘텐츠가 업데이트될 때마다 빌드 과정을 통해 새로 생성해야 함.
   • 사용 상황:
     • 정적인 콘텐츠가 주를 이루는 웹사이트 (예: 마케팅 페이지, 문서화 사이트, 포트폴리오).
     • SEO가 중요한 경우이면서 동시에 콘텐츠가 자주 변경되지 않는 경우.
     • 서버 측에서 매번 렌더링할 필요가 없는 경우, 서버 부하를 줄이고 빠른 응답을 제공하고자 할 때.

요약

• CSR: 클라이언트에서 모든 렌더링이 이루어짐. 사용자 상호작용이 많은 애플리케이션이나 SEO가 필요 없는 경우에 적합.
• SSR: 서버에서 렌더링 후 클라이언트로 전송. SEO가 중요하거나 초기 로딩 속도가 중요한 경우에 적합.
• SSG: 빌드 시점에 정적 페이지를 생성. 정적 콘텐츠가 주를 이루고, SEO가 중요하며, 콘텐츠가 자주 변경되지 않는 경우에 적합.

이러한 렌더링 방식을 상황에 맞게 사용하면 성능을 최적화하고 사용자 경험을 개선할 수 있습니다.