Fix SSR page rendering intermediate state instead of the end state of components (#52823) (#52943)

* finish all non streaming pending tasks before rendering ssr page

* fix tests

* refactor fix for the tests

* call Dispatcher.AssertAccess() in AddPendingTask()

* add e2e test

* fix post request await all non streaming pending tasks; add e2e test

* move NonStreamingPendingTasks class to another file

* save WaitForNonStreamingPendingTasks into a variable

* Update src/Components/test/testassets/Components.TestServer/RazorComponents/Components/ChildComponentThatDelaysLoading.razor



* Update src/Components/test/testassets/Components.TestServer/RazorComponents/Components/ParentComponentThatDelaysLoading.razor



---------

Co-authored-by: Javier Calvarro Nelson <[email protected]>

Author: surayya-MS

src/Components/Components/src/RenderTree/Renderer.cs

@@ -593,7 +593,11 @@ protected virtual void AddPendingTask(ComponentState? componentState, Task task)
     {
         // The pendingTasks collection is only used during prerendering to track quiescence,
         // so will be null at other times.
-        _pendingTasks?.Add(task);
+        if (_pendingTasks is { } tasks)
+        {
+            Dispatcher.AssertAccess();
+            tasks.Add(task);
+        }
     }
 
     internal void AssignEventHandlerId(int renderedByComponentId, ref RenderTreeFrame frame)

src/Components/Endpoints/src/RazorComponentEndpointInvoker.cs

@@ -107,7 +107,7 @@ await EndpointHtmlRenderer.InitializeStandardComponentServicesAsync(
                     return;
                 }
 
-                await Task.WhenAll(_renderer.NonStreamingPendingTasks);
+                await _renderer.WaitForNonStreamingPendingTasks();
             }
             catch (NavigationException ex)
             {

src/Components/Endpoints/src/Rendering/EndpointHtmlRenderer.Prerendering.cs

@@ -161,8 +161,28 @@ private async Task WaitForResultReady(bool waitForQuiescence, PrerenderedCompone
         }
         else if (_nonStreamingPendingTasks.Count > 0)
         {
-            // Just wait for quiescence of the non-streaming subtrees
-            await Task.WhenAll(_nonStreamingPendingTasks);
+            await WaitForNonStreamingPendingTasks();
+        }
+    }
+
+    public Task WaitForNonStreamingPendingTasks()
+    {
+        return NonStreamingPendingTasksCompletion ??= Execute();
+
+        async Task Execute()
+        {
+            while (_nonStreamingPendingTasks.Count > 0)
+            {
+                // Create a Task that represents the remaining ongoing work for the rendering process
+                var pendingWork = Task.WhenAll(_nonStreamingPendingTasks);
+
+                // Clear all pending work.
+                _nonStreamingPendingTasks.Clear();
+
+                // new work might be added before we check again as a result of waiting for all
+                // the child components to finish executing SetParametersAsync
+                await pendingWork;
+            }
         }
     }
 

src/Components/Endpoints/src/Rendering/EndpointHtmlRenderer.cs

@@ -131,7 +131,7 @@ protected override void AddPendingTask(ComponentState? componentState, Task task
     }
 
     // For tests only
-    internal List<Task> NonStreamingPendingTasks => _nonStreamingPendingTasks;
+    internal Task? NonStreamingPendingTasksCompletion;
 
     protected override Task UpdateDisplayAsync(in RenderBatch renderBatch)
     {

src/Components/Endpoints/test/RazorComponentResultTest.cs

@@ -336,10 +336,11 @@ public async Task StreamingRendering_IsOffByDefault_AndCanBeEnabledForSubtree()
     {
         // Arrange
         var testContext = PrepareVaryStreamingScenariosTests();
-        var initialOutputTask = Task.WhenAll(testContext.Renderer.NonStreamingPendingTasks);
+        var initialOutputTask = testContext.Renderer.NonStreamingPendingTasksCompletion;
 
         // Act/Assert: Even if all other blocking tasks complete, we don't produce output until the top-level
         // nonstreaming component completes
+        Assert.NotNull(initialOutputTask);
         testContext.WithinNestedNonstreamingRegionTask.SetResult();
         await Task.Yield(); // Just to show it's still not completed after
         Assert.False(initialOutputTask.IsCompleted);
@@ -368,10 +369,11 @@ public async Task StreamingRendering_CanBeDisabledForSubtree()
     {
         // Arrange
         var testContext = PrepareVaryStreamingScenariosTests();
-        var initialOutputTask = Task.WhenAll(testContext.Renderer.NonStreamingPendingTasks);
+        var initialOutputTask = testContext.Renderer.NonStreamingPendingTasksCompletion;
 
         // Act/Assert: Even if all other nonblocking tasks complete, we don't produce output until
         // the component in the nonstreaming subtree is quiescent
+        Assert.NotNull(initialOutputTask);
         testContext.TopLevelComponentTask.SetResult();
         await Task.Yield(); // Just to show it's still not completed after
         Assert.False(initialOutputTask.IsCompleted);

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

@@ -50,4 +50,21 @@ public async Task CanUseHttpContextRequestAndResponse()
         var response = await new HttpClient().GetAsync(Browser.Url);
         Assert.Equal(HttpStatusCode.Created, response.StatusCode);
     }
+
+    [Fact]
+    public void RendersEndStateOfComponentsOnSSRPage()
+    {
+        Navigate($"{ServerPathBase}/ssr-page-that-delays-loading");
+        Browser.Equal("loaded child", () => Browser.Exists(By.Id("child")).Text);
+    }
+
+    [Fact]
+    public void PostRequestRendersEndStateOfComponentsOnSSRPage()
+    {
+        Navigate($"{ServerPathBase}/forms/post-form-with-component-that-delays-loading");
+
+        Browser.Exists(By.Id("submit-button")).Click();
+
+        Browser.Equal("loaded child", () => Browser.Exists(By.Id("child")).Text);
+    }
 }

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

@@ -0,0 +1,13 @@
+<p id="child">@childString</p>
+
+@code {
+    private string childString = "initial child";
+
+    protected override async Task OnInitializedAsync()
+    {
+        await Task.Yield();
+
+        childString = "loaded child";
+    }
+
+}

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

@@ -0,0 +1,21 @@
+@if (_loaded)
+{
+    <ChildComponentThatDelaysLoading />
+}
+
+@code {
+    private bool _loaded;
+
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+        _loaded = await Load();
+    }
+
+    private async Task<bool> Load()
+    {
+        await Task.Yield();
+
+        return true;
+    }
+}

src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/PostFormWithComponentThatDelaysLoading.razor

@@ -0,0 +1,19 @@
+@page "/forms/post-form-with-component-that-delays-loading"
+@using Microsoft.AspNetCore.Components.Forms
+
+<h3>Post Form With Component That Delays Loading</h3>
+
+@if (_render)
+{
+    <ParentComponentThatDelaysLoading />
+}
+
+<form @onsubmit="@(() => _render = true)" @formname="myform" method="post">
+    <AntiforgeryToken />
+    <button id="submit-button">Submit</button>
+</form>
+
+@code
+{
+    bool _render;
+}

src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/SSRPageThatDelaysLoading.razor

@@ -0,0 +1,5 @@
+@page "/ssr-page-that-delays-loading"
+<h1>SSR page that delays loading</h1>
+
+<ParentComponentThatDelaysLoading />
+