.NET 10 Preview 릴리스 6에서 Blazor 서버의 상태 손실 문제 해결 | 존 힐튼

프로그래밍 C# / .NET
1

.NET 10 Preview 6: Blazor Server의 상태 손실 문제 해결

주요 개선사항 개요

.NET 10 Preview 6는 Blazor 프레임워크에 중요한 개선사항들을 도입했습니다. 가장 주목할 만한 변화는 Blazor Server의 오랜 숙원인 연결 손실로 인한 컴포넌트 상태 손실 문제를 해결한 것입니다.

1. Blazor Server 상태 지속성 (State Persistence)

문제점

  • 이전 버전에서는 사용자가 비활성 상태가 되거나 연결이 끊어지면 서버가 일정 시간 후 회로(circuit)를 제거
  • 사용자가 다시 활성화되어도 컴포넌트 상태가 완전히 손실됨
  • 양식 작성 중 점심시간을 가진 후 돌아와보니 작성 내용이 모두 사라지는 상황 발생

해결책

자동 상태 지속성: 회로가 제거되기 직전에 컴포넌트 상태를 자동으로 저장하고, 사용자가 다시 활성화될 때 복원

구현 방법

@code {
    [SupplyParameterFromPersistentComponentState]
    int CurrentCount { get; set; } = 0;

    private void IncrementCount()
    {
        CurrentCount++;
    }
}

주요 특징:

  • [SupplyParameterFromPersistentComponentState] 속성을 사용하여 지속할 상태 지정
  • 프리렌더링과 대화형 렌더링 모두에서 동일한 상태 사용 가능
  • 회로 제거 시 자동으로 상태 저장

저장 위치 옵션

기본 설정: 메모리 내 저장

  • 서버 재부팅이나 새 배포 시 상태 손실 가능성

향상된 설정: Hybrid Cache 활용

  • 메모리와 분산 캐시 모두에 저장
  • 다중 인스턴스 환경에서 더욱 견고한 성능
  • 요청이 어느 서버로 라우팅되어도 올바른 데이터 검색 가능

2. 회로 일시정지 및 재개 API

수동 제어 기능

개발자가 직접 회로의 일시정지와 재개를 제어할 수 있는 JavaScript API 제공

구현 예제

document.addEventListener('visibilitychange', ()=> {
    if(document.hidden) {
        Blazor.pause();
    } else {
        Blazor.resume();
    }
});

동작 방식:

  • Blazor.pause(): 지속성으로 표시된 상태를 저장하고 회로 일시정지
  • Blazor.resume(): 저장된 상태를 복원하고 회로 재개

활용 장점:

  • Blazor Server 성능 최적화
  • 회로 제거 타이밍에 대한 세밀한 제어
  • 자동 상태 복원과 함께 효율적인 리소스 관리

3. 중첩 객체 유효성 검사

이전 제한사항

  • DataAnnotationsValidator 사용 시 최상위 속성만 유효성 검사
  • 중첩된 객체나 컬렉션 유효성 검사를 위해 별도 NuGet 패키지 필요

새로운 기능

public class Order
{     
    [Required(ErrorMessage = "Customer information is required")]   
    public Customer Customer { get; set; } = new();
   
    [Required(ErrorMessage = "At least one order item is required")]
    [MinLength(1, ErrorMessage = "Order must contain at least one item")]
    [MaxLength(50, ErrorMessage = "Order cannot contain more than 50 items")]   
    public List<OrderItem> Items { get; set; } = new();
 
    public ShippingInfo? ShippingInfo { get; set; }

    [StringLength(500, ErrorMessage = "Notes cannot exceed 500 characters")]
    public string? Notes { get; set; }
}

활성화 방법

builder.Services.AddValidation();
  • Program.cs에 위 코드 추가
  • <DataAnnotationsValidator />가 중첩 객체와 컬렉션까지 자동 유효성 검사

4. Blazor WebAssembly 자산 사전 로딩

성능 개선 배경

Blazor WebAssembly의 초기 로딩 시간 단축을 위한 자산 사전 로딩 기능

기존 로딩 과정

  1. HTML 파싱
  2. blazor.web.js 발견 및 다운로드
  3. .NET 런타임 파일 발견 및 다운로드
  4. 애플리케이션 어셈블리 다운로드
  5. 앱 시작

개선된 로딩 과정

<head>
    <!-- other code -->
    
    <LinkPreload /> 
</head>

개선 효과:

  • 3-4단계가 HTML 로딩과 동시에 시작
  • 전체 로딩 시간 단축
  • 사용자 관점에서 더 빠른 앱 실행

5. 내비게이션 예외 비활성화 옵션

문제 상황

  • 정적 서버 사이드 렌더링에서 NavigationManager.NavigateTo 사용 시 NavigationException 발생
  • 디버깅 시 불필요한 예외 중단점 발생
  • SSR과 대화형 렌더 모드 간 코드 실행 동작 차이

해결 방법

AppContext.SetSwitch("Microsoft.AspNetCore.Components.Endpoints.NavigationManager.DisableThrowNavigationException", isEnabled:true);

개선 효과:

  • 예외 대신 렌더러에 리디렉션 요청 신호 전송
  • 더 나은 디버깅 경험
  • 렌더 모드 간 일관된 코드 동작

6. 패스키 지원

새로운 인증 기능

Individual Accounts를 사용하여 새 Blazor 프로젝트 생성 시 패스키 기능 자동 포함

사용자 경험 개선:

  • 계정 설정 후 패스키 추가 가능
  • Windows Hello 등의 서비스를 통한 로그인
  • 기존 소셜 인증 또는 사용자명/비밀번호 대신 편리한 인증 방식

실용적인 팁과 주의사항

상태 지속성 활용 팁

  • 중요한 폼 데이터는 반드시 [SupplyParameterFromPersistentComponentState] 속성 적용
  • 프로덕션 환경에서는 Hybrid Cache 설정을 통한 분산 저장 권장
  • 다중 인스턴스 환경에서는 sticky session과 함께 사용 고려

성능 최적화 권장사항

  • WebAssembly 앱에서는 <LinkPreload /> 컴포넌트 필수 사용
  • 사용자 활동 패턴에 따른 회로 일시정지/재개 전략 수립
  • 중첩 객체 유효성 검사 시 성능 영향 모니터링

개발 환경 설정

  • 내비게이션 예외 비활성화 옵션을 통한 디버깅 환경 개선
  • 패스키 기능 테스트를 위한 HTTPS 환경 구성 필수

요약

.NET 10 Preview 6는 Blazor Server의 상태 지속성 문제 해결을 통해 사용자 경험을 크게 개선했습니다. 이와 함께 중첩 객체 유효성 검사, WebAssembly 성능 향상, 패스키 지원 등 다양한 기능이 추가되어 Blazor 개발 생태계가 한층 성숙해졌습니다.

.NET 10의 최종 릴리스까지 한 번의 프리뷰와 몇 번의 Release Candidate가 남아있으며, 11월 RTM 릴리스까지 품질과 성능 개선에 집중할 예정입니다.

2개의 좋아요