Develop

[Web] Rendering on the Web

너드나무 2024. 11. 12. 08:20
반응형

Dom 렌더링 옵션 및 장단점

Rendering on the Web, web.dev

  • Server-side Rendering(SSR)
    • 페이지의 전체 HTML을 서버에서 생성하여 사용자에게 전달하는 방식
    • 사용자가 사이트에 접근하면 서버가 데이터와 템플릿을 활용해 HTML을 생성하고 이를 브라우저에 응답으로 보냅니다.
    • 브라우저는 추가 데이터 요청 없이 곧바로 페이지의 HTML을 표시할 수 있습니다.
    • 장점
      • 서버 렌더링은 주로 기본 정보나 정적 콘텐츠가 많을 때 유리합니다.
      • 서버에서 HTML을 미리 준비하기 때문에 브라우저가 빠르게 콘텐츠를 표시할 수 있어 초기 페이지 로딩(FCP) 속도가 빠릅니다.
      • JavaScript를 최소한으로 보내도 되므로 총 차단 시간(TBT)과 상호작용까지의 시간(INP)이 개선됩니다.
    • 단점
      • 서버가 페이지를 생성하는 시간이 소요될 수 있어 첫 바이트까지의 시간(TTFB)이 늘어날 수 있습니다.
      • Netflix와 같은 사이트는 초기 랜딩 페이지는 서버 렌더링으로 처리하고, 인터랙티브한 페이지는 JS를 미리 가져와 클라이언트 렌더링으로 처리하는 하이브리드 방식을 사용합니다.
  • Static SSR
    • 정적 렌더링은 페이지를 미리 생성(build time)에 만들어두고, 각 URL에 해당하는 HTML 파일을 준비해두는 방식입니다.
    • 이는 HTML을 사전 생성해 CDN에 배포함으로써 일관된 TTFB와 빠른 FCP를 보장할 수 있습니다.
    • 장점
      • 정적 렌더링은 미리보기나 데이터가 변하지 않는 페이지에서 특히 유용합니다.
      • 서버 렌더링보다 안정적이고 일관된 TTFB를 제공하고, CDN을 통한 캐싱으로 빠른 응답 속도를 보장합니다.
    • 단점
      • 정적 렌더링은 각 URL에 대한 HTML 파일을 미리 만들어야 하는데, 많은 페이지를 다루거나 URL이 예측 불가능할 때 어려움이 있습니다.
      • 예를 들어 Gatsby나 Jekyll 등의 정적 사이트 생성기 툴을 사용하면 손쉽게 정적 HTML을 생성할 수 있습니다. React에서는 Next.js의 정적 내보내기 기능이 대표적입니다.
  • SSR with (Re)hydration
    • 하이드레이션은 SSR과 CSR의 장점을 결합한 방식으로, 서버에서 HTML을 렌더링하여 빠른 초기 로딩 속도를 제공하고, 이후 클라이언트에서 JavaScript를 실행하여 페이지를 동적화(interactive) 합니다.
    • 장점
      • 서버에서 HTML을 생성하여 빠르게 페이지가 로딩되고, 클라이언트에서 동적 기능을 활성화할 수 있습니다.
    • 단점
      • 하이드레이션을 위해 추가적인 JavaScript가 필요해 총 차단 시간(TBT)과 상호작용까지의 시간(INP)이 지연될 수 있습니다.
      • 하이드레이션 전에는 페이지가 로드되었지만 실제로 상호작용이 불가능할 수 있어 사용자 경험에 혼란을 줄 수 있습니다.
      • 점진적 하이드레이션(Progressive Rehydration)과 부분 하이드레이션(Partial Hydration) 등 최신 기법을 통해 특정 부분만 점진적으로 활성화하여 하이드레이션 성능을 개선할 수 있습니다.
  • CSR with Prerendering
    • 프리렌더링은 CSR의 한 방식으로, 초기 HTML을 미리 생성하여 사용자가 처음 접근했을 때 빠르게 화면이 로드되도록 하는 방식입니다.
    • SPA(Single Page Application)처럼 한 번 로드 후 상호작용이 많은 사이트에서 유용합니다.
    • 장점
      • 빠른 초기 렌더링(FCP)을 제공할 수 있으며, 이후 모든 상호작용이 클라이언트에서 처리됩니다.
      • SPA에서는 주로 애플리케이션 쉘(Application Shell)을 캐시하여 초기 로딩 성능을 높이는 방식이 활용됩니다.
    • 단점
      • 페이지의 완전한 상호작용을 위해 더 많은 JavaScript가 필요해지고, JavaScript가 비활성화된 경우 기본 기능이 제한됩니다.
  • Full CSR
    • 완전한 클라이언트 렌더링은 모든 데이터를 클라이언트 측에서 JavaScript를 통해 로드하고 렌더링하는 방식입니다.
    • 모든 페이지 구성, 데이터 요청, 라우팅이 클라이언트 측에서 이루어집니다.
    • 장점
      • 서버 부담을 줄이고, 클라이언트에서 모든 상호작용과 페이지 로드를 처리합니다.
      • 완전한 CSR을 사용하는 경우, 코드 분할 및 지연 로딩을 통해 초기 로딩 시간을 줄일 수 있으며, 서비스 워커와 같은 기능을 통해 SPA의 성능을 최적화할 수 있습니다.
    • 단점
      • 모든 페이지 구성을 클라이언트에서 처리해야 하기 때문에 더 많은 JavaScript가 필요합니다.
      • 이는 특히 모바일 기기에서 성능에 큰 부담이 됩니다.
웹 애플리케이션의 유형과 사용자 경험 목표에 따라 적합한 렌더링 방식을 선택할 수 있습니다.
예를 들어, 정보 제공용 사이트는 SSR이나 정적 렌더링이 적합할 수 있으며,
인터랙티브한 애플리케이션은 하이드레이션을 활용한 SSR이나 CSR 방식이 더 적합할 수 있습니다.

 

728x90
반응형
저작자표시 비영리 동일조건