[Blazor] Improvements to the interaction between SSR and interactive rendering

src/Components/Endpoints/src/DependencyInjection/ServerComponentSerializer.cs

@@ -18,10 +18,10 @@ public ServerComponentSerializer(IDataProtectionProvider dataProtectionProvider)
             .CreateProtector(ServerComponentSerializationSettings.DataProtectionProviderPurpose)
             .ToTimeLimitedDataProtector();
 
-    public ServerComponentMarker SerializeInvocation(ServerComponentInvocationSequence invocationId, Type type, ParameterView parameters, bool prerendered)
+    public ServerComponentMarker SerializeInvocation(ServerComponentInvocationSequence invocationId, Type type, ParameterView parameters, string key, bool prerendered)
     {
         var (sequence, serverComponent) = CreateSerializedServerComponent(invocationId, type, parameters);
-        return prerendered ? ServerComponentMarker.Prerendered(sequence, serverComponent) : ServerComponentMarker.NonPrerendered(sequence, serverComponent);
+        return prerendered ? ServerComponentMarker.Prerendered(sequence, serverComponent, key) : ServerComponentMarker.NonPrerendered(sequence, serverComponent, key);
     }
 
     private (int sequence, string payload) CreateSerializedServerComponent(

src/Components/Endpoints/src/DependencyInjection/WebAssemblyComponentSerializer.cs

@@ -8,7 +8,7 @@ namespace Microsoft.AspNetCore.Components.Endpoints;
 // See the details of the component serialization protocol in WebAssemblyComponentDeserializer.cs on the Components solution.
 internal sealed class WebAssemblyComponentSerializer
 {
-    public static WebAssemblyComponentMarker SerializeInvocation(Type type, ParameterView parameters, bool prerendered)
+    public static WebAssemblyComponentMarker SerializeInvocation(Type type, ParameterView parameters, string? key, bool prerendered)
     {
         var assembly = type.Assembly.GetName().Name ?? throw new InvalidOperationException("Cannot prerender components from assemblies with a null name");
         var typeFullName = type.FullName ?? throw new InvalidOperationException("Cannot prerender component types with a null name");
@@ -19,8 +19,8 @@ public static WebAssemblyComponentMarker SerializeInvocation(Type type, Paramete
         var serializedDefinitions = Convert.ToBase64String(JsonSerializer.SerializeToUtf8Bytes(definitions, WebAssemblyComponentSerializationSettings.JsonSerializationOptions));
         var serializedValues = Convert.ToBase64String(JsonSerializer.SerializeToUtf8Bytes(values, WebAssemblyComponentSerializationSettings.JsonSerializationOptions));
 
-        return prerendered ? WebAssemblyComponentMarker.Prerendered(assembly, typeFullName, serializedDefinitions, serializedValues) :
-            WebAssemblyComponentMarker.NonPrerendered(assembly, typeFullName, serializedDefinitions, serializedValues);
+        return prerendered ? WebAssemblyComponentMarker.Prerendered(assembly, typeFullName, serializedDefinitions, serializedValues, key) :
+            WebAssemblyComponentMarker.NonPrerendered(assembly, typeFullName, serializedDefinitions, serializedValues, key);
     }
 
     internal static void AppendPreamble(TextWriter writer, WebAssemblyComponentMarker record)

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

@@ -134,8 +134,12 @@ private void SendBatchAsStreamingUpdate(in RenderBatch renderBatch, TextWriter w
                 writer.Write(componentId);
                 writer.Write("\">");
 
-                // We don't need boundary markers at the top-level since the info is on the <template> anyway.
-                WriteComponentHtml(componentId, writer, allowBoundaryMarkers: false);
+                // We don't need boundary markers at the top-level since the info is on the <template> anyway,
+                // so it's fine that the logic in 'RenderChildComponent' doesn't run for the top-level components.
+                // We can also be sure that SSR render boundary components will only get updated by their ancestors,
+                // (they don't re-render on their own), so the logic to output component comments will always run
+                // for boundary components.
+                WriteComponentHtml(componentId, writer);
 
                 writer.Write("</template>");
             }
@@ -182,25 +186,22 @@ private static void HandleNavigationAfterResponseStarted(TextWriter writer, stri
         writer.Write("</template></blazor-ssr>");
     }
 
-    protected override void WriteComponentHtml(int componentId, TextWriter output)
-        => WriteComponentHtml(componentId, output, allowBoundaryMarkers: true);
-
-    private void WriteComponentHtml(int componentId, TextWriter output, bool allowBoundaryMarkers)
+    protected override void RenderChildComponent(TextWriter output, ref RenderTreeFrame componentFrame)
     {
+        var componentId = componentFrame.ComponentId;
         _visitedComponentIdsInCurrentStreamingBatch?.Add(componentId);
 
         var componentState = (EndpointComponentState)GetComponentState(componentId);
-        var renderBoundaryMarkers = allowBoundaryMarkers && componentState.StreamRendering;
+        var renderBoundaryMarkers = componentState.StreamRendering;
 
         // TODO: It's not clear that we actually want to emit the interactive component markers using this
         // HTML-comment syntax that we've used historically, plus we likely want some way to coalesce both
         // marker types into a single thing for auto mode (the code below emits both separately for auto).
         // It may be better to use a custom element like <blazor-component ...>[prerendered]<blazor-component>
         // so it's easier for the JS code to react automatically whenever this gets inserted or updated during
         // streaming SSR or progressively-enhanced navigation.
-
         var (serverMarker, webAssemblyMarker) = componentState.Component is SSRRenderModeBoundary boundary
-            ? boundary.ToMarkers(_httpContext)
+            ? boundary.ToMarkers(_httpContext, ref componentFrame)
             : default;
 
         if (serverMarker.HasValue)
@@ -225,7 +226,7 @@ private void WriteComponentHtml(int componentId, TextWriter output, bool allowBo
             output.Write("-->");
         }
 
-        base.WriteComponentHtml(componentId, output);
+        WriteComponentHtml(componentId, output);
 
         if (renderBoundaryMarkers)
         {

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

@@ -1,7 +1,9 @@
 // Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
+using System.Globalization;
 using Microsoft.AspNetCore.Components.Rendering;
+using Microsoft.AspNetCore.Components.RenderTree;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Http;
 using Microsoft.Extensions.DependencyInjection;
@@ -92,11 +94,12 @@ private void Prerender(RenderTreeBuilder builder)
         builder.CloseComponent();
     }
 
-    public (ServerComponentMarker?, WebAssemblyComponentMarker?) ToMarkers(HttpContext httpContext)
+    public (ServerComponentMarker?, WebAssemblyComponentMarker?) ToMarkers(HttpContext httpContext, ref RenderTreeFrame frame)
     {
         var parameters = _latestParameters is null
             ? ParameterView.Empty
             : ParameterView.FromDictionary((IDictionary<string, object?>)_latestParameters);
+        var markerKey = GetMarkerKey(ref frame);
 
         ServerComponentMarker? serverMarker = null;
         if (_renderMode is ServerRenderMode or AutoRenderMode)
@@ -106,15 +109,24 @@ private void Prerender(RenderTreeBuilder builder)
             var serverComponentSerializer = httpContext.RequestServices.GetRequiredService<ServerComponentSerializer>();
 
             var invocationId = EndpointHtmlRenderer.GetOrCreateInvocationId(httpContext);
-            serverMarker = serverComponentSerializer.SerializeInvocation(invocationId, _componentType, parameters, _prerender);
+            serverMarker = serverComponentSerializer.SerializeInvocation(invocationId, _componentType, parameters, markerKey, _prerender);
         }
 
         WebAssemblyComponentMarker? webAssemblyMarker = null;
         if (_renderMode is WebAssemblyRenderMode or AutoRenderMode)
         {
-            webAssemblyMarker = WebAssemblyComponentSerializer.SerializeInvocation(_componentType, parameters, _prerender);
+            webAssemblyMarker = WebAssemblyComponentSerializer.SerializeInvocation(_componentType, parameters, markerKey, _prerender);
         }
 
         return (serverMarker, webAssemblyMarker);
     }
+
+    private string GetMarkerKey(ref RenderTreeFrame frame)
+    {
+        return HashCode.Combine(
+            _componentType.FullName,
+            frame.Sequence,
+            frame.ComponentKey)
+            .ToString("x", CultureInfo.InvariantCulture);
+    }
 }

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

@@ -64,12 +64,14 @@ public async ValueTask<CircuitHost> CreateCircuitHostAsync(
         var appLifetime = scope.ServiceProvider.GetRequiredService<ComponentStatePersistenceManager>();
         await appLifetime.RestoreStateAsync(store);
 
+        var serverComponentDeserializer = scope.ServiceProvider.GetRequiredService<IServerComponentDeserializer>();
         var jsComponentInterop = new CircuitJSComponentInterop(_options);
         var renderer = new RemoteRenderer(
             scope.ServiceProvider,
             _loggerFactory,
             _options,
             client,
+            serverComponentDeserializer,
             _loggerFactory.CreateLogger<RemoteRenderer>(),
             jsRuntime,
             jsComponentInterop);

src/Components/Server/src/Circuits/IServerComponentDeserializer.cs

@@ -1,11 +1,15 @@
 // Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
+using System.Diagnostics.CodeAnalysis;
+
 namespace Microsoft.AspNetCore.Components.Server;
 
 internal interface IServerComponentDeserializer
 {
     bool TryDeserializeComponentDescriptorCollection(
         string serializedComponentRecords,
         out List<ComponentDescriptor> descriptors);
+
+    bool TryDeserializeSingleComponentDescriptor(ServerComponentMarker record, [NotNullWhen(true)] out ComponentDescriptor? result);
 }

src/Components/Server/src/Circuits/RemoteRenderer.cs

@@ -3,7 +3,9 @@
 
 using System.Collections.Concurrent;
 using System.Diagnostics.CodeAnalysis;
+using System.Globalization;
 using System.Linq;
+using System.Text.Json;
 using Microsoft.AspNetCore.Components.RenderTree;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.SignalR;
@@ -21,6 +23,7 @@ internal partial class RemoteRenderer : WebRenderer
 
     private readonly CircuitClientProxy _client;
     private readonly CircuitOptions _options;
+    private readonly IServerComponentDeserializer _serverComponentDeserializer;
     private readonly ILogger _logger;
     internal readonly ConcurrentQueue<UnacknowledgedRenderBatch> _unacknowledgedRenderBatches = new ConcurrentQueue<UnacknowledgedRenderBatch>();
     private long _nextRenderId = 1;
@@ -39,13 +42,15 @@ public RemoteRenderer(
         ILoggerFactory loggerFactory,
         CircuitOptions options,
         CircuitClientProxy client,
+        IServerComponentDeserializer serverComponentDeserializer,
         ILogger logger,
         RemoteJSRuntime jsRuntime,
         CircuitJSComponentInterop jsComponentInterop)
         : base(serviceProvider, loggerFactory, jsRuntime.ReadJsonSerializerOptions(), jsComponentInterop)
     {
         _client = client;
         _options = options;
+        _serverComponentDeserializer = serverComponentDeserializer;
         _logger = logger;
 
         ElementReferenceContext = jsRuntime.ElementReferenceContext;
@@ -59,12 +64,90 @@ public Task AddComponentAsync(Type componentType, ParameterView parameters, stri
         return RenderRootComponentAsync(componentId, parameters);
     }
 
+    protected override int GetWebRendererId() => (int)WebRendererId.Server;
+
     protected override void AttachRootComponentToBrowser(int componentId, string domElementSelector)
     {
         var attachComponentTask = _client.SendAsync("JS.AttachComponent", componentId, domElementSelector);
         _ = CaptureAsyncExceptions(attachComponentTask);
     }
 
+    protected override void UpdateRootComponents(string operationsJson)
+    {
+        var operations = JsonSerializer.Deserialize<IEnumerable<RootComponentOperation<ServerComponentMarker>>>(
+            operationsJson,
+            ServerComponentSerializationSettings.JsonSerializationOptions);
+
+        foreach (var operation in operations)
+        {
+            switch (operation.Type)
+            {
+                case RootComponentOperationType.Add:
+                    AddRootComponent(operation);
+                    break;
+                case RootComponentOperationType.Update:
+                    UpdateRootComponent(operation);
+                    break;
+                case RootComponentOperationType.Remove:
+                    RemoveRootComponent(operation);
+                    break;
+            }
+        }
+
+        return;
+
+        void AddRootComponent(RootComponentOperation<ServerComponentMarker> operation)
+        {
+            if (operation.SelectorId is not { } selectorId)
+            {
+                Log.InvalidRootComponentOperation(_logger, operation.Type, message: "Missing selector ID.");
+                return;
+            }
+
+            if (!_serverComponentDeserializer.TryDeserializeSingleComponentDescriptor(operation.Marker, out var descriptor))
+            {
+                throw new InvalidOperationException("Failed to deserialize a component descriptor when adding a new root component.");
+            }
+
+            _ = AddComponentAsync(descriptor.ComponentType, descriptor.Parameters, selectorId.ToString(CultureInfo.InvariantCulture));
+        }
+
+        void UpdateRootComponent(RootComponentOperation<ServerComponentMarker> operation)
+        {
+            if (operation.ComponentId is not { } componentId)
+            {
+                Log.InvalidRootComponentOperation(_logger, operation.Type, message: "Missing component ID.");
+                return;
+            }
+
+            var componentState = GetComponentState(componentId);
+
+            if (!_serverComponentDeserializer.TryDeserializeSingleComponentDescriptor(operation.Marker, out var descriptor))
+            {
+                throw new InvalidOperationException("Failed to deserialize a component descriptor when updating an existing root component.");
+            }
+
+            if (descriptor.ComponentType != componentState.Component.GetType())
+            {
+                Log.InvalidRootComponentOperation(_logger, operation.Type, message: "Component type mismatch.");
+                return;
+            }
+
+            _ = RenderRootComponentAsync(componentId, descriptor.Parameters);
+        }
+
+        void RemoveRootComponent(RootComponentOperation<ServerComponentMarker> operation)
+        {
+            if (operation.ComponentId is not { } componentId)
+            {
+                Log.InvalidRootComponentOperation(_logger, operation.Type, message: "Missing component ID.");
+                return;
+            }
+
+            this.RemoveRootComponent(componentId);
+        }
+    }
+
     protected override void ProcessPendingRender()
     {
         if (_unacknowledgedRenderBatches.Count >= _options.MaxBufferedUnacknowledgedRenderBatches)
@@ -388,6 +471,9 @@ public static void CompletingBatchWithoutError(ILogger logger, long batchId, Tim
 
         [LoggerMessage(107, LogLevel.Debug, "The queue of unacknowledged render batches is full.", EventName = "FullUnacknowledgedRenderBatchesQueue")]
         public static partial void FullUnacknowledgedRenderBatchesQueue(ILogger logger);
+
+        [LoggerMessage(108, LogLevel.Debug, "The root component operation of type '{OperationType}' was invalid: {Message}", EventName = "InvalidRootComponentOperation")]
+        public static partial void InvalidRootComponentOperation(ILogger logger, RootComponentOperationType operationType, string message);
     }
 }