CODEWITHSUNDEEP
blazorblazor-server-sideasp.net-blazor
Jeremy
Jeremy

Reputation: 46410

Blazor server requests my css multiple times, sometimes

Just started my first Blazor application, and when examining the http requests, using chrome dev tools network tab, I see two of the css files get requested twice. First the initiator is the page, then the initiator is the blazor javascript. When requested by the blazor javascript the server returns 304 because those files were already requested earlier. The other strange thing is that this doesn't always happen. If I CTRL refresh the page multiple times in a row, it appears to happen only half the time, and it never happens to any other css or js files.

The only correlation I can find is the css files in question are the only ones referenced by my MainLayout.razor page while all other assets are referenced by _Layout.cshtml.

I've inspected the html source and there is only ever one link to each of those css files rendered. I'm a bit puzzled.

enter image description here

In my MainLayout.razor page I have had content that has links to css files:

@inherits LayoutComponentBase
<HeadContent>
    <link rel="stylesheet" href="css/site/Site.css" />
    <link rel="stylesheet" href="icons/mainmenu/style.css" />
</HeadContent>
...
@code {}

My _Layout.cshtml is pretty much standard template stuff:

@using Microsoft.AspNetCore.Components.Web
@namespace Blazor_Server_App.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en" class="fullheight fixed-footer">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css" />
    <link href="Blazor Server App.styles.css" rel="stylesheet" />
    <script src='lib/jquery/jquery.js' ype="text/javascript"></script>
    <script src='lib/jqueryui/jquery-ui.js' ype="text/javascript"></script>
    <script src='lib/bootstrap/js/bootstrap.bundle.js' type="text/javascript"></script>
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
    @RenderBody()

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
</body>
</html>

Host file is unchanged from the template:

@page "/"
@namespace Blazor_Server_App.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

<component type="typeof(App)" render-mode="ServerPrerendered" />

App.Razor is also unchanged:

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

Upvotes: 0

Views: 818

Answers (1)

T.Trassoudaine
T.Trassoudaine

Reputation: 1375

MainLayout.razor is a Blazor component which means it is rendered and can be rerendered for several reasons. Which means your links, when they are rerendered, are executed and requested once again.

_Layout.cshtml is only rendered once foreach circuit: when you reload the page you create a new circuit, when you navigate between razor pages, you stay on the same circuit.

For the question about OnAfterRenderAsync() being called only once: it seems that prerendering does not trigger it, anymore. This github thread shows why they changed it and that they fixed it a while ago.

Upvotes: 1

Related Questions