부분 수화 및 SSR을 통해 애플리케이션 성능을 향상시키는 Angular

Angular 18은 서버 측 렌더링(SSR)과 함께 애플리케이션 성능을 크게 향상시키는 강력한 기술인 부분 수화를 도입합니다. 이 문서에서는 부분 수화의 개념과 그 이점, 그리고 Angular 17에 도입된 지연 가능한 뷰를 활용하는 방법을 자세히 설명합니다.

부분 수화와 SSR이 중요한 이유

기존 Angular 애플리케이션은 모든 JavaScript를 미리 로드할 때 성능 병목 현상이 발생하는 경우가 많습니다. 이는 특히 대규모 및 성능이 중요한 애플리케이션의 경우 초기 로드 시간에 큰 영향을 미칠 수 있습니다. 처음에 로드되는 JavaScript의 양을 전략적으로 줄여 사용자 경험을 대폭 향상할 수 있습니다.

부분 수화: SSR에 대한 더 스마트한 접근 방식

부분 수화는 Angular 17에 도입된 지연 가능한 뷰를 기반으로 구축됩니다. 서버에서 간단한 자리 표시자를 렌더링하는 대신 이제 Angular는 @defer로 표시된 지정된 블록의 주요 콘텐츠를 렌더링할 수 있습니다. 작동 방식은 다음과 같습니다.

1. 서버 측 렌더링: 서버는 구성 요소가 포함된 @defer 블록과 함께 애플리케이션의 필수 콘텐츠를 렌더링합니다.
2. 클라이언트측 하이드레이션: 애플리케이션이 클라이언트에서 실행될 때 Angular는 지연된 구성 요소에 필요한 JavaScript를 다운로드합니다.
3. 선택적 활성화: 지연된 구성 요소는 사용자의 뷰포트에 들어가는 등 특정 조건을 충족할 때만 대화형이 됩니다.

이 접근 방식은 다음과 같은 몇 가지 장점을 제공합니다.

• 더 빠른 초기 로드 시간: 불필요한 JavaScript를 연기함으로써 사용자는 더 빠른 초기 페이지 로드를 경험합니다.
• 개선된 인식: 핵심 기능을 즉시 사용할 수 있으므로 애플리케이션의 반응성이 더욱 향상되었습니다.
• 데이터 소비 감소: 초기 JavaScript 페이로드가 작을수록 데이터 사용량이 줄어듭니다.

부분 수화 활성화

부분 수분 공급을 활용하는 방법은 간단합니다. 예는 다음과 같습니다.

{
  @defer (render on server; on viewport) {
    <my-deferrable-component></my-deferrable-component>
  }
}

이 예에서는:

• my-deferrable-comfort는 서버에서 렌더링됩니다.
• 클라이언트측에서 Angular는 구성 요소에 필요한 JavaScript를 다운로드합니다.
• my-deferrable-Component와의 상호작용은 뷰포트에 들어갈 때만 발생하여 렌더링과 성능을 최적화합니다.

결론

부분 수분 공급을 통해 Angular 개발자는 성능이 뛰어나고 사용자 친화적인 애플리케이션을 만들 수 있습니다. 사용자 상호 작용이나 가시성을 기반으로 구성 요소 수화를 전략적으로 연기함으로써 Angular 18은 특히 복잡하고 데이터 집약적인 애플리케이션에서 원활하고 반응이 빠른 사용자 경험을 보장합니다.

위 내용은 부분 수화 및 SSR을 통해 애플리케이션 성능을 향상시키는 Angular의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!