Streaming SSR: DOM updating by SteveSandersonMS · Pull Request #47605 · dotnet/aspnetcore

SteveSandersonMS · 2023-04-07T12:47:56Z

Make the streaming SSR really work and update the UI properly.

@MackinnonBuck If you get a chance to review this that would be super helpful! I'm sorry it's such a big PR - I'm trying to get it in before I'm off for a few days. Once again there's a lot of refactoring and nudging layers around within the new Endpoints code to make this fit in neatly.

Also quite a bit of new stuff here is just infrastructure for serving blazor.web.js and for a new E2E test app.

The other major reason why there are so many changes here is this: since this involves setting up a whole new area of E2E tests, I fixed some longstanding quality-of-life issues for people working on the E2E tests here.

Fixed VS's understanding of the Components.TestServer by renaming its directory to match the project name.
- Without this, it couldn't auto-launch the browser, didn't take you to the homepage listing the test cases, and couldn't auto-shut-down the old version of the test server each time you rebuild (so it would get stuck saying files were in use).
- All those problems are gone now and it works like a normal web app.
- Most of the "files changed" in this PR are just these renames
Changed Components.TestServer so that, when you launch it manually, it uses deterministic port numbers instead of randomizing on every launch. Now you can just reload your existing browser tab :)
Fixed the VS FastUpToDateCheck rule for M.A.C.WebAssembly.Authorization. Previously it was stuck always thinking that project needed to be rebuilt, causing a whole chain of extra projects to get rebuilt every time you tried to restart the E2E tests, even though those other projects hadn't changed.

…will be able to customize HTML rendering

…an vary its output based on this

…nent to a readonly struct

…treaming components

…for blazor.server.js

We used to serve sourcemaps when working on this repo. Not sure when that got broken.

…g render batch (to avoid duplicated HTML)

…treaming output into SectionOutlet This automatically deals with HeadOutlet as a special case

…gh it actually is already (transitively). This did not affect CLI builds.

…ly.Authentication needs to be rebuilt

It was so inconvenient not being able to just reload the existing browser tab

… issues with launching browser.

…tches

MackinnonBuck

LGTM!

javiercn · 2023-04-14T15:59:06Z

+        });
+        app.UseStaticFiles(options);
+
+        var blazorEndpoint = endpoints.Map("/_framework/blazor.web.js", app.Build())


How do we feel about this being just blazor.js and leaving the other more specialized flavors with a suffix.

javiercn · 2023-04-14T16:01:22Z

+        var blazorEndpoint = endpoints.Map("/_framework/blazor.web.js", app.Build())
+            .WithDisplayName("Blazor web static files");
+
+        blazorEndpoint.Add((builder) => ((RouteEndpointBuilder)builder).Order = int.MinValue);


Just -1 is ok here, FYI.

It's ok to give a way to override the endpoint as long as it doesn't happen by accident.

javiercn · 2023-04-14T16:04:58Z

        return GetOrCreateDataSource<TRootComponent>(endpoints).DefaultBuilder;
    }

+    private static void AddBlazorWebJsEndpoint(IEndpointRouteBuilder endpoints)


We should add these endpoints to the data source, but ideally, we just make these files static web assets, and they get placed on your project. (not asking to do anything, just pointing it out).

javiercn · 2023-04-14T16:08:49Z

+            var bufSizeRequired = count * Marshal.SizeOf<ComponentIdAndDepth>();
+            var componentIdsInDepthOrder = bufSizeRequired < 1024
+                ? MemoryMarshal.Cast<byte, ComponentIdAndDepth>(stackalloc byte[bufSizeRequired])
+                : new ComponentIdAndDepth[count];


javiercn · 2023-04-14T16:11:10Z

