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

Asked 6/12, 2023 at 13:56 Answered 21/5, 2024 at 12:48

Solved blazor visual-studio-2022 project-template

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

Gauze answered 6/12, 2023 at 13:56 Comment(0)

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.

Tila answered 6/12, 2023 at 17:25 Comment(3)

I've written a personal commentary on Per page/component mode. How it works, the pitfalls, why it does certain things. Note that the conclusions are a personal view. github.com/ShaunCurtis/Blazor.ExploreRendering/blob/master/… – Tila 28/12, 2023 at 10:2

What are common examples of the kinds of things that can go wrong if one selects the "wrong" mode for their project? – Harlot 17/5, 2024 at 23:12

Too bigger topic for a comment. Have you read the commentary? – Tila 18/5, 2024 at 7:22

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)

Modesta answered 6/12, 2023 at 14:0 Comment(3)

Per page/component means "mixed"? I get it now. – Gauze 6/12, 2023 at 14:3

Why does 'globally interactive' mean 'full webassembly'? Isn't webassembly exclusively on the client, and therefore local only? – Gauze 6/12, 2023 at 14:8

I gave a very confusing answer. I edited it to make it more precise – Modesta 6/12, 2023 at 14:20

To keep it as simple as possible:

Global Interactivity in Blazor means any interaction or state-change can potentially affect the whole app. Making a change in one page/component may cause the entire application to be refreshed or re-rendered

(The state of all components/pages are refreshed together).

In contrast, Per-Page or Per-Component Interactivity isolates the interactive (refresh)behaviour to specific parts of your application. This approach is a bit more efficient as it limits the scope of real-time updates to only the components/pages that need it.

State changes within individual components/pages are displayed without having to update/refresh every single page/component.

Cyme answered 21/5, 2024 at 12:48 Comment(0)

Recommended topics

Hot tags