Merged PR 36408: [release/8.0] [Blazor] Auto render mode improvements

# Auto render mode improvements

Backport of #53159

Improves the Auto render mode so that components are more responsive and have a decreased initial time to interactivity when WebAssembly resources are not already cached.

## Description

One of the goals of the Auto render mode was to allow apps to become interactive as quickly as possible via Server interactivity, while WebAssembly bits were downloaded in the background for use on future visits to the site. However, since WebAssembly resources were being downloaded with maximal parallelism, the quality of the websocket connection required for Server interactivity was negatively impacted, often to the extent that the websocket wouldn't connect until WebAssembly resources had finished downloading completely, largely defeating the purpose of the Auto render mode.

This PR makes the following improvements:
* Removes a problematic timeout on loading the WebAssembly boot config. This fixes a problem where Server interactivity was always being used when the boot config took too long to load.
* Introduces a limit to the maximum parallel WebAssembly resource downloads when an Auto component initiates the startup of the WebAssembly runtime. This limit is set to 1 and overrides any user-specified limit.
* Fixes an issue where the circuit sometimes remains open even if WebAssembly gets selected for Auto interactivity.

I provided a preview of these changes in #52154 (comment) so that customers could try them out, and the feedback so far has been very positive.

Fixes #52154

## Customer Impact

A significant number of customers reported being affected by this problem in issues like #52154. I supplied customers with a preview of the fix that they could patch it into their app, and many indicated that their problems were resolved by the fix. The Auto render mode was one of the key features released in .NET 8, so it's important that it works in the way we've been advertising.
 
## Regression?

- [ ] Yes
- [X] No

## Risk

- [ ] High
- [ ] Medium
- [X] Low

The core Auto render mode functionality is unaffected by this change - we added small tweaks to adjust the throttling amount and remove a problematic timeout. Additional tests were added to verify the changes in behavior, and we've been testing these changes manually to ensure they work well in real-world scenarios (various device types and connection qualities).

## Verification

- [X] Manual (required)
- [X] Automated

## Packaging changes reviewed?

- [ ] Yes
- [ ] No
- [X] N/A

Author: Mackinnon Buck

src/Components/Web.JS/dist/Release/blazor.web.js

