Blazor Web App (.NET 8): How to use a server rendered component, on a WebAssembly rendered page?

Question

Lets say i have a WebAssembly rendered page in a Blazor Web App (.NET 8):

@page "/counter"
@rendermode InteractiveWebAssembly

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<ServerSideComponent></ServerSideComponent>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

And i have a Razor component with server side rendering:

@rendermode InteractiveServer

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Is there a way of having a server side rendered blazor component, on a WebAssembly rendered page? I want the page to be rendered in WebAssembly, and the component to be server rendered.

When i try doing this, i get this exception:

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Cannot create a component of type 'BlazorApp4.Client.ServerSideComponent' because its render mode 'Microsoft.AspNetCore.Components.Web.InteractiveServerRenderMode' is not supported by WebAssembly rendering. System.NotSupportedException: Cannot create a component of type 'BlazorApp4.Client.ServerSideComponent' because its render mode 'Microsoft.AspNetCore.Components.Web.InteractiveServerRenderMode' is not supported by WebAssembly rendering.

That code is running on the client - so it can't server render anything. But, maybe you could call an api on the server to render the component and then use the returned html fragment in a MarkupString? Of course that wouldn't be interactive... — Mister Magoo
– Mister Magoo, Commented Nov 17, 2023 at 11:43

Massimiliano Kraus · Accepted Answer · 2024-05-04 19:27:36Z

4

If you are using @rendermode InteractiveWebAssembly, you cannot use components that are defined on the server. The best approach is to have a page with its default behavior (no render mode specified so it will use server-side rendering) and then from that page you call the two components.

Then you can define your components' render mode, something like this:

@page "/counter"

<PageTitle>Counter</PageTitle>

<ClientSideComponent @rendermode=WebAssemblyInteractive />
<ServerSideComponent @rendermode=ServerInteractive />

@code {
   // ...
}

Take into account that your ServerSideCompoenent must also be located in the Client project and cannot access any server resources such as a database. In case you need to access server resources you have to create a controller in your server-side project and call it from the client components as a web api request.

edited May 4, 2024 at 19:27

Massimiliano Kraus

3,8925 gold badges32 silver badges51 bronze badges

answered Nov 17, 2023 at 18:13

Ron

3283 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hosein Ghasemi May 19 at 7:18

In blazor web app with .net8 and above, you can't call server resources like web api and database from client project.

Collectives™ on Stack Overflow

Blazor Web App (.NET 8): How to use a server rendered component, on a WebAssembly rendered page?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related