Blazor Component Render Modes [Pt 8] | Front-end Web Development with .NET for Beginners

간략한 요약

이 비디오에서는 Blazer 컴포넌트 렌더링 모드에 대해 설명하고, 컴포넌트가 렌더링되는 방식을 제어하여 사용자 경험을 향상시키는 방법을 알아봅니다. 주요 내용은 다음과 같습니다.

• 정적 서버 측 렌더링(SSR): 컴포넌트가 서버에서 HTML로 렌더링되며, 상태가 유지되지 않습니다.

• 향상된 탐색 및 폼 처리: 페이지 탐색을 가로채서 필요한 부분만 업데이트하여 더 빠르고 원활한 로딩을 제공합니다.

• 스트리밍 렌더링: 시간이 오래 걸리는 비동기 작업이 필요한 페이지에서 플레이스홀더 콘텐츠를 먼저 보여주고, 데이터가 로드되면 업데이트를 스트리밍합니다.

• 클라이언트 상호 작용: 상호 작용 렌더링 모드를 사용하여 서버 또는 웹 어셈블리를 통해 클라이언트에서 UI 이벤트를 처리할 수 있습니다.

• 포인트

  • Blazer 컴포넌트 렌더링 모드를 활용하여 웹 애플리케이션에 가장 적합한 아키텍처를 선택할 수 있습니다.
  • 서버, 클라이언트 모두에서 정적 및 대화형으로 컴포넌트를 렌더링하는 방법을 선택할 수 있습니다.

소개

Blazer 제품 관리자인 Daniel Roth가 Blazer 컴포넌트 렌더링 모드에 대해 소개합니다. 컴포넌트가 렌더링되는 방식을 제어하여 사용자에게 훌륭한 경험을 제공하는 방법을 설명합니다.

정적 서버 측 렌더링 (SSR)

Blazer 컴포넌트는 기본적으로 서버에서 정적으로 렌더링됩니다. 요청이 정적 컴포넌트로 라우팅되면 컴포넌트는 HTML을 렌더링하고 작업이 완료되면 인스턴스가 사라집니다. 상태는 서버에 유지되지 않습니다. 정적 컴포넌트는 UI 이벤트를 처리할 필요 없이 HTML 콘텐츠만 렌더링할 때 유용합니다. 기본 Blazer 웹 앱의 대부분 컴포넌트는 정적으로 렌더링됩니다. 예를 들어 홈페이지, 날씨 예보 페이지 및 레이아웃이 있습니다. 페이지 소스 보기를 통해 HTML 콘텐츠가 서버에서 렌더링되었음을 확인할 수 있습니다.

향상된 탐색 및 폼 처리

Blazer는 페이지 탐색을 가로채서 가져오기 요청을 수행하여 페이지 탐색을 향상시킬 수 있습니다. 서버에서 정적으로 렌더링된 콘텐츠를 DOM에 렌더링된 콘텐츠와 비교하여 필요한 변경 사항만 적용합니다. 이를 통해 전체 페이지를 새로 고침하지 않고도 페이지가 더 빠르고 원활하게 로드됩니다. Blazer는 기본적으로 페이지 탐색을 향상시키고 선택적으로 폼 요청도 향상시킬 수 있습니다. 개발자 도구를 통해 향상된 탐색이 발생하는 것을 확인할 수 있습니다. 날씨 예보 페이지로 이동하면 문서 유형 요청 대신 가져오기 요청이 수행됩니다. Blazer는 해당 탐색을 가로채서 서버에서 HTML 콘텐츠를 가져온 다음 DOM에 패치합니다. 이전에 다운로드된 스타일시트나 JavaScript 파일은 다시 다운로드할 필요가 없으므로 페이지가 빠르고 원활하게 로드됩니다.

스트리밍 렌더링