+            for (var i = 0; i < count; i++)
+            {
+                var componentId = renderBatch.UpdatedComponents.Array[i].ComponentId;
+                componentIdsInDepthOrder[i] = new(componentId, GetComponentDepth(componentId));


Is it worth keeping the depth inside the EndpointComponentState to avoid this look-up?

javiercn · 2023-04-14T16:44:03Z

+function findStreamingMarkers(componentIdAsString: string): { startMarker: Comment, endMarker: Comment } | null {
+  // Find start marker
+  const expectedStartText = `bl:${componentIdAsString}`;
+  const iterator = document.createNodeIterator(document, NodeFilter.SHOW_COMMENT);
+  let startMarker: Comment | null = null;
+  while (startMarker = iterator.nextNode() as Comment | null) {
+    if (startMarker.textContent === expectedStartText) {
+      break;
+    }
+  }
+
+  if (!startMarker) {
+    return null;
+  }
+
+  // Find end marker
+  const expectedEndText = `/bl:${componentIdAsString}`;
+  let endMarker: Comment | null = null;
+  while (endMarker = iterator.nextNode() as Comment | null) {
+    if (endMarker.textContent === expectedEndText) {
+      break;
+    }
+  }
+
+  return endMarker ? { startMarker, endMarker } : null;
+}


If this is inside a template, are there any reasons why we can't just wrap every update inside an element and just iterate over a flat list of children? (without needing to find marker comments)

javiercn · 2023-04-14T16:46:23Z

+
+namespace Microsoft.AspNetCore.Components.E2ETests.ServerExecutionTests;
+
+public class StreamingRenderingTest : ServerTestBase<BasicTestAppServerSiteFixture<RazorComponentEndpointsStartup>>


I think we have code to handle redirects, could we add an E2E test to make sure that works?

SteveSandersonMS added 13 commits April 5, 2023 12:46

Merge HtmlComponentWriter into StaticHtmlRenderer so that subclasses …

7bf170a

…will be able to customize HTML rendering

Rename files

ddc77ce

Move most of the streaming concerns into EndpointHtmlRenderer so it c…

619db82

…an vary its output based on this

Emit streaming boundary markers, but only for streaming components

21b0726

Tests for streaming boundary markers

8c87690

Can now simplify by removing HtmlComponentBase and changing HtmlCompo…

e31173e

…nent to a readonly struct

Further clarify by renaming it to HtmlRootComponent

8c0f5c3

Move StreamRenderingAttribute to .Web namespace

221ec1e

Make HeadOutlet stream so that page title (etc) can be updated from s…

5902f0d

…treaming components

Add blazor.web.js and embed/serve it using the same patterns we have …

c32a59a

…for blazor.server.js

Serve sourcemaps (but in debug builds only)

11cc67f

We used to serve sourcemaps when working on this repo. Not sure when that got broken.

Render only the minimal subset of updated components in each streamin…

6c30a75

…g render batch (to avoid duplicated HTML)

Move StreamRenderingAttribute into M.A.Components so we can support s…

44dfa69

…treaming output into SectionOutlet This automatically deals with HeadOutlet as a special case

ghost added the area-blazor Includes: Blazor, Razor Components label Apr 7, 2023

SteveSandersonMS added 14 commits April 7, 2023 13:59

Fix VS complaining that SignalR was not referenced in tests even thou…

4136154

…gh it actually is already (transitively). This did not affect CLI builds.

Fix longstanding build issue whereby VS always thinks M.A.C.WebAssemb…

56accb7

…ly.Authentication needs to be rebuilt

Adding a Blazor United flavour of TestServer

33e2e6b

When starting E2E tests manually, don't randomize the port numbers

0a91f89

It was so inconvenient not being able to just reload the existing browser tab

Fix response content type

59149a3

Beginning content for new test app

642aa3d

Rename TestServer directory to match project name. Fixes longstanding…

f611e72

… issues with launching browser.

Update CodeCheck.ps1

20ce470

Add/update prebuilt JS files

b2e71c6

Add streaming rendering E2E test app code

71ac235

Flush response after each streaming update so we can send multiple ba…

ebbd352

…tches

Fix sln following rename

61479e4

E2E tests

51e9029

Fix slnf

8f6a88c

SteveSandersonMS marked this pull request as ready for review April 7, 2023 18:17

SteveSandersonMS requested a review from a team as a code owner April 7, 2023 18:17

SteveSandersonMS requested review from a team and wtgodbe as code owners April 7, 2023 18:17

MackinnonBuck approved these changes Apr 7, 2023

View reviewed changes

SteveSandersonMS merged commit a419b22 into main Apr 7, 2023

SteveSandersonMS deleted the stevesa/streaming-ssr-dom-updating branch April 7, 2023 22:43

ghost added this to the 8.0-preview4 milestone Apr 7, 2023

SteveSandersonMS mentioned this pull request Apr 10, 2023

Streaming rendering #46352

Closed

javiercn reviewed Apr 14, 2023

View reviewed changes

NetherGranite mentioned this pull request Mar 29, 2026

Fix serving of blazor.web.js and blazor.server.js under the original static assets model #66059

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Streaming SSR: DOM updating#47605

Streaming SSR: DOM updating#47605
SteveSandersonMS merged 27 commits intomainfrom
stevesa/streaming-ssr-dom-updating

SteveSandersonMS commented Apr 7, 2023 •

edited

Loading

Uh oh!

MackinnonBuck left a comment

Uh oh!

javiercn Apr 14, 2023

Uh oh!

javiercn Apr 14, 2023

Uh oh!

javiercn Apr 14, 2023

Uh oh!

javiercn Apr 14, 2023

Uh oh!

javiercn Apr 14, 2023

Uh oh!

javiercn Apr 14, 2023

Uh oh!

javiercn Apr 14, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants


		namespace Microsoft.AspNetCore.Components.E2ETests.ServerExecutionTests;

		public class StreamingRenderingTest : ServerTestBase<BasicTestAppServerSiteFixture<RazorComponentEndpointsStartup>>

Conversation

SteveSandersonMS commented Apr 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MackinnonBuck left a comment

Choose a reason for hiding this comment

Uh oh!

javiercn Apr 14, 2023

Choose a reason for hiding this comment

Uh oh!

javiercn Apr 14, 2023

Choose a reason for hiding this comment

Uh oh!

javiercn Apr 14, 2023

Choose a reason for hiding this comment

Uh oh!

javiercn Apr 14, 2023

Choose a reason for hiding this comment

Uh oh!

javiercn Apr 14, 2023

Choose a reason for hiding this comment

Uh oh!

javiercn Apr 14, 2023

Choose a reason for hiding this comment

Uh oh!

javiercn Apr 14, 2023

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

SteveSandersonMS commented Apr 7, 2023 •

edited

Loading