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

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.

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

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related