[Blazor] Prerendered state #50742

javiercn · 2023-09-15T20:48:50Z

[Blazor] Adds support for persting prerendered state on Blazor Web applications.

Persists state both for server and webassembly as necessary.
Initializes the state when a given interactive runtime is initialized and renders the first set of components.
- On WebAssembly, this is the first time the app starts.
- On Server this happens every time a circuit starts.
The state is available during the first render, until the components reach quiescence.

The approach we follow is different for server and webassembly:

On Server, we support initializing the circuit with an empty set of descriptors and in that case, we delay initialization until the first UpdateRootComponents call is issued.
- This is because it's hard to deal with the security constraints imposed by starting a new circuit multiple times, and its easier to handle them within UpdateRootComponents. We might switch this approach in the future to go through StartCircuit too.
On WebAssembly, we query for the initial set of webassembly components when we are starting the runtime in a Blazor Web Scenario.
- We do this because Blazor WebAssembly offers a programatic API to render root components at a given location defined by their selectors, so we need to make sure that those components can receive state at the same time the initial set of WebAssembly components added to the page.

There are a set of tests validating different behaviors with regards to enhanced navigation and streaming rendering, as well as making sure that auto mode can access the state on Server and WebAssembly, and that Server gets new state every time a circuit is opened.

MackinnonBuck

The approach looks great to me 👍

SteveSandersonMS · 2023-09-18T09:31:57Z

src/Components/Components/src/IPersistentComponentStateStore.cs

+    /// </summary>
+    /// <param name="renderMode">The <see cref="IComponentRenderMode"/> in question.</param>
+    /// <returns><c>true</c> if the render mode is supported by the store, otherwise <c>false</c>.</returns>
+    bool SupportsRenderMode(IComponentRenderMode renderMode) => true;


Adding an interface member, even with a default implementation, is technically considered a breaking change as per https://learn.microsoft.com/en-us/dotnet/core/compatibility/library-change-rules but that doc isn't specific about the cases where it can fail. Perhaps it's fine here.

I think it's fine in this case, alternatively, we can do this with a callback or a separate interface.

src/Components/Components/src/RegistrationContext.cs

src/Components/Components/src/PersistenceContext.cs

src/Components/Components/src/Infrastructure/ComponentStatePersistenceManager.cs

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

src/Components/Endpoints/src/RazorComponentEndpointInvoker.cs

SteveSandersonMS · 2023-09-18T10:10:53Z

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

+
+        if (ssrRenderBoundary is null)
+        {
+            throw new InvalidOperationException("Cannot infer render mode.");


This seems like a bug. For SSR components, there will be no enclosing boundary. How come this doesn't throw in practice? Are there tests covering what happens if purely SSR components try to persist state?

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

src/Components/Endpoints/src/Rendering/SSRRenderModeBoundary.cs

src/Components/Server/src/Circuits/CircuitFactory.cs

src/Components/Server/src/Circuits/CircuitHost.cs

SteveSandersonMS · 2023-09-18T10:19:49Z

src/Components/Server/src/Circuits/CircuitHost.cs

+                                Log.InvalidComponentTypeForUpdate(_logger, message: "Component type mismatch.");
+                            }
+
+                            _ = Renderer.UpdateRootComponentAsync(operation.ComponentId.Value, descriptor.Parameters);


Why is it OK to discard the task here?

Any exception that happens will be dispatched through the UnhandledExceptionHandler in the remote renderer

OK, could you add a comment to that effect?

SteveSandersonMS · 2023-09-18T10:21:10Z

src/Components/Server/src/Circuits/CircuitHost.cs

+                        }
+                    }
+
+                    pendingTasks = new Task[operations.Length];


The use of an array, rather than List<Task>, is pretty surprising. There will often be gaps in the array then, since some of the operations don't add tasks. Why not use List<Task>, at least to avoid forcing future devs to figure out if the gaps serve some purpose?

We are on the first update, and we just validated that all operations are Add, so we know the exact number of tasks we need to capture and there won't be any gaps.

Oh right, I see. It would be more obvious if the variable name was pendingTasksForFirstRender rather than just pendingTasks, so it's clearer the code below behaves how it does due to the assumptions in the code above.

SteveSandersonMS · 2023-09-18T10:23:13Z

src/Components/Server/src/ComponentHub.cs

+    {
+        if (!_serverComponentSerializer.TryDeserializeRootComponentOperations(serializedComponentOperations, out var operations))
+        {
+            // Return error


SteveSandersonMS · 2023-09-18T10:24:56Z

src/Components/Shared/src/DefaultAntiforgeryStateProvider.cs

@@ -25,7 +26,7 @@ public DefaultAntiforgeryStateProvider(PersistentComponentState state)
        {
            state.PersistAsJson(PersistenceKey, _currentToken);
            return Task.CompletedTask;
-        });
+        }, new InteractiveAutoRenderMode());


Does this mean we're going to emit prerendered state for WebAssembly even if you're not using WebAssembly? In fact, even if you're not using any interactive rendering at all?

No, it's covered in a later commit, but essentially if you only do AddWebAssemblyRenderMode or AddServerRenderMode we only emit the comment for webassembly or server respectively.

If you have declared that you are using both, then we will emit it. I haven't done it, but we can look at the set of actual render modes that a component used during a request and narrow down to a single render mode if possible too, in that situation.

The point here, is that auto means, "wherever it's actually needed" as opposed to all locations.

src/Components/Shared/src/RootComponentTypeCache.cs

