@rendermode - Blazor 에서 서버와 실시간 연결이 되지 않을

 

.NET 8 버전 Blazor 에서 실시간 변수 연결이 정상적으로 작동하지 않아서 여기 저기 알아보다가
@rendermode  중 InteractiveServer가 있음을 확인했고 해당 구문을 추가하였을때 정상적으로 작동하는것을 확인하였다.

 

InteractiveServer 모드란?

Blazor는 .NET 6부터 새로운 렌더링 모드를 도입했습니다. 특히 InteractiveServer는 Blazor WebAssembly 앱과 Blazor Server 앱 간의 상호작용을 지원하기 위해 도입된 렌더링 모드입니다. 이 모드는 Blazor Server 앱에서 Blazor WebAssembly 앱과 유사한 방식으로 서버와 상호작용을 처리합니다.

InteractiveServer 모드

InteractiveServer 모드는 Blazor Server 앱에서 사용자가 페이지를 처음 로드할 때 HTML을 렌더링한 후, JavaScript로 상호작용을 설정하고, 서버와의 실시간 연결을 관리합니다. 이 모드는 기본적으로 ServerPrerendered와 유사하지만, 더 나은 사용자 경험을 제공하기 위해 상호작용 부분을 최적화합니다.

특징

• 서버 렌더링 및 상호작용: 페이지 로드 시 HTML을 서버에서 렌더링하고, 초기 로드 후 서버와의 실시간 상호작용을 설정합니다.
• 빠른 초기 로드: HTML이 사전 렌더링되어 초기 로드 속도가 빠릅니다.
• 서버와 실시간 연결: SignalR을 통해 서버와 실시간 연결을 유지하여 동적 상호작용을 지원합니다.

@page "/interactive-server-example"
@rendermode InteractiveServer

<h3>Interactive Server Mode Example</h3>
<p>This component is rendered using the InteractiveServer mode.</p>
<input type="range" @bind="rangeValue" min="0" max="100" step="1" />
<p>Selected Value: @rangeValue</p>
<p>Value Squared: @rangeValueSquared</p>

@code {
    private int rangeValue;
    private int rangeValueSquared => rangeValue * rangeValue;
}