본문 바로가기

[IT/Programming]/HTML related

week6 위클리 페이퍼 (웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명)

728x90
반응형
# week6 위클리 페이퍼 (웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명) ## PH
  • 2024-09-03 : First posting.
## TOC ## 웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명 웹 페이지 렌더링 방식에는 CSR (Client-Side Rendering), SSR (Server-Side Rendering), SSG (Static Site Generation) 세 가지가 있습니다. 각 방식의 특징과 사용 상황을 설명드릴게요. ### Client-Side Rendering (CSR) 특징: 브라우저에서 렌더링: 모든 JavaScript 파일을 클라이언트(브라우저)로 전송하고, 브라우저가 이를 해석하여 페이지를 렌더링합니다. 빠른 인터랙션: 페이지가 로드된 후에는 사용자와의 인터랙션이 빠릅니다. 초기 로딩 시간: 초기 로딩 시간이 길어질 수 있습니다. 특히, JavaScript 파일이 크거나 네트워크 속도가 느린 경우. 사용 상황: 단일 페이지 애플리케이션(SPA): React, Vue.js 등으로 개발된 애플리케이션. 동적 콘텐츠: 사용자 인터랙션이 많은 애플리케이션. ### Server-Side Rendering (SSR) 특징: 서버에서 렌더링: 서버에서 HTML을 생성하여 클라이언트로 전송합니다. 빠른 초기 로딩: 초기 로딩 시간이 빠릅니다. 브라우저가 완성된 HTML을 바로 렌더링할 수 있기 때문입니다. SEO 친화적: 검색 엔진이 HTML 콘텐츠를 쉽게 크롤링할 수 있습니다. 사용 상황: SEO가 중요한 웹사이트: 블로그, 뉴스 사이트 등. 초기 로딩 속도가 중요한 경우: 사용자 경험을 향상시키기 위해. ### Static Site Generation (SSG) 특징: 사전 렌더링: 빌드 시점에 HTML 파일을 생성하여 서버에 배포합니다. 빠른 로딩 시간: 정적 파일을 제공하므로 로딩 시간이 매우 빠릅니다. 보안: 서버에서 동적으로 생성되는 콘텐츠가 없으므로 보안성이 높습니다. 사용 상황: 정적 콘텐츠: 블로그, 문서 사이트 등. 변경이 적은 콘텐츠: 자주 변경되지 않는 페이지. ## 결론 각 렌더링 방식은 특정 상황에서 더 적합하게 사용될 수 있습니다. 프로젝트의 요구사항과 목표에 따라 적절한 방식을 선택하는 것이 중요합니다. 개인적으론 Client Side Rendering 을 좋아합니다. SEO 는 Search Engine 이 알아서 해야하는거 아닐지? =ㅂ=ㅋ. ## RRA
    Copilot assisted posting.
728x90
반응형