I am having trouble migrating Blazor WASM SPA project to component rendering ( mix between wasm and server render)

[ITStar-WY]

We migrated our Blazor WebAssembly (WASM) SPA project to use the new Blazor Web App model with component rendering modes (server and WebAssembly in different components). However, we encountered two major issues:

New Document on Navigation

Every time we navigate, a completely new document is created, causing all document-level event handlers to reset. This behavior is different from the previous WASM SPA model, where the same document persisted across navigations.
Example: We set up a global window event listener in OnAfterRenderAsync, but it is removed when navigating to another page.

Lazy-loaded CSS/JS Causes FOUC (Flash of Unstyled Content)

In our previous project, we lazy-loaded JavaScript and CSS files, improving initial load times.
Now, when the app starts, the first visual is just barebones HTML with no styles applied, resulting in an ugly unstyled UI until the CSS loads.
Previously, in WASM SPA, styles were bundled and available immediately, but now they load asynchronously, causing layout shifts.

Additionally, OnAfterRender in Main Layout No Longer Works for JS Interop
In our previous WASM SPA, we used OnAfterRender in the Main Layout to call JavaScript interop (e.g., initializing third-party libraries or setting up global scripts, authentication).
With component rendering, this method is no longer reliably triggered, breaking our JS initialization.
This impacts scripts that rely on layout-level logic rather than per-page initialization.

[javiercn]

@ITStar-WY thanks for contacting us.

New Document on Navigation

Every time we navigate, a completely new document is created, causing all document-level event handlers to reset. This behavior is different from the previous WASM SPA model, where the same document persisted across navigations.

It seems that you've switched to use per-page interactivity as opposed to global interactivity, in addition to that, have you done anything to disable enhanced navigation? Are you using blazor.web.js on your script tag? The document should not be reloaded in that situation.

Coming from a hosted webassembly app (based on your description) the equivalent in Blazor Web is (Global Interactivity + WebAssembly) if you create a new template with those options, the only difference between the two models is that prerendering is enabled. You shouldn't see the differences you are observing in that case.

In our previous project, we lazy-loaded JavaScript and CSS files, improving initial load times.
Now, when the app starts, the first visual is just barebones HTML with no styles applied, resulting in an ugly unstyled UI until the CSS loads.
Previously, in WASM SPA, styles were bundled and available immediately, but now they load asynchronously, causing layout shifts.

Can you explain this a bit further? Were you prerendering in the previous case or were you displaying a loading spinner until the app booted up.

Additionally, OnAfterRender in Main Layout No Longer Works for JS Interop
In our previous WASM SPA, we used OnAfterRender in the Main Layout to call JavaScript interop (e.g., initializing third-party libraries or setting up global scripts, authentication).
With component rendering, this method is no longer reliably triggered, breaking our JS initialization.
This impacts scripts that rely on layout-level logic rather than per-page initialization.

This is an effect of choosing per-page interactivity. The layout renders statically in that case and JS interop is not available during prerendering.

For all these cases you can pass in @rendermode=new InteractiveWebAssemblyRenderMode(prerender: false) to render that component interactively only in webassembly.

[dotnet-policy-service]

Hi @ITStar-WY. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[dotnet-policy-service]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

See our Issue Management Policies for more information.