@defer를 사용한 점진적 하이드레이션

전체 하이드레이션은 모든 컴포넌트를 처음부터 부팅합니다. 반면 점진적 하이드레이션은 페이지의 일부를 필요할 때 하이드레이션하고, 필요한 시점까지 각 영역의 JavaScript를 지연합니다.

점진적 하이드레이션은 특수한 hydrate 트리거와 함께 @defer 블록을 사용합니다. 서버는 계속 콘텐츠를 렌더링하지만, 클라이언트는 트리거가 발생할 때만 해당 콘텐츠를 하이드레이션합니다.

하이드레이션 공급자에서 withIncrementalHydration()을 사용해 선택적으로 활성화하세요. 그러면 템플릿에서 hydrate 트리거를 사용할 수 있습니다.

가장 일반적인 트리거는 블록이 화면에 나타날 때 하이드레이션하는 방식입니다. 화면 아래에 있는 콘텐츠는 사용자가 해당 위치에 도달할 때까지 비활성 상태로 남아 JavaScript 작업을 줄입니다.

사용자가 블록과 상호작용할 때(클릭, 키다운) 하이드레이션합니다. 펼칠 수 있는 패널처럼 화면에는 보이지만 거의 사용하지 않는 위젯에 적합합니다.

브라우저가 유휴 상태일 때 하이드레이션하려면 hydrate on idle을 사용하고, 지연 후 하이드레이션하려면 hydrate on timer(2s)를 사용하세요. 중요도가 낮은 영역에 적합합니다.

hydrate never는 서버에서 렌더링된 HTML을 정적으로 유지합니다. 표시되지만 해당 블록의 JS는 전혀 전송되지 않습니다. 표현만 담당하고 상호작용이 없는 콘텐츠에 적합합니다.

CSR 환경에서 일반적인 @defer는 로드될 때까지 자리표시자를 표시합니다. 점진적 하이드레이션에서는 콘텐츠가 이미 서버에서 렌더링되어 보이며, 트리거는 상호작용 가능 상태인 하이드레이션이 시작되는 시점만 제어합니다.

트리거를 조합하면 여러 조건 중 먼저 발생한 조건에 따라 블록을 하이드레이션할 수 있어, 준비 상태와 리소스 절약 사이의 균형을 맞출 수 있습니다.

무거운 컴포넌트나 화면 아래 컴포넌트의 하이드레이션을 지연하면 상호작용에 필요한 초기 JavaScript가 줄어들어, 핵심 경로의 상호작용 가능 시간과 INP가 개선됩니다.

화면 위쪽의 상호작용 요소는 즉시 또는 유휴 상태에서 하이드레이션하세요. 화면 아래 요소와 자주 사용하지 않는 위젯은 뷰포트 또는 상호작용 트리거로 지연하세요. 실제 효과가 있는지 측정으로 확인하세요.

점진적 하이드레이션에 대한 지식을 확인해 보세요.

@defer (hydrate ...)와 withIncrementalHydration()을 사용하여 뷰포트 진입, 상호작용, 유휴 상태, 타이머 또는 하이드레이션 안 함을 기준으로 하이드레이션했습니다. 화면 아래에 있거나 자주 사용하지 않는 블록의 하이드레이션을 지연하여 초기 JS를 줄이고 상호작용성을 개선했습니다.