Blazor Web App - 렌더링 개념

클라이언트 및 서버 렌더링 개념

 

클라이언트 측 렌더링 (CSR)

클라이언트의 Blazor WebAssembly 런타임에 의해 최종 HTML 태그가 생성된다는 의미

CSR은 대화형으로 간주되므로  정적 클라이언트 측 렌더링 과 같은 개념은 없다.

그러므로 rendermode InteractiveWebAssembly 만 존재한다.

명시하지 않으면 SSR 이면서 static 이 된다. (즉 onClick 등이 반응하지 않는다.)

@page "/render-mode-3"
@rendermode InteractiveWebAssembly

@* button 클릭시 c# code 인 UpdateMessage 를 호출함 (클라이언트측 호출) *@
<button @onclick="UpdateMessage">Click me</button> @message

@code {
    private string message = "Not clicked yet.";

    private void UpdateMessage()
    {
        message = "Somebody clicked me!";
    }
}

 

 

 

서버 측 렌더링 (SSR)

종 HTML 태그가 서버의 ASP.NET Core 런타임에 의해 생성된다는 것을 의미

• 정적 SSR : 서버는 사용자 상호 작용이나 Razor 구성 요소 상태 유지를 제공하지 않는 정적 HTML을 생성.
• 대화형 SSR : Blazor 이벤트는 사용자 상호 작용을 허용하고 Razor 구성 요소 상태는 Blazor 프레임워크에 의해 유지 관리됩니다.

 

사전 렌더링 (Pre Rendering)

렌더링된 컨트롤에 대한 이벤트 처리기를 활성화하지 않고 서버에서 처음에 페이지 콘텐츠를 렌더링하는 프로세스

서버는 초기 요청에 대한 응답으로 가능한 한 빨리 페이지의 HTML UI를 출력하므로 앱이 사용자에게 더 반응하는 느낌을 줌

사전 렌더링 뒤에는 항상 서버나 클라이언트에서 최종 렌더링이 이어집니다.

 

전체 코드에 적용하고 싶다면

<Routes @rendermode="new InteractiveServerRenderMode(prerender: false)" />

<HeadOutlet @rendermode="new InteractiveServerRenderMode(prerender: false)" />

 

자동 렌더링 (Auto Rendering)

자동(Auto) 렌더링은 런타임 시 구성 요소를 렌더링하는 방법을 결정합니다. 구성 요소는 처음에 Blazor Server 호스팅 모델을 사용하여 대화형 서버 측 렌더링(대화형 SSR)으로 렌더링됩니다. .NET 런타임 및 앱 번들은 백그라운드에서 클라이언트에 다운로드되고 캐시되어 향후 방문 시 사용할 수 있습니다. 자동 렌더링 모드를 사용하는 구성 요소는 Blazor WebAssembly 호스트를 설정하는 별도의 클라이언트 프로젝트에서 빌드되어야 합니다.

@page "/render-mode-4"
@rendermode InteractiveAuto

<button @onclick="UpdateMessage">Click me</button> @message

@code {
    private string message = "Not clicked yet.";

    private void UpdateMessage()
    {
        message = "Somebody clicked me!";
    }
}

위코드는 초기에 SSR(static) 으로 download 후 interactiveserver 로 동작하고 webassembly 가 정상적으로 다운로드가 완료되면 interactivewebassemblyauto 로 동작하게 된다. 

 

정적 및 대화형 렌더링 개념

 

정적 렌더링

C# 코드를 통해 .NET 이벤트를 처리할 수 있는 기능이 없음

클라이언트의 사용자 이벤트는 서버에서 실행되는 .NET으로 처리될 수 없습니다.

@page "/render-mode-1"

@* button 클릭은 아무런 반응을 하지 않는다. *@
<button @onclick="UpdateMessage">Click me</button> @message

@code {
    private string message = "Not clicked yet.";

    private void UpdateMessage()
    {
        message = "Somebody clicked me!";
    }
}

 

 

대화형 렌더링

C# 코드를 통해 .NET 이벤트를 처리할 수 있는 기능이 있음

@page "/render-mode-2"
@rendermode InteractiveServer

@* button 클릭시 c# code 인 UpdateMessage 를 호출함 (서버측 호출) *@
<button @onclick="UpdateMessage">Click me</button> @message

@code {
    private string message = "Not clicked yet.";

    private void UpdateMessage()
    {
        message = "Somebody clicked me!";
    }
}

Client (webassembly) 같은 경우는 기본적으로 대화형 rendering 이라고 생각하면 된다. 

 

Render Mode

Later in this article, examples are shown for each render mode scenario.

 

Name	Description	Render Location	Interactive
Static Server	Static server-side rendering (static SSR)	Server	❌No
Interactive Server	Interactive server-side rendering (interactive SSR) using Blazor Server	Server	✔️Yes
Interactive WebAssembly	Client-side rendering (CSR) using Blazor WebAssembly†	Client	✔️Yes
Interactive Auto	Interactive SSR using Blazor Server initially and then CSR on subsequent visits after the Blazor bundle is downloaded	Server, then client	✔️Yes

전체 앱에 렌더링 모드 적용

전체 앱에 대한 렌더링 모드를 설정하려면 루트 구성 요소가 아닌 앱의 구성 요소 계층 구조에서 가장 높은 수준의 대화형 구성 요소에 렌더링 모드를 표시합니다

<Routes @rendermode="InteractiveServer" />

<HeadOutlet @rendermode="InteractiveServer" />

 

 

 

관련영상

https://youtu.be/gCHZ73A0Kfc