Pre DOM patch event listener

[darrelsilveira047]

Hi Blazor Folks,

I’m using Blazor Server-Side Rendering (SSR) for my project without any interactivity modes, where the interactivity is handled exclusively via JavaScript. In my workflow, I have certain JS components (e.g., Tiny Slider) that need to be disposed of before Blazor applies any DOM updates (patches) to avoid conflicts.

Currently, I use a MutationObserver to detect DOM changes after they occur, but this approach is reactive and doesn’t prevent issues that occur during the DOM patching process itself.

Would it be possible to add an event listener or lifecycle hook that fires before Blazor begins DOM patching in SSR mode? This would allow developers to clean up or dispose of JavaScript components before DOM updates take place, similar to how an “unmount” or “pre-patch” hook works in other frameworks.

Thank you !

[engineering87]

Hello,
in SSR context handling JavaScript interactivity and ensuring proper disposal of components before DOM updates can be really challenging.
Maybe you can try with IJSRuntime, for example:

@inject IJSRuntime JSRuntime

@code {
    protected override async Task OnInitializedAsync()
    {
        await JSRuntime.InvokeVoidAsync("initializeFunctionComponent");
    }

    public void Dispose()
    {
        JSRuntime.InvokeVoidAsync("disposeFunctionComponent");
    }
}

window.initializeFunctionComponent= (div_id) => {
 // Initialize the component here
};

window.disposeFunctionComponent= (div_id) => {
 // destroy the component here
};

Let me know.

[darrelsilveira047]

Hi @engineering87, thank you for the suggestion! Unfortunately, I don’t think this approach will work with server-side static rendering. In Blazor SSR without interactivity, JavaScript interop cannot be triggered directly from Blazor's lifecycle events because the page is rendered statically.

Additionally, only OnParametersSet / OnParametersSetAsync and OnInitialized / OnInitializedAsync are relevant lifecycle events in SSR without interactivity.

Here’s the error I received when trying your suggestion:

InvalidOperationException: JavaScript interop calls cannot be issued during server-side static rendering, because the page has not yet loaded in the browser. Statically-rendered components must wrap any JavaScript interop calls in conditional logic to ensure those interop calls are not attempted during static rendering

I believe I need some sort of client-side JavaScript event listener, similar to Blazor.addEventListener('enhancedload', () => {});, that triggers before DOM patching occurs.