Avoid completely replacing the DOM when Blazor components are re-rendered after prerendering
Right now, after prerendering we replace the entire contents of the prerendered component with a fresh DOM copy created from scratch. This has several bad side-effects like: * Videos are stopped and restarted * Animations can be retriggered * The page can flicker if CSS is injected as part of the head contents. * LCP score suffers because (even though there is no significant visual change in most cases) the tools detect the interactive DOM insertion as the LCP element. Instead of replacing the contents of the DOM wholesale, we can do a best effort to reconciliate the DOM with the new rendered DOM when we are trying to apply the render batch. In an ideal scenario, a developer should be able to produce exact prerenders, meaning that the render after prerendering is identical to the prerendered one. In that case, the renderer would only need to "attach" event handlers to the appropriate nodes, leaving everything else the same. The renderer does not have to be perfect and handle all possible scenarios, it can impose strict limitations and "bail out" if it can't figure out how to reconcile a given DOM subtree by replacing that node wholesale. For example, the render can impose a strict order, suggesting that DOM children nodes in a given subtree must appear in the same order as the prerendered node (in other words, the renderer won't search for them, but iterate in order). A similar restriction might be imposed on attributes (which is not rare, since attributes are emitted in
Posted by javiercn on Jul 4, 2022, 7:20 AM
Tags
Related issues
Raise real-world problems, find people facing the same issue, and discuss solutions.2,500 issues0 comments
github (E-commerce)
proposal: cmd/cgo: cgo without a C toolchain
Replace PowerToys Run with Command Palette
VPS with a vRack leg
Possibility of Portal 1 Code Inclusion
Introducing NewPlayer
Metrics for PRs are never expiring ("memory leak")
ship even more of the compiler in source form
Flatpak Application TRACKING ISSUE
Avoid completely replacing the DOM when Blazor components are re-rendered after prerendering
Right now, after prerendering we replace the entire contents of the prerendered component with a fresh DOM copy created from scratch. This has several bad side-effects like: * Videos are stopped and restarted * Animations can be retriggered * The page can flicker if CSS is injected as part of the head contents. * LCP score suffers because (even though there is no significant visual change in most cases) the tools detect the interactive DOM insertion as the LCP element. Instead of replacing the contents of the DOM wholesale, we can do a best effort to reconciliate the DOM with the new rendered DOM when we are trying to apply the render batch. In an ideal scenario, a developer should be able to produce exact prerenders, meaning that the render after prerendering is identical to the prerendered one. In that case, the renderer would only need to "attach" event handlers to the appropriate nodes, leaving everything else the same. The renderer does not have to be perfect and handle all possible scenarios, it can impose strict limitations and "bail out" if it can't figure out how to reconcile a given DOM subtree by replacing that node wholesale. For example, the render can impose a strict order, suggesting that DOM children nodes in a given subtree must appear in the same order as the prerendered node (in other words, the renderer won't search for them, but iterate in order). A similar restriction might be imposed on attributes (which is not rare, since attributes are emitted in
Comments (0)
No comments yet. Start the discussion.