CODEWITHSUNDEEP
.netblazorblazor-server-sideblazor-webassembly.net-8.0
Steffan Pallesen
Steffan Pallesen

Reputation: 570

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

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.

Upvotes: 5

Views: 5149

Answers (1)

Ron
Ron

Reputation: 328

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.

Upvotes: 4

Related Questions