빠르게 변화하는 웹 개발 세계에서 성능과 사용자 경험은 모든 애플리케이션의 성공에 매우 중요합니다. Angular 19를 통해 Angular 팀은 Incremental Hydration이라는 혁신적인 기능을 도입했습니다. 이 새로운 기능은 기존 수화 프로세스를 향상시키고 개발자가 구성 요소의 로딩 및 상호 작용을 정밀하게 최적화할 수 있도록 해줍니다. 이 문서에서는 증분 수분 공급이 무엇인지, 구현 방법과 다양한 시나리오에서 사용할 수 있는 수분 공급 트리거에 대한 자세한 분석을 자세히 살펴봅니다.
하이드레이션은 클라이언트 측에서 서버 측 렌더링된 애플리케이션을 활성화하는 프로세스입니다. 여기에는 서버에서 렌더링된 DOM 요소 재사용, 애플리케이션 상태 유지, 서버에서 이미 검색한 데이터 전송이 수반됩니다. 기본적으로 수화 기능을 사용하면 DOM을 완전히 다시 렌더링할 필요가 없으므로 CWV(Core Web Vitals)와 같은 성능 지표가 향상됩니다.
Angular 19에서는 개발자가 사용자 상호 작용, 가시성 또는 사용자 지정 조건을 기반으로 구성 요소를 선택적으로 수화할 수 있도록 하여 한 단계 더 발전된 증분 수화 기능을 도입했습니다. 이는 필요한 구성 요소만 로드하는 데 도움이 되어 초기 로드 시간과 애플리케이션의 전반적인 성능을 향상시킵니다.
또한 Angular의 Incremental Hydration은 원활한 사용자 경험을 보장하기 위해 하이드레이트 블록 내의 콘텐츠에 대한 이벤트 재생을 사용합니다. withEventReplay 기능을 활용하여 프레임워크는 하이드레이션 프로세스가 완료되기 전에 발생하는 클릭이나 키 누름과 같은 사용자 상호 작용을 캡처합니다. 구성 요소가 수화되면 기록된 이벤트가 재생되고 해당 이벤트 리스너가 실행되어 전환 중에 사용자 상호 작용이 손실되지 않고 애플리케이션이 처음부터 반응성과 참여도가 높아지는 느낌을 받게 됩니다.
수화 트리거에 대해 알아보기 전에 Angular 애플리케이션에서 증분 수화를 사용하도록 설정했는지 확인하겠습니다. 따라야 할 단계는 다음과 같습니다.
provider 배열의 ProvideClientHydration() 가져오기에 withIncrementalHydration()을 추가하여 증분 수화를 애플리케이션에 가져와야 합니다.
import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';
// Update bootstrap code
bootstrapApplication(AppComponent, {
providers: [provideClientHydration(withIncrementalHydration())]
});
추가 수화물 트리거와 함께 지연 차단 시 증분 수화 기능이 활성화됩니다. 증분 수화를 활용하려는 지연 블록에 수화물 트리거를 추가해야 합니다. 트리거는 현재 사용 중인 것과 동일하며(자세한 내용은 이 문서 참조) 추가 수화물이 트리거되지 않습니다. 다음은 사용 가능한 모든 수화물 트리거 목록입니다.
기본 구문은 하이드레이트 관련 트리거가 추가된 것을 제외하고는 deferable views의 기존 구문과 동일합니다. 예:
@defer (hydrate on interaction) {
<my-deferred-cmp />
}
Hydrate 트리거는 동일한 코드 블록에서 기존 defer 트리거와 공존합니다. 예:
@defer (on idle; hydrate on interaction) {
<my-deferred-cmp />
}
하이드레이션 트리거의 도입은 특히 서버측 렌더링(SSR) 및 클라이언트측 렌더링(CSR)의 맥락에서 애플리케이션이 렌더링을 관리하는 방식에 상당한 발전을 가져왔습니다. 상호작용 시 수화물과 같은 수화물 트리거는 즉시 실행과 같은 기존 Angular 지연 트리거와는 다른 메커니즘을 제공합니다.
기능을 명확히 하기 위해 기존 지연 트리거는 클라이언트측 렌더링 컨텍스트에서만 작동합니다. 예를 들어 즉시 실행 트리거는 사용자가 클라이언트 측 라우팅을 통해 구성 요소를 탐색할 때만 활성화되며, 이는 초기 로드가 완료되면 즉시 렌더링이 발생해야 함을 나타냅니다.
반대로, 수화물 트리거는 초기 서버 측 렌더링 중에 작동합니다. 서버에서 렌더링된 구성 요소가 hydrate 키워드를 사용하면 콘텐츠를 정적 HTML로 준비합니다. 이는 특정 수화 조건이 충족되거나 특정 수화 트리거가 실행될 때까지 비대화형으로 유지됩니다. 이는 초기 서버 측 렌더링 중에 구성 요소가 정적 콘텐츠로 표시됨을 의미합니다. 그러나 조건이 충족되거나 트리거가 활성화되면 수화는 이를 완전한 대화형 요소로 변환합니다. 이러한 기능적 차이로 인해 일반 연기 트리거와 하이드레이트 트리거를 상호 배타적인 것으로 설명할 수 있습니다. 한 번에 한 가지 유형의 트리거만 적용할 수 있습니다.
이러한 독점성을 통해 개발자는 구성 요소가 렌더링되고 대화형으로 만들어지는 시기를 신중하게 관리하여 애플리케이션 성능을 최적화할 수 있습니다. 또한 이벤트 재생은 하이드레이트 트리거와 함께 작동하여 정적 단계에서 수행된 모든 사용자 작업이 보존되도록 합니다. 이러한 상호 작용은 수분 공급 시 캡처되고 재생됩니다.
또한 수화물 트리거가 @placeholder 및 @loading과 상호 작용하는 방식을 이해하는 것도 중요합니다.
하이드레이트 키워드를 사용하면 메인 템플릿 콘텐츠가 SSR 동안 새로운 자리표시자 역할을 효과적으로 수행합니다. 이와 대조적으로 CSR 시나리오에서는 기존 자리 표시자와 로딩 템플릿이 활용됩니다. 따라서 hydrate 키워드가 사용되지 않으면 동작은 기본적으로 표준 서버 측 렌더링으로 설정됩니다. 여기서 지정된 자리 표시자는 서버에서 렌더링되고 전체 애플리케이션 로딩 프로세스의 일부로 열심히 하이드레이트됩니다. 이러한 미묘한 차이를 통해 개발자는 초기 로딩 경험과 후속 사용자 상호 작용을 원활하게 최적화할 수 있습니다.
연기 트리거 및 프리페치 트리거와 마찬가지로 여러 수화물 트리거를 동시에 활용하여 해당 트리거 중 하나가 활성화될 때마다 수화가 발생하도록 할 수 있습니다. 예:
import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';
// Update bootstrap code
bootstrapApplication(AppComponent, {
providers: [provideClientHydration(withIncrementalHydration())]
});
When 트리거에 대해 주목해야 할 중요한 점 중 하나는 동일한 @defer 블록 내에서 트리거가 여러 개 있을 수 없다는 것입니다. 대신 조건을 결합해야 합니다. 그렇지 않으면 오류가 발생합니다. 예를 들어, 아래 코드는 여러 개의 When 블록이 허용되지 않음을 나타내는 오류를 발생시킵니다.
@defer (hydrate on interaction) {
<my-deferred-cmp />
}
반대로 아래 코드는 올바르게 작동합니다.
@defer (on idle; hydrate on interaction) {
<my-deferred-cmp />
}
수화 트리거는 지연된 블록이 상호 작용해야 하는 시기를 결정합니다. 각 트리거를 자세히 살펴보고 이상적인 사용 시나리오를 살펴보겠습니다.
즉시 수화: 이 트리거는 클라이언트가 구성 요소 렌더링을 마친 후 즉시 수화를 시작합니다. 예:
@defer(hydrate on interaction; hydrate when isLoggedIn()){
<li>
<a [routerLink]="[isLoggedIn()?'/account':'/signup']">Account</a>
</li>
}
사용 사례 예: 탐색 메뉴나 기본 클릭 유도 버튼 등 즉각적인 빠른 사용자 상호작용이 필요한 필수 구성요소에 이 트리거를 사용하세요.
유휴 시 수분 공급: 이 트리거는 브라우저가 유휴 상태(requestIdleCallback 참조)에 들어갈 때 수분 공급을 시작합니다. 즉, 사용자 상호 작용이나 예약된 작업이 없음을 의미합니다.
@defer(hydrate when firstCondition; hydrate when secondCondition){
<my-component />
}
사용 사례 예: 주요 상호 작용을 방해하지 않고 컨텍스트를 제공하는 보충 정보 카드와 같이 잠시 기다릴 수 있는 중요하지 않은 UI 요소에 적합합니다.
타이머에 수분 공급: 이 트리거는 지정된 기간 후에 수분 공급을 활성화합니다. 이는 필수이며 밀리초(ms) 또는 초(s)로 정의할 수 있습니다.
@defer(hydrate when (firstCondition || secondCondition)){
<my-component />
}
사용 사례 예: 인터페이스를 통해 사용자를 안내하는 팝업 알림이나 튜토리얼과 같이 즉시 표시되지 않고 짧은 시간 후에 표시되어야 하는 구성 요소에 적합합니다.
Hover on Hydrate: 이 트리거는 사용자가 관련 구성 요소 위로 마우스를 가져갈 때 mouseenter 및 focusin 이벤트를 활용하여 수분 공급을 시작합니다.
import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';
// Update bootstrap code
bootstrapApplication(AppComponent, {
providers: [provideClientHydration(withIncrementalHydration())]
});
사용 사례 예: 인터페이스를 복잡하게 하지 않으면서 사용자 이해를 높이는 툴팁이나 세부 메뉴와 같은 기능에 사용하세요.
상호작용 시 수분 공급: 이 트리거는 클릭 또는 키다운 이벤트와 같은 사용자 기반 이벤트를 기반으로 수분 공급을 활성화합니다.
@defer (hydrate on interaction) {
<my-deferred-cmp />
}
사용 사례 예: 양식, 제품 갤러리, 클릭 시 추가 정보가 표시되는 버튼 등 상호 작용 직전에 사용자 참여가 필요한 구성 요소에 적합합니다.
뷰포트에서 하이드레이트: 이 트리거는 Intersection Observer API에 의해 결정된 대로 구성요소가 사용자의 뷰포트에 들어갈 때 구성요소를 하이드레이트합니다.
@defer (on idle; hydrate on interaction) {
<my-deferred-cmp />
}
사용 사례 예: 사용자가 아래로 스크롤할 때까지 대화형이 아니어야 하는 스크롤 없이 볼 수 있는 콘텐츠에 이 기능을 사용하세요. 이 접근 방식은 사용자 참여를 유지하면서 페이지 로드 시간을 개선하므로 이미지, 기사 또는 추가 제품 목록과 같은 콘텐츠에 이상적입니다.
수화 안함: 이 트리거는 정적 상태로 유지되는 블록을 지정하여 절대 수분을 공급해서는 안 됨을 나타냅니다.
@defer(hydrate on interaction; hydrate when isLoggedIn()){
<li>
<a [routerLink]="[isLoggedIn()?'/account':'/signup']">Account</a>
</li>
}
사용 사례 예: 바닥글, 저작권 정보, 법적 고지 사항 등 상호 작용이 필요하지 않은 정적 요소에 적합합니다. 이러한 부분은 수분 공급에 따른 오버헤드가 필요하지 않으며 간단한 HTML로 렌더링할 수 있습니다.
많은 경우 트리거를 결합하면 더 많은 유연성과 성능을 얻을 수 있습니다.
@defer(hydrate when firstCondition; hydrate when secondCondition){
<my-component />
}
이 경우 클라이언트 측 렌더링(CSR)의 경우 사용자가 아래로 스크롤할 때(뷰포트에 들어갈 때) 구성 요소가 수화되도록 지정합니다. 대조적으로, 서버 측 렌더링(SSR)의 경우 사용자 상호 작용에 따라 수화되어 프로세스가 효율적이고 사용자 작업에 반응하게 됩니다.
Angular 19에 증분 수화 기능이 도입되면서 중첩 수화 개념을 이해하는 것이 중요한 측면이 되었습니다. 여러 개의 중첩된 @defer 블록을 처리할 때 수화 조건 간의 상호 작용을 통해 성능과 리소스 관리가 크게 향상될 수 있습니다. 이러한 중첩 블록의 동작을 제어하는 규칙은 렌더링되는 항목과 시기에 대한 더 깊은 수준의 제어를 제공하여 궁극적으로 애플리케이션의 전반적인 성능에 영향을 미칩니다.
여러 개의 @defer 블록이 탈수 상태로 서로 중첩되면 해당 수화 조건이 동시에 평가됩니다. 예를 들어 다음 구조를 고려해보세요.
import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';
// Update bootstrap code
bootstrapApplication(AppComponent, {
providers: [provideClientHydration(withIncrementalHydration())]
});
이 예에서 외부 블록은 사용자가 그 안에 있는 콘텐츠 위로 마우스를 가져가면 수화되도록 설정됩니다. 그러나 외부 블록이 호버링되지 않더라도 내부 블록은 지정된 15초 지속 시간 후에 여전히 수분 공급을 트리거합니다. 이러한 동시 조건 평가를 통해 특히 상호 작용 타이밍이 크게 달라질 수 있는 사용자 인터페이스에서 구성 요소가 상호 작용하는 방식에 더 큰 유연성이 제공됩니다.
대부분의 하이드레이트 트리거는 중첩된 구조 내에서 올바르게 작동하지만 트리거 시 하이드레이트에 대한 주목할만한 예외가 있습니다. When 트리거는 조건 기반이며 이를 포함하는 구성 요소 내에 정의된 논리에 전적으로 의존합니다. 특히 이는 직계 상위 블록이나 포함 블록이 이미 수화된 경우에만 논리를 평가할 수 있음을 의미합니다. 예:
@defer (hydrate on interaction) {
<my-deferred-cmp />
}
이 시나리오에서 외부 블록(호버에 수화물이 있음)이 마우스 호버 이벤트 시 수화를 트리거하지 않으면 내부 블록(사용자 개체가 null이 아닌지 확인)은 절대 수화되지 않습니다. 이 동작의 이유는 분명합니다. 상위 구성 요소가 처리되고 해당 논리에 액세스할 수 없으면 시기를 평가하는 표현식을 실행할 수 없습니다. 따라서 외부 블록이 탈수 상태로 남아 있으면 내부 블록을 평가하는 데 필요한 논리가 아직 존재하지 않습니다.
중첩 블록에 대해 하이드레이션이 실행되면 Angular는 계단식 프로세스를 따릅니다. 즉, 하위 구성 요소가 작동하려면 먼저 상위 블록을 하이드레이션해야 합니다. 이 계단식 작업은 중첩된 구성 요소의 종속성을 올바른 순서로 로드할 수 있기 때문에 중요합니다. 수화 과정은 효과적으로 폭포처럼 작동하며, 각 단계는 완전히 처리되는 이전 단계에 따라 달라집니다. 결과적으로 중첩된 탈수 블록은 작동하기 전에 모든 수준에 필요한 코드를 로드하기 위한 신중한 접근 방식이 필요합니다.
중첩 구조에서 혼합 트리거를 활용하는 경우 관련된 트리거의 특성을 염두에 두는 것이 중요합니다. 예를 들어, 특정 구성 요소를 수화시키고 다른 구성 요소는 정적(비수화) 상태로 유지하려는 경우 전략적으로 다음 구조를 사용할 수 있습니다.
@defer (on idle; hydrate on interaction) {
<my-deferred-cmp />
}
이 경우 외부 블록은 마우스를 가져가면 수화되는 반면, 광고 단위가 포함된 내부 블록은 수화되지 않은 상태로 유지되어 정적 특성을 유지합니다. 이러한 분리는 마우스 오버 시 수화물과 같은 이벤트 기반 트리거가 활성화할 구성 요소 논리에 의존하지 않고 따라서 @deferblocks에 중첩된 논리와 독립적으로 작동할 수 있기 때문에 가능합니다.
Angular 19에서 증분 수화를 효과적으로 활용하려면 중첩 수화를 이해하는 것이 중요합니다. 중첩된 @deferblocks를 신중하게 구성하고 적절한 하이드레이션 트리거를 선택함으로써 개발자는 응답성을 유지하면서 애플리케이션 성능을 최적화할 수 있습니다. 구성 요소가 대화형이 되는 시기와 방법을 관리하는 기능은 중첩된 수화를 관리하는 규칙과 결합될 때 최신 Angular 애플리케이션에서 사용자 경험과 리소스 관리를 극적으로 향상시킬 수 있는 강력한 기능입니다.
지연 로딩 제품 항목
전자상거래 플랫폼에서 카테고리 페이지에 제품 목록을 표시할 때 사용자가 각 제품과 상호 작용할지 여부는 불확실합니다. hydrate 구문을 사용하여 @defer 블록 내에 이러한 제품을 배치하면 구성 요소가 정적 콘텐츠로 렌더링되지만 관련 JavaScript는 사용자가 특정 제품과 상호 작용할 때만 가져오고 수화됩니다. 이 접근 방식은 초기 번들 크기를 줄여 성능을 최적화하는 동시에 필요할 때 제품 세부 정보를 제공합니다.
정적 블로그 콘텐츠 제공
주로 정적 기사를 다루는 블로깅 플랫폼의 경우 게시물 구성 요소에 대해 hydrate never 조건을 활용하면 관련 JavaScript 전달을 피할 수 있습니다. 그 결과 사용자는 일반적으로 상호작용과 관련된 리소스 오버헤드를 발생시키지 않고 기사에 액세스할 수 있으므로 로드 시간이 단축됩니다.
무거운 스크롤 없이 볼 수 있는 구성 요소 최적화
헤더나 캐러셀과 같이 스크롤 없이 볼 수 있는 부분 위에 표시되지만 히트맵 데이터를 기반으로 최소한의 사용자 상호 작용을 표시하는 대규모 구성 요소가 있는 경우 이를 하이드레이션 트리거를 사용하여 @defer 블록으로 래핑하는 것이 도움이 될 수 있습니다. 이 전략을 사용하면 이러한 구성 요소를 처음에 렌더링할 수 있으며, 대화형 동작 및 관련 리소스는 사용자 상호 작용 시에만 로드되므로 효율적인 데이터 전송이 보장되고 사용자 경험이 향상됩니다.
양식을 통한 사용자 상호작용 강화
사용자 작업에 대한 즉각적인 응답이 필요한 입력 양식의 경우 상호 작용 트리거 시 수화물을 사용하는 것이 이상적입니다. 이를 통해 사용자가 상호 작용을 시작하자마자 양식 구성 요소가 활성화되어 애플리케이션의 유용성이 향상됩니다.
동적 콘텐츠 또는 스크롤 없이 볼 수 있는 콘텐츠 로드
사용자가 스크롤할 때만 관련성이 높아지는 동적 데이터 표시 또는 콘텐츠가 많은 섹션의 경우 뷰포트 트리거에서 하이드레이트를 활용하는 것이 유용한 접근 방식입니다. 이는 제품 디스플레이뿐만 아니라 이미지나 추가 콘텐츠에도 적용되어 초기 로드 시간에 부정적인 영향을 주지 않으면서 원활한 사용자 경험을 제공합니다.
애니메이션 요소와의 상호작용
사용자 참여를 향상시키지만 도구 설명이나 드롭다운과 같은 기본 상호 작용에 필수적이지는 않은 대화형 요소의 경우 호버 트리거 시 수화물을 사용하는 것이 좋습니다. 이렇게 하면 사용자가 해당 요소 위로 마우스를 가져갈 때만 활성화되어 초기 로드를 가볍게 유지하면서 필요할 때 추가 옵션을 계속 제공할 수 있습니다.
Angular 19의 점진적인 하이드레이션은 성능과 사용자 경험 모두를 위해 애플리케이션을 최적화하는 데 있어 상당한 발전을 의미합니다. 개발자는 수화 트리거를 전략적으로 활용하여 어떤 구성 요소가 상호 작용해야 하는지, 언제 발생해야 하는지를 정확하게 제어할 수 있습니다. 이러한 세분화된 접근 방식은 효율성을 향상시킬 뿐만 아니라 원활한 인터페이스를 보장하여 사용자 만족도도 향상시킵니다.
각 수분 공급 트리거의 복잡성을 마스터하면 Angular 애플리케이션을 향상시켜 응답성이 뛰어나고 효율적이며 사용자 참여에 적합하게 만들 수 있습니다. 이러한 개념을 탐색하면서 사용자 기반의 요구 사항과 제시하는 특정 콘텐츠를 염두에 두고 애플리케이션의 다양한 요소를 언제, 어떻게 하이드레이션할지에 대한 정보에 입각한 결정을 내리세요. 즐거운 개발되세요!
위 내용은 Angular의 증분 하이드레이션으로 앱 성능을 한 단계 끌어올리세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
