What does 'interactivity location' mean when creating a Blazor App from a template?

Question

What does 'interactivity location' mean when creating a Blazor App from a template?

2.3k views Asked by hamstar At 06 December 2023 at 13:56

I would assume this is referring to client or server, but with these as the options I can't quite figure this.

Original Q&A

There are 2 answers

Mateus Zampol On 06 December 2023 at 14:00

This refers to the new features added to Blazor in .NET 8

You can have your app be globally interactive (Blazor Server or WASM or both) or mixed (some components are static SSR and some interactive)

**MrC aka Shaun Curtis** · Accepted Answer · 2023-12-06T17:25:33+00:00

Lots of choice, but when you don't understand what they mean??????

The difference is where the render mode is set for the SPA.

When you select Global, the render mode is set in App.razor on the two components. This overrides any "lower" settings in child components.

The example below sets it to InterActiveServer.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="SSR.Server.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet @rendermode="InteractiveServer" />
</head>

<body>
    <Routes @rendermode="InteractiveServer" />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

When you select Page/Component, App looks likes this. No render modes defines so Server Side Rendered is default unless set specifically at the page or component level.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="SSR.Server.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

Add this simple component to your solution and add it to any page. It will tell you what render state is being used for that page. It will also change state as the component switches from pre-rendered to fully interactive.

RenderContextState.razor

<div class="@_alertCss m-2">
    @_alertText
</div>

@code {
    private bool _rendered;
    private string _alertCss => _rendered ? "alert alert-success" : "alert alert-danger";
    private string _alertText => _rendered ? "Interactively Rendered" : "Statically Rendered";

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            _rendered = true;
            // We Shouldn't really do this but we need to display the result of the component mutation
            // OnAfterRender should only normally be used for JSInterop code
            this.StateHasChanged();
        }
    }
}

For instance:

@page "/"
<PageTitle>Home</PageTitle>

<RenderContextState />

<h1>Hello, world!</h1>

Welcome to your new app.

All the WebAssembly modes on the Blazor Web App template are AspNetCore Hosted. The template deploys a Server and Client project.

If you want standalone WASM use the Blazor WebAssembly Standalone App template.

I'm in the middle of writing an article on this very [confusing] subject. I'll add a reference to this answer when it's complete.

TechQA.

What does 'interactivity location' mean when creating a Blazor App from a template?

There are 2 answers

Related Questions in BLAZOR

Related Questions in VISUAL-STUDIO-2022

Related Questions in PROJECT-TEMPLATE

Popular Questions

Popular Tags

Trending Questions