Search code examples
blazorvisual-studio-2022project-template

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

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

enter image description here

Solution

  • 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.