Clarify Blazor Web Route behavior

[Kumima]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

For Global Auto Interactive Prerendered Template:

• Static Server rendering component will flicker into "Not found", if it's not provided to Interactive “Router”. Support using Blazor pages with status code pages middleware #51203
• Only when there is no matching routable static content, it ends with the browser's built-in 404 UI.
• The Not Found component is not truly unused.

Although this seems by design, it still feels inconvenient.

Related Question:

Is there a better way to provide SSR with global auto interactive enabled, better than checking the request?

<Routes @rendermode="@RenderModeForPage" />
@code {
    [CascadingParameter]
    private HttpContext HttpContext { get; set; } = default!;

    private IComponentRenderMode? RenderModeForPage => HttpContext.Request.Path.StartsWithSegments("/Account")
        ? null
        : InteractiveAuto;
}

Investigation:

Related #52063
AuthorizationMiddleware redirect takes higher priority then NotAuthorized cotent.
Related #46980, #48983, #51411, #51847.

I just met a similar problem with #51203.
@danroth27
Only If the router render mode is set as null, which means SSR, it will shows StatusCode.razor permanently. Your mentioned plain text "Not found" seems to still come from the depreciated Not Found component. The flicker seems caused by Prerendering. During the prerendering, the "/test" route request is ReExecute to "/StatusCode/404". After the interactive is ready, "/test" goes through the Router component, which results a "Not found".

The issue #48983 also mentioned

If you don't have an interactive router, then a navigation to a nonexistent URL will return a 404 from the server, and then: If you have enhanced nav enabled (default) then you'll see Error: 404

I'm confused about where the "Error: 404" comes from.

To make a rarer scenario, and there is another similar issue #51847:
For global auto, the Router component is under the client project to make it able to be rendered as auto. Normally, we placed the pages in the Client project. The AppAssembly of Route is set as Client, so it can discover pages defined in Client project.
Define a page in Server project, let's define it as "/test". If we route to the "/test", the browser will flicker. It first renders the test component and then it shows plain text "Not found". The first is because of Prerender. This causes more confusion: it flickers the content and then renders the "Not Found".

Static and prerender discovery comes from below which includes the pages defined in Server project.

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(Client._Imports).Assembly);

Interactive discovery comes from another which only includes the pages defined in Client project.

<Router AppAssembly="@typeof(Routes).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
        <FocusOnNavigate RouteData="@routeData" Selector="h1"/>
    </Found>
</Router>

Static discovery contains the "/test" definition while Router does not, which results in flickers if prerender is enabled. I believe to place all the pages in Client will help.

Describe the solution you'd like

I think Error page behavior is also related to this.

alternatives

• Do not replace the DOM if nothing found in interactive Router, remain the static content for this scenario. This may be a bad idea, but it can make stuff like UseStatusCodePagesWithReExecute work.
• Provide a centralized way to specify group of pages render as SSR with auto global enabled.

Will a nested <Router> help for the second, how?

If enhanced navigation is available for interactive client routing, navigation always goes through the interactive client-side router. This point is only relevant in an uncommon scenario where an interactive <Router> is nested inside a server-side rendered <Router> . In that case, the interactive router takes priority when handling navigation, so enhanced navigation isn't used for navigation because it's a server-side routing feature.Doc

Additional context

No response

[javiercn]

@Kumima the behavior is as follows:

• During SSR rendering Blazor pages behave like Razor Pages and participate from the rest of the ASP.NET core pipeline (routing, auth, etc).
• When an app becomes interactive (Server interactive or Web Assembly) ASP.NET is not in the picture, which means that it behaves pretty much as an old Blazor Server or Web Assembly app.
• You need to account for both scenarios, prerendering and non-prerendering.
  • Ideally, your code/requirements apply to both in the same way.
  • If you have interactive navigations, auth on client-side, etc. Then you need to have the same code as before to handle when the user is not authorized, or when the user does a client-side navigation to a page that doesn't exist.
  • During SSR we won't show NotAuthorized, because your component doesn't even get to render.
  • Same with NotFound on the router, the component doesn't even get to render.
• When in interactive mode, if you are using webassembly, the Error page won't be found because it's not part of the client project, and can't be routed to.

Hope this helps clarify some points.

[Kumima]

@javiercn Thanks for the reply.
I think the key point is below:

Ideally, your code/requirements apply to both in the same way.

Any advice for the related question?
Is there a better way to provide SSR with global auto interactive enabled, better than checking the request?
A centralized way to specify group of pages render as SSR with auto global enabled.

<Routes @rendermode="@RenderModeForPage" />
@code {
    [CascadingParameter]
    private HttpContext HttpContext { get; set; } = default!;

    private IComponentRenderMode? RenderModeForPage => HttpContext.Request.Path.StartsWithSegments("/Account")
        ? null
        : InteractiveAuto;
}

[javiercn]

@Kumima there's an alternative way.

You can declare the render mode on the page component and within the App component do the following:

    private IComponentRenderMode? RenderModeForPage => endpoint.Metadata.GetMetadata<RenderModeAttribute>()?.Mode;

You can apply the render mode to a group of pages by using an _Imports.razor file or putting it on a base class.