src/Components/WebAssembly/WebAssembly/src/Hosting/WebAssemblyHost.cs

SteveSandersonMS · 2023-09-18T10:36:44Z

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

+
+    private void BlockWebAssemblyResourceLoad()
+    {
+        ((IJavaScriptExecutor)Browser).ExecuteScript("sessionStorage.setItem('block-load-boot-resource', 'true')");


What is this used for? I can't see anything that reads the value.

It forces the app to start on Blazor Server when auto is enabled on the page. Other similar tests follow this approach.

src/Components/test/testassets/Components.TestServer/Components - Backup.TestServer.csproj

src/Components/test/testassets/Components.TestServer/Components.TestServer.csproj

src/Components/test/testassets/Components.TestServer/Properties/launchSettings.json

src/Components/test/testassets/Components.TestServer/RazorComponentEndpointsStartup.cs

...nts/test/testassets/Components.TestServer/RazorComponents/Pages/PersistStateComponents.razor

...estassets/Components.TestServer/RazorComponents/Pages/PersistentState/EndStreamingPage.razor

...ssets/TestContentPackage/PersistentComponents/NonStreamingComponentWithPersistentState.razor

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

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

javiercn · 2023-09-18T11:16:52Z

src/Components/Server/src/Circuits/ServerComponentDeserializer.cs

@@ -270,6 +270,74 @@ private bool IsWellFormedServerComponent(ComponentMarker record)
        return (componentDescriptor, serverComponent);
    }

+    public bool TryDeserializeRootComponentOperations(string serializedComponentOperations, out (RootComponentOperation, ComponentDescriptor?)[] operations)


We should check for the uniqueness of the Update/Delete operations to ensure that there is at most one update/delete per component ID.

SteveSandersonMS

Excellent! I understand there are still some tests to add but we've been through this in enough detail now so I'm fine with approving. Please let me know if anything meaningful still has to change about the runtime code.

…plications. Persists state both for server and webassembly as necessary. Initializes the state when a given interactive runtime is initialized and renders the first set of components. On WebAssembly, this is the first time the app starts. On Server this happens every time a circuit starts. The state is available during the first render, until the components reach quiescence. The approach we follow is different for server and webassembly: On Server, we support initializing the circuit with an empty set of descriptors and in that case, we delay initialization until the first UpdateRootComponents call is issued. This is because it's hard to deal with the security constraints imposed by starting a new circuit multiple times, and its easier to handle them within UpdateRootComponents. We might switch this approach in the future to go through StartCircuit too. On WebAssembly, we query for the initial set of webassembly components when we are starting the runtime in a Blazor Web Scenario. We do this because Blazor WebAssembly offers a programatic API to render root components at a given location defined by their selectors, so we need to make sure that those components can receive state at the same time the initial set of WebAssembly components added to the page. There are a set of tests validating different behaviors with regards to enhanced navigation and streaming rendering, as well as making sure that auto mode can access the state on Server and WebAssembly, and that Server gets new state every time a circuit is opened.

marinasundstrom · 2023-09-18T18:44:04Z

I'm running the test host, but I can't figure out how to navigate to the page that is testing this. All I get is /subdir, and there it is not included. What do I need to do?

* Revert "Remove hardcoded System.Security.Cryptography.Xml version (#48029)" (#50723) This reverts commit 42d14c4. * [Blazor] Prerendered state (#50742) [Blazor] Adds support for persting prerendered state on Blazor Web applications. * Persists state both for server and webassembly as necessary. * Initializes the state when a given interactive runtime is initialized and renders the first set of components. * On WebAssembly, this is the first time the app starts. * On Server this happens every time a circuit starts. * The state is available during the first render, until the components reach quiescence. The approach we follow is different for server and webassembly: * On Server, we support initializing the circuit with an empty set of descriptors and in that case, we delay initialization until the first `UpdateRootComponents` call is issued. * This is because it's hard to deal with the security constraints imposed by starting a new circuit multiple times, and its easier to handle them within UpdateRootComponents. We might switch this approach in the future to go through `StartCircuit` too. * On WebAssembly, we query for the initial set of webassembly components when we are starting the runtime in a Blazor Web Scenario. * We do this because Blazor WebAssembly offers a programatic API to render root components at a given location defined by their selectors, so we need to make sure that those components can receive state at the same time the initial set of WebAssembly components added to the page. There are a set of tests validating different behaviors with regards to enhanced navigation and streaming rendering, as well as making sure that auto mode can access the state on Server and WebAssembly, and that Server gets new state every time a circuit is opened. * Make IEmailSender more customizable (#50301) * Make IEmailSender more customizable * Remove unnecessary metadata * Add TUser parameter * React to API review feedback * Fix IdentitySample.DefaultUI * Update branding to RTM (#50799) --------- Co-authored-by: Igor Velikorossov <[email protected]> Co-authored-by: Javier Calvarro Nelson <[email protected]> Co-authored-by: Stephen Halter <[email protected]> Co-authored-by: William Godbe <[email protected]>

ghost added the area-blazor Includes: Blazor, Razor Components label Sep 15, 2023

MackinnonBuck reviewed Sep 15, 2023

View reviewed changes

javiercn force-pushed the javiercn/enhanced-nav-server-update-root-components branch from 26212fd to bbb0e5d Compare September 16, 2023 10:42

javiercn marked this pull request as ready for review September 17, 2023 20:23

javiercn requested review from a team as code owners September 17, 2023 20:23