@@ -37,7 +37,6 @@ function boot(options?: Partial<WebStartOptions>) : Promise<void> {
   started = true;
   options = options || {};
   options.logLevel ??= LogLevel.Error;
-  Blazor._internal.loadWebAssemblyQuicklyTimeout = 3000;
   Blazor._internal.isBlazorWeb = true;
 
   // Defined here to avoid inadvertently imported enhanced navigation

src/Components/Web.JS/src/Boot.Web.ts

@@ -79,7 +79,6 @@ export interface IBlazor {
     receiveWebAssemblyDotNetDataStream?: (streamId: number, data: any, bytesRead: number, errorMessage: string) => void;
     receiveWebViewDotNetDataStream?: (streamId: number, data: any, bytesRead: number, errorMessage: string) => void;
     attachWebRendererInterop?: typeof attachWebRendererInterop;
-    loadWebAssemblyQuicklyTimeout?: number;
     isBlazorWeb?: boolean;
 
     // JSExport APIs

src/Components/Web.JS/src/GlobalExports.ts

@@ -9,7 +9,6 @@ import { disposeCircuit, hasStartedServer, isCircuitAvailable, startCircuit, sta
 import { hasLoadedWebAssemblyPlatform, hasStartedLoadingWebAssemblyPlatform, hasStartedWebAssembly, isFirstUpdate, loadWebAssemblyPlatformIfNotStarted, resolveInitialUpdate, setWaitForRootComponents, startWebAssembly, updateWebAssemblyRootComponents, waitForBootConfigLoaded } from '../Boot.WebAssembly.Common';
 import { MonoConfig } from 'dotnet';
 import { RootComponentManager } from './RootComponentManager';
-import { Blazor } from '../GlobalExports';
 import { getRendererer } from '../Rendering/Renderer';
 import { isPageLoading } from './NavigationEnhancement';
 import { setShouldPreserveContentOnInteractiveComponentDisposal } from '../Rendering/BrowserRenderer';
@@ -100,12 +99,18 @@ export class WebRootComponentManager implements DescriptorHandler, RootComponent
       return;
     }
 
-    if (descriptor.type === 'auto' || descriptor.type === 'webassembly') {
-      // Eagerly start loading the WebAssembly runtime, even though we're not
-      // activating the component yet. This is becuase WebAssembly resources
-      // may take a long time to load, so starting to load them now potentially reduces
-      // the time to interactvity.
+    // When encountering a component with a WebAssembly or Auto render mode,
+    // start loading the WebAssembly runtime, even though we're not
+    // activating the component yet. This is becuase WebAssembly resources
+    // may take a long time to load, so starting to load them now potentially reduces
+    // the time to interactvity.
+    if (descriptor.type === 'webassembly') {
       this.startLoadingWebAssemblyIfNotStarted();
+    } else if (descriptor.type === 'auto') {
+      // If the WebAssembly runtime starts downloading because an Auto component was added to
+      // the page, we limit the maximum number of parallel WebAssembly resource downloads to 1
+      // so that the performance of any Blazor Server circuit is minimally impacted.
+      this.startLoadingWebAssemblyIfNotStarted(/* maxParallelDownloadsOverride */ 1);
     }
 
     const ssrComponentId = this._nextSsrComponentId++;
@@ -120,26 +125,20 @@ export class WebRootComponentManager implements DescriptorHandler, RootComponent
     this.circuitMayHaveNoRootComponents();
   }
 
-  private async startLoadingWebAssemblyIfNotStarted() {
+  private async startLoadingWebAssemblyIfNotStarted(maxParallelDownloadsOverride?: number) {
     if (hasStartedLoadingWebAssemblyPlatform()) {
       return;
     }
 
     setWaitForRootComponents();
 
     const loadWebAssemblyPromise = loadWebAssemblyPlatformIfNotStarted();
-
-    // If WebAssembly resources can't be loaded within some time limit,
-    // we take note of this fact so that "auto" components fall back
-    // to using Blazor Server.
-    setTimeout(() => {
-      if (!hasLoadedWebAssemblyPlatform()) {
-        this.onWebAssemblyFailedToLoadQuickly();
-      }
-    }, Blazor._internal.loadWebAssemblyQuicklyTimeout);
-
     const bootConfig = await waitForBootConfigLoaded();
 
+    if (maxParallelDownloadsOverride !== undefined) {
+      bootConfig.maxParallelDownloads = maxParallelDownloadsOverride;
+    }
+
     if (!areWebAssemblyResourcesLikelyCached(bootConfig)) {
       // Since WebAssembly resources aren't likely cached,
       // they will probably need to be fetched over the network.
@@ -299,6 +298,8 @@ export class WebRootComponentManager implements DescriptorHandler, RootComponent
         this.updateWebAssemblyRootComponents(batchJson);
       }
     }
+
+    this.circuitMayHaveNoRootComponents();
   }
 
   private updateWebAssemblyRootComponents(operationsJson: string) {

src/Components/Web.JS/src/Services/WebRootComponentManager.ts

@@ -598,22 +598,6 @@ public void DynamicallyAddedSsrComponents_CanGetRemoved_BeforeStreamingRendering
         AssertBrowserLogDoesNotContainErrors();
     }
 
-    [Fact]
-    public void AutoRenderMode_UsesBlazorServer_IfWebAssemblyResourcesTakeTooLongToLoad()
-    {
-        Navigate(ServerPathBase);
-        Browser.Equal("Hello", () => Browser.Exists(By.TagName("h1")).Text);
-        ForceWebAssemblyResourceCacheMiss();
-        BlockWebAssemblyResourceLoad();
-
-        Navigate($"{ServerPathBase}/streaming-interactivity");
-        Browser.Equal("Not streaming", () => Browser.FindElement(By.Id("status")).Text);
-
-        Browser.Click(By.Id(AddAutoPrerenderedId));
-        Browser.Equal("True", () => Browser.FindElement(By.Id("is-interactive-0")).Text);
-        Browser.Equal("Server", () => Browser.FindElement(By.Id("render-mode-0")).Text);
-    }
-
     [Fact]
     public void AutoRenderMode_UsesBlazorWebAssembly_AfterAddingWebAssemblyRootComponent()
     {
@@ -661,8 +645,6 @@ public void AutoRenderMode_UsesBlazorServerOnFirstLoad_ThenWebAssemblyOnSuccessi
         Navigate(ServerPathBase);
         Browser.Equal("Hello", () => Browser.Exists(By.TagName("h1")).Text);
         BlockWebAssemblyResourceLoad();
-        UseLongWebAssemblyLoadTimeout();
-        ForceWebAssemblyResourceCacheMiss();
 
         Navigate($"{ServerPathBase}/streaming-interactivity");
         Browser.Equal("Not streaming", () => Browser.FindElement(By.Id("status")).Text);
@@ -699,8 +681,6 @@ public void AutoRenderMode_UsesBlazorServer_IfBootResourceHashChanges()
         Navigate(ServerPathBase);
         Browser.Equal("Hello", () => Browser.Exists(By.TagName("h1")).Text);
         BlockWebAssemblyResourceLoad();
-        UseLongWebAssemblyLoadTimeout();
-        ForceWebAssemblyResourceCacheMiss();
 
         Navigate($"{ServerPathBase}/streaming-interactivity");
         Browser.Equal("Not streaming", () => Browser.FindElement(By.Id("status")).Text);
@@ -717,14 +697,11 @@ public void AutoRenderMode_UsesBlazorServer_IfBootResourceHashChanges()
         Browser.Click(By.Id($"remove-counter-link-1"));
         Browser.DoesNotExist(By.Id("is-interactive-1"));
 
-        UseLongWebAssemblyLoadTimeout();
         Browser.Navigate().Refresh();
 
         Browser.Equal("True", () => Browser.FindElement(By.Id("is-interactive-0")).Text);
         Browser.Equal("WebAssembly", () => Browser.FindElement(By.Id("render-mode-0")).Text);
 
-        BlockWebAssemblyResourceLoad();
-        UseLongWebAssemblyLoadTimeout();
         ForceWebAssemblyResourceCacheMiss("dummy hash");
         Browser.Navigate().Refresh();
 
@@ -768,8 +745,6 @@ public void AutoRenderMode_CanUseBlazorServer_WhenMultipleAutoComponentsAreAdded
         Navigate(ServerPathBase);
         Browser.Equal("Hello", () => Browser.Exists(By.TagName("h1")).Text);
         BlockWebAssemblyResourceLoad();
-        UseLongWebAssemblyLoadTimeout();
-        ForceWebAssemblyResourceCacheMiss();
 
         Navigate($"{ServerPathBase}/streaming-interactivity");
         Browser.Equal("Not streaming", () => Browser.FindElement(By.Id("status")).Text);
@@ -913,6 +888,36 @@ public void AutoRenderMode_UsesBlazorServer_AfterWebAssemblyComponentsNoLongerEx
         Browser.Equal("Server", () => Browser.FindElement(By.Id("render-mode-3")).Text);
     }
 
+    [Fact]
+    public void WebAssemblyRenderMode_DownloadsWebAssemblyResourcesInParallel()
+    {
+        Navigate($"{ServerPathBase}/streaming-interactivity?ClearSiteData=True");
+        Browser.Equal("Not streaming", () => Browser.FindElement(By.Id("status")).Text);
+
+        Browser.Click(By.Id(AddWebAssemblyPrerenderedId));
+        Browser.Equal("True", () => Browser.FindElement(By.Id("is-interactive-0")).Text);
+        Browser.Equal("WebAssembly", () => Browser.FindElement(By.Id("render-mode-0")).Text);
+
+        Browser.True(() => GetMaxParallelWebAssemblyResourceDownloadCount() > 1);
+    }
+
+    [Fact]
+    public void AutoRenderMode_DoesNotDownloadWebAssemblyResourcesInParallel()
+    {
+        Navigate($"{ServerPathBase}/streaming-interactivity?ClearSiteData=True");
+        Browser.Equal("Not streaming", () => Browser.FindElement(By.Id("status")).Text);
+
+        Browser.Click(By.Id(AddAutoPrerenderedId));
+        Browser.Equal("True", () => Browser.FindElement(By.Id("is-interactive-0")).Text);
+        Browser.Equal("Server", () => Browser.FindElement(By.Id("render-mode-0")).Text);
+
+        Browser.Click(By.Id(AddWebAssemblyPrerenderedId));
+        Browser.Equal("True", () => Browser.FindElement(By.Id("is-interactive-1")).Text);
+        Browser.Equal("WebAssembly", () => Browser.FindElement(By.Id("render-mode-1")).Text);
+
+        Browser.Equal(1, GetMaxParallelWebAssemblyResourceDownloadCount);
+    }
+
     [Fact]
     public void Circuit_ShutsDown_WhenAllBlazorServerComponentsGetRemoved()
     {
@@ -1169,6 +1174,9 @@ public void InteractiveServerRootComponent_CanAccessCircuitContext()
 
     private void BlockWebAssemblyResourceLoad()
     {
+        // Force a WebAssembly resource cache miss so that we can fall back to using server interactivity
+        ForceWebAssemblyResourceCacheMiss();
+
         ((IJavaScriptExecutor)Browser).ExecuteScript("sessionStorage.setItem('block-load-boot-resource', 'true')");
 
         // Clear caches so that we can block the resource load
@@ -1180,11 +1188,6 @@ private void UnblockWebAssemblyResourceLoad()
         ((IJavaScriptExecutor)Browser).ExecuteScript("window.unblockLoadBootResource()");
     }
 
-    private void UseLongWebAssemblyLoadTimeout()
-    {
-        ((IJavaScriptExecutor)Browser).ExecuteScript("sessionStorage.setItem('use-long-auto-timeout', 'true')");
-    }
-
     private void ForceWebAssemblyResourceCacheMiss(string resourceHash = null)
     {
         if (resourceHash is not null)
@@ -1198,6 +1201,11 @@ private void ForceWebAssemblyResourceCacheMiss(string resourceHash = null)
         }
     }
 
+    private long GetMaxParallelWebAssemblyResourceDownloadCount()
+    {
+        return (long)((IJavaScriptExecutor)Browser).ExecuteScript("return window['__aspnetcore__testing__max__parallel__resource__download__count'] || 0;");
+    }
+
     private string InteractiveCallsiteUrl(bool prerender, int? serverIncrement = default, int? webAssemblyIncrement = default)
     {
         var result = $"{ServerPathBase}/interactive-callsite?suppress-autostart&prerender={prerender}";

src/Components/test/E2ETest/ServerRenderingTests/InteractivityTest.cs

@@ -31,7 +31,7 @@ public StatePersistenceTest(
     public override Task InitializeAsync()
         => InitializeAsync(BrowserFixture.StreamingContext + _nextStreamingIdContext++);
 
-    // Validates that we can use persisted state across server, webasembly, and auto modes, with and without
+    // Validates that we can use persisted state across server, webassembly, and auto modes, with and without
     // streaming rendering.
     // For streaming rendering, we validate that the state is captured and restored after streaming completes.
     // For enhanced navigation we validate that the state is captured at the time components are rendered for
@@ -101,6 +101,12 @@ public void CanRenderComponentWithPersistedState(bool suppressEnhancedNavigation
             RenderComponentsWithPersistentStateAndValidate(suppressEnhancedNavigation, mode, renderMode, streaming, interactiveRuntime: "server");
 
             UnblockWebAssemblyResourceLoad();
+
+            if (suppressEnhancedNavigation)
+            {
+                RenderWebAssemblyComponentAndWaitForWebAssemblyRuntime(returnUrl: Browser.Url);
+            }
+
             Browser.Navigate().Refresh();
 
             RenderComponentsWithPersistentStateAndValidate(suppressEnhancedNavigation, mode, renderMode, streaming, interactiveRuntime: "wasm");
@@ -123,16 +129,19 @@ public async Task StateIsProvidedEveryTimeACircuitGetsCreated(string streaming)
         }
         Browser.Click(By.Id("page-with-components-link"));
 
-        RenderComponentsWithPersistentStateAndValidate(suppresEnhancedNavigation: false, mode, typeof(InteractiveServerRenderMode), streaming);
+        RenderComponentsWithPersistentStateAndValidate(suppressEnhancedNavigation: false, mode, typeof(InteractiveServerRenderMode), streaming);
         Browser.Click(By.Id("page-no-components-link"));
         // Ensure that the circuit is gone.
         await Task.Delay(1000);
         Browser.Click(By.Id("page-with-components-link-and-state"));
-        RenderComponentsWithPersistentStateAndValidate(suppresEnhancedNavigation: false, mode, typeof(InteractiveServerRenderMode), streaming, stateValue: "other");
+        RenderComponentsWithPersistentStateAndValidate(suppressEnhancedNavigation: false, mode, typeof(InteractiveServerRenderMode), streaming, stateValue: "other");
     }
 
     private void BlockWebAssemblyResourceLoad()
     {
+        // Clear local storage so that the resource hash is not found
+        ((IJavaScriptExecutor)Browser).ExecuteScript("localStorage.clear()");
+
         ((IJavaScriptExecutor)Browser).ExecuteScript("sessionStorage.setItem('block-load-boot-resource', 'true')");
 
         // Clear caches so that we can block the resource load
@@ -145,7 +154,7 @@ private void UnblockWebAssemblyResourceLoad()
     }
 
     private void RenderComponentsWithPersistentStateAndValidate(
-        bool suppresEnhancedNavigation,
+        bool suppressEnhancedNavigation,
         string mode,
         Type renderMode,
         string streaming,
@@ -154,7 +163,7 @@ private void RenderComponentsWithPersistentStateAndValidate(
     {
         stateValue ??= "restored";
         // No need to navigate if we are using enhanced navigation, the tests will have already navigated to the page via a link.
-        if (suppresEnhancedNavigation)
+        if (suppressEnhancedNavigation)
         {
             // In this case we suppress auto start to check some server side state before we boot Blazor.
             if (streaming == null)
@@ -232,6 +241,18 @@ private void AssertPageState(
         }
     }
 
+    private void RenderWebAssemblyComponentAndWaitForWebAssemblyRuntime(string returnUrl = null)
+    {
+        Navigate("subdir/persistent-state/page-with-webassembly-interactivity");
+
+        Browser.Equal("True", () => Browser.FindElement(By.Id("is-interactive-counter")).Text);
+
+        if (returnUrl is not null)
+        {
+            Navigate(returnUrl);
+        }
+    }
+
     private void SuppressEnhancedNavigation(bool shouldSuppress)
         => EnhancedNavigationTestUtil.SuppressEnhancedNavigation(this, shouldSuppress);
 }

src/Components/test/E2ETest/Tests/StatePersistenceTest.cs

@@ -21,10 +21,8 @@
         const enableClassicInitializers = sessionStorage.getItem('enable-classic-initializers') === 'true';
         const suppressEnhancedNavigation = sessionStorage.getItem('suppress-enhanced-navigation') === 'true';
         const blockLoadBootResource = sessionStorage.getItem('block-load-boot-resource') === 'true';
-        const useLongWebAssemblyTimeout = sessionStorage.getItem('use-long-auto-timeout') === 'true';
         sessionStorage.removeItem('suppress-enhanced-navigation');
         sessionStorage.removeItem('block-load-boot-resource');
-        sessionStorage.removeItem('use-long-auto-timeout');
         sessionStorage.removeItem('enable-classic-initializers');
 
         let loadBootResourceUnblocked = null;
@@ -34,6 +32,9 @@
             });
         }
 
+        let maxParallelResourceDownloadCount = 0;
+        let currentParallelResourceDownloadCount = 0;
+
         function callBlazorStart() {
             Blazor.start({
                 ssr: {
@@ -55,19 +56,21 @@
                                 // The following allows us to arbitrarily delay the loading of WebAssembly resources.
                                 // This is useful for guaranteeing that auto mode components will fall back on
                                 // using Blazor server.
+                                currentParallelResourceDownloadCount++;
                                 return fetch(`${document.baseURI}WasmMinimal/_framework/${name}?`, {
                                     method: "GET",
                                 }).then(async (response) => {
+                                    if (currentParallelResourceDownloadCount > maxParallelResourceDownloadCount) {
+                                        maxParallelResourceDownloadCount = currentParallelResourceDownloadCount;
+                                        window['__aspnetcore__testing__max__parallel__resource__download__count'] = maxParallelResourceDownloadCount;
+                                    }
+                                    currentParallelResourceDownloadCount--;
                                     await loadBootResourceUnblocked;
                                     return response;
                                 });
                         }
                     },
                 },
-            }).then(() => {
-                if (useLongWebAssemblyTimeout) {
-                    Blazor._internal.loadWebAssemblyQuicklyTimeout = 10000000;
-                }
             }).then(() => {
                 const startedParagraph = document.createElement('p');
                 startedParagraph.id = 'blazor-started';

src/Components/test/testassets/Components.TestServer/RazorComponents/App.razor

@@ -100,6 +100,9 @@ else
     ComponentState _state = new(ImmutableArray<CounterInfo>.Empty, NextCounterId: 0);
     bool _isStreaming = false;
 
+    [CascadingParameter]
+    public HttpContext HttpContext { get; set; }
+
     [SupplyParameterFromQuery]
     public string? InitialState { get; set; }
 
@@ -109,13 +112,21 @@ else
     [SupplyParameterFromQuery]
     public bool DisableKeys { get; set; }
 
+    [SupplyParameterFromQuery]
+    public bool ClearSiteData { get; set; }
+
     protected override async Task OnInitializedAsync()
     {
         if (InitialState is not null)
         {
             _state = ReadStateFromJson(InitialState);
         }
 
+        if (ClearSiteData)
+        {
+            HttpContext.Response.Headers["Clear-Site-Data"] = "\"*\"";
+        }
+
         if (ShouldStream)
         {
             _isStreaming = true;

src/Components/test/testassets/Components.TestServer/RazorComponents/Components/InteractiveStreamingRenderingComponent.razor

@@ -0,0 +1,8 @@
+@page "/persistent-state/page-with-webassembly-interactivity"
+
+<p>
+    This page is used to ensure that the WebAssembly runtime is downloaded and available
+    so that WebAssembly interactivity will get used for components with the Auto render mode
+</p>
+
+<TestContentPackage.Counter @rendermode="RenderMode.InteractiveWebAssembly" IncrementAmount="1" IdSuffix="counter" />