Description
Background and Motivation
Using link headers for preloading in Blazor WebAssembly applications has several disadvantages:
- It's complicated to correctly identify the root without doing per-request processing
- It's more indirect when people want to turn the feature off
For these reasons, we have decided to switch to a component-based approach. Thanks to the <base href="..."> element, preload links are correctly rooted.
This PR introduces a <LinkPreload /> component that, when an InteractiveWebAssembly component is present on the page, generates preloading links into the place where the component is used (in the HTML head, after the <base href="...">). If there isn't any InteractiveWebAssembly component, the component does nothing.
This change addresses issues with preload links not being properly rooted for app start from deep links in Blazor WebAssembly applications.
Proposed API
+namespace Microsoft.AspNetCore.Components
+{
+ public class LinkPreload : ComponentBase
+ {
+ public LinkPreload() { }
+ }
+}Usage Examples
<!-- In App.razor or _Host.cshtml -->
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<LinkPreload />
<!-- Other head content -->
</head>
<body>
<!-- Body content -->
</body>
</html>The component automatically detects if InteractiveWebAssembly rendering is being used and only generates preload links when appropriate:
@page "/"
@rendermode InteractiveWebAssembly
<h1>My Blazor App</h1>
<!-- LinkPreload component in the head will generate preload links for this page -->Alternative Designs
The previous approach used HTTP link headers to communicate preload directives. While this worked, it required server-side processing to correctly root the URLs based on the request path, making it more complex and less flexible.
The component-based approach was chosen for its simplicity and automatic integration with the existing <base> element.
Risks
-
Placement Dependency: The component must be placed after the
<base href="...">element to ensure URLs are correctly rooted. Incorrect placement could result in broken preload links. -
Template Updates: Existing Blazor applications will need to manually add the
<LinkPreload />component to benefit from this feature, though the BlazorWeb template will include it by default.