스트리밍 렌더링은 완전히 렌더링하기 위해 시간이 오래 걸리는 비동기 작업을 수행해야 하는 페이지에 유용합니다. 페이지를 즉시 렌더링하고 비동기 작업이 실행되는 동안 플레이스홀더 콘텐츠를 넣을 수 있습니다. 예를 들어 데이터베이스에서 데이터를 가져오거나 API 호출을 하는 경우 비동기 작업이 완료되면 컴포넌트가 다시 렌더링됩니다. Blazer는 구성 요소를 다시 렌더링하고 동일한 연결에서 브라우저에 업데이트를 스트리밍합니다. 새 HTML을 브라우저에 지능적으로 패치하여 사용자가 새 UI를 볼 수 있도록 합니다. 날씨 페이지에서 스트리밍 렌더링이 실행되는 것을 볼 수 있습니다. 날씨 페이지를 새로 고치면 로딩 점이 표시된 다음 실제 날씨 예보 표가 나타납니다. 날씨 레이저 컴포넌트에서 스트리밍 렌더링 속성을 적용하여 스트리밍 렌더링을 켤 수 있습니다. 날씨 예보 데이터가 없으면 로딩 점을 렌더링하고, 데이터가 있으면 표를 렌더링합니다. 비동기 메서드를 통해 API 호출을 시뮬레이션하고 데이터가 로드되면 컴포넌트가 다시 렌더링되어 업데이트가 클라이언트로 스트리밍됩니다.

클라이언트 상호 작용 추가

브라우저에서 UI 이벤트를 처리할 수 있는 완전히 상호 작용적인 Blazer 컴포넌트를 빌드할 수 있습니다. 이를 위해 상호 작용 렌더링 모드를 사용하여 클라이언트 상호 작용을 활성화해야 합니다. 개별 컴포넌트나 페이지에 대해 상호 작용을 활성화하거나 전체 앱에 대해 전역적으로 활성화할 수 있습니다. Blazer는 서버에서 수행하거나 웹 어셈블리를 통해 클라이언트에서 수행하는 두 가지 방법을 제공합니다. 상호 작용 서버 컴포넌트는 서버에서 실행되지만 브라우저와 실시간으로 연결됩니다. UI 이벤트가 브라우저에서 발생하면 웹소켓 연결을 통해 서버로 전송되어 컴포넌트가 업데이트를 렌더링할 때 처리할 수 있습니다. 상호 작용 웹 어셈블리 컴포넌트는 브라우저에서 직접 UI 이벤트를 렌더링하고 처리한 다음 업데이트를 DOM에 직접 적용합니다.

대화형 WebAssembly 렌더링 설정

대화형 웹 어셈블리 렌더링을 활성화하려면 앱에서 별도의 프로젝트를 설정해야 합니다. 해당 프로젝트는 브라우저에 다운로드하려는 모든 코드를 포함하는 클라이언트 프로젝트가 됩니다. 기본 Blazer 웹 앱 템플릿은 해당 U에 대해 설정되지 않았지만 새 프로젝트를 만들고 대화형 웹 어셈블리 렌더링을 활성화하는 몇 가지 추가 옵션을 전달할 수 있습니다. 대화형 옵션을 사용하여 렌더링 모드를 지정할 수 있습니다. 서버, 웹 어셈블리 또는 자동을 선택할 수 있습니다. 자동을 선택하면 서버와 웹 어셈블리가 모두 켜집니다. 모든 컴포넌트가 해당 렌더링 모드를 사용한다는 의미는 아니지만 여전히 대화형으로 사용할 컴포넌트와 대화형으로 사용하지 않을 컴포넌트를 선택할 수 있습니다.

모든 곳에서 상호 작용 활성화

앱 전체에서 대화형 기능을 원한다면 모든 곳에서 대화형 기능을 활성화할 수 있습니다. 또 다른 옵션인 대화형 옵션을 전달하여 앱의 모든 컴포넌트를 대화형으로 만들 수 있습니다. 어떤 컴포넌트를 대화형으로 만들지 지정하지 않아도 됩니다. 대화형 렌더링 모드는 컴포넌트 계층 구조 아래로 상속됩니다. 루트 구성 요소에서 이 기능이 활성화되어 있는 것을 볼 수 있습니다. 라우터에 렌더링 모드 속성이 지정되어 대화형 자동을 사용해야 한다는 것을 의미하며 이는 라우팅되는 모든 페이지도 대화형 자동을 사용하고 해당 페이지의 모든 자식 구성 요소도 대화형 자동이 됨을 의미합니다.