Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Blazor .NET8 right approach for having everything in wasm but at the same time also have a support for server page rendering for certain pages

$
0
0

Goal is to have everything in wasm but at the same time support pages on the server.Only thing that is on server are: App.razor (to support server exceptional pages) and exceptional pages.Is there a better solution to this?

Components on server:

App.razor:

<!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="BlazorApp1.styles.css" /><link rel="icon" type="image/png" href="favicon.png" /><HeadOutlet @rendermode="RenderModeForPage" /><RadzenTheme Theme="material" @rendermode="RenderModeForPage" /></head><body><Routes @rendermode="RenderModeForPage" /><script src="_framework/blazor.web.js"></script><script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script></body></html>@code {    [CascadingParameter]    private HttpContext HttpContext { get; set; } = default!;    private IComponentRenderMode? RenderModeForPage    {        get        {            var rm = HttpContext.Request.Path.StartsWithSegments("/Account")            ? null            : InteractiveWebAssembly;            return rm;        }    }}

Components on Client:

Home.razor:

@page "/"@inject HttpClient httpClient<PageTitle>Home</PageTitle><h1>Hello, world!</h1>Welcome to your new app.@code {    protected override void OnInitialized()    {        base.OnInitialized();    }}

This disallows rendering of wasm pages on the server.This solves a problem where we have a wasm component that requires services registered only on client (e.g. HttpContext) which we do not want to have on the server. This happens on navigation to a page that is rendered on wasm, despite Router also being rendered in wasm, server is instantiating the router and router then is trying to instantiate a page and then inject services that are not available on the server.

Routes.razor:

@using Microsoft.AspNetCore.Components.WebAssembly.Hosting<Router AppAssembly="typeof(Program).Assembly"><Found Context="routeData">        @if (ShouldRenderRoute(routeData))        {<AuthorizeRouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)"><NotAuthorized><RedirectToLogin /></NotAuthorized></AuthorizeRouteView>        }<FocusOnNavigate RouteData="routeData" Selector="h1" /></Found></Router>@code {    /// <summary>    /// This disallows rendering of wasm pages on the server.    ///  This solves a problem where we have a wasm component that requires services registered only on client (e.g. HttpContext) which we do not want to have on the server. This happens on navigation to a page that is rendered on wasm, despite Router also being rendered in wasm, server is instantiating the router and router then is trying to instantiate a page and then inject services that are not available on the server.    /// </summary>    /// <param name="routeData"></param>    /// <returns></returns>    private bool ShouldRenderRoute(RouteData routeData)    {        string environment = Environment.GetEnvironmentVariable("IsWebAssembly");        var routePath = routeData.PageType?.Name;        var render = environment == "true" || !(routePath?.Contains("Home") ?? false);        return render; // Example condition    }}

Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>