[02-01] 렌더링 최적화 전략

1. Hydration

• Hydration: SSR로 생성된 정적 HTML 페이지가 클라이언트 측에서 js가 실행되며 동적 웹 애플리케이션으로 활성화
  (+) Hydration은 처음 페이지가 로드될 때 HTML은 빠르게 표시
  (-) JS가 로드되고 실행될 때까지 페이지 상호작용이 비활성 상태
      -> 인터랙티브 요소가 늦게 동작/비활성화
  • SSG(Static Site Generation): 비실시간성 요소를 미리 생성하여 페이지를 매우 빠르게 반환합
  • SSR(Server-Side Rendering): 실시간성이 필요한 요소는 서버에서 요청이 들어오자마자 렌더링되어 반환
  • CSR(Client-Side Rendering): 모바일 앱처럼 일부 요소는 클라이언트에서 렌더링하여, JS 번들 크기를 줄이고 성능을 최적화

---

2. Partially Hydration

• Partially Hydration: 전체 페이지를 클라이언트 측에서 하이드레이션하는 대신, 필요한 부분만 하이드레이션
• SSR로 렌더링된 페이지에서 클라이언트 측에서 동적 상호작용이 필요한 부분만 하이드레이션
  - 동적 콘텐츠 or 인터랙티브 요소만 하이드레이션되며, 다른 정적 부분은 그대로 유지
  - Lazy Loading / Code Splitting: 필요하지 않은 JS는 나중에 로드하라고 지연 로딩

     (+) CSR처럼 필요한 부분만 렌더링하여, 초기 페이지 로드 속도를 빠르게
     (+) JS 로딩 시간을 줄여 페이지 성능 향상 및 사용자 경험을 최적화

---

3. Island Architecture

• 웹 애플리케이션에서 페이지의 주요 부분을 정적 콘텐츠로 제공하고, 필요한 부분만 동적으로 활성화
  -> 페이지의 동적 영역만 하이드레이션되고 나머지는 정적
  -> 페이지 내에서 독립적인 컴포넌트들이 각각 하이드레이션되는 방식 사용
  (+) 페이지의 성능을 높이고, 유지보수가 쉬우며, 사용자에게 필요한 동적 기능만 제공하여 JS 로딩 최적화

---

4. Streaming SSR

• SSR을 스트리밍 방식으로 처리-> 서버가 렌더링된 HTML을 부분적으로 클라이언트에 즉시 전달
   즉, 페이지의 일부가 준비되자마자 사용자에게 빠르게 전달되며, 나머지 부분은 백그라운드에서 계속 렌더링
  •  페이지의 일부 콘텐츠가 서버에서 준비되는 즉시 클라이언트에 스트리밍 방식으로 전달되며, 나머지 콘텐츠는 계속해서 서버에서 렌더링
  • 클라이언트는 먼저 로드된 부분을 렌더링하고, 나머지 부분이 준비되면 순차적으로 화면에 표시

        (+) 페이지 렌더링 시간을 줄여 사용자에게 빠른 피드백을 제공, 페이지의 초기 렌더링을 빠르게

        (+) 대규모 페이지에서 효과적

---

5. Resumability

• Qwik 이 채택한 새로운 렌더링 패러다임 : Serializable - 뭐든 다 갈아서(JS 이벤트 핸들러도) HTML 조각으로