Blazor Warm Start

Question

Blazor Warm Start

Aaron 10

I have a landing page and when the user clicks a button it does Blazor.start();

Q. Is there a way that I can do something like Blazor.preload(); where it will preload the *.wasm assemblies into the Wasm runtime while the user is reading the landing page information. Then the Blazor.start(); already has a good head start and the blazor app launches more quickly for the user.

Anonymous

2025-03-24T07:25:04.1266667+00:00

Hi Aaron, thank you for raising your concern here. It looks like that you have a static landing page which provides the form for users to sign in. And you also host your main features in a blazor WebAssembly application. Since blazor requires to load .wasm and some others ahead, so that it might take a short time at the first loading normally. Now what you are trying to achieve is preloading the blazor wasm application ahead when your landing page has loaded, am I right?

If so, I'm sorry that we haven't had such a preload option/interface/service to achieve your goal. I appreciate that you shared your workaround about "The button to start the Blazor app now just simply toggles the two div's to show the Blazor app".

Here I also want to share official approach for improving first loading performance, which is using lazy loading. It will wait to load developer-created app assemblies until the assemblies are required so that to reduce init loading time.
Aaron 10 Reputation points

2025-03-24T09:41:16.91+00:00

Hi Tiny,

Thank you for your reply. Yes I am aware of lazy loading, but this is not a good solution for my case. This is a customer facing website and so each use is generally a first use. I require almost all of the wasm assemblies for the first page so lazy loading would not give me much benefit.

So far, in my own testing, the only downside I have found to my solution is that on a mobile phone, it has something like a 1-2 second phase where the UI totally freezes. All UI animations etc stop for this short period of time. Button clicks don't respond until then end of this period either.

It would be good if the Blazor.start(); could happen in another thread.
Anonymous

2025-03-24T12:57:30.51+00:00

Hi Aaron, I can understand the current situation now but unfortunately there's no similar method yet. This is by design that the first loading requires much more time, and it might be longer if there're more assemblies or network is limited. If users can't bear with the init loading, we might change to use server side blazor or try to beauty the init loading UI..
Aaron 10 Reputation points

2025-03-24T23:08:00.4666667+00:00

Hi Tiny. I totally understand what you are saying and I believe I understand all of the current supported options. I hope that real user feedback gives the team some ideas for the future. I am happy with my current option of loading into the hidden div apart from it locking up the UI thread for the final part of the WASM load when on a mobile phone. I would like it if you could consider this small problem in your future startup designs.

Thank you once again for your comments.

Server-side rendering is not a cost effective option for me and I have chosen a fully serverless design on a cost and simplicity basis.
Anonymous

2025-03-25T08:04:09.79+00:00

Hi Aaron, I suggest you creating an issue or raise your requirement in github to gather more attention from blazor team. The github issue you added comment is a little bit old and a new requirement with your effort about your workaround shall be helpful.

2 answers

Your answer

Anonymous

2025-03-24T07:25:04.1266667+00:00

Hi Aaron, thank you for raising your concern here. It looks like that you have a static landing page which provides the form for users to sign in. And you also host your main features in a blazor WebAssembly application. Since blazor requires to load .wasm and some others ahead, so that it might take a short time at the first loading normally. Now what you are trying to achieve is preloading the blazor wasm application ahead when your landing page has loaded, am I right?

If so, I'm sorry that we haven't had such a preload option/interface/service to achieve your goal. I appreciate that you shared your workaround about "The button to start the Blazor app now just simply toggles the two div's to show the Blazor app".

Here I also want to share official approach for improving first loading performance, which is using lazy loading. It will wait to load developer-created app assemblies until the assemblies are required so that to reduce init loading time.
Aaron 10 Reputation points

2025-03-24T09:41:16.91+00:00

Hi Tiny,

Thank you for your reply. Yes I am aware of lazy loading, but this is not a good solution for my case. This is a customer facing website and so each use is generally a first use. I require almost all of the wasm assemblies for the first page so lazy loading would not give me much benefit.

So far, in my own testing, the only downside I have found to my solution is that on a mobile phone, it has something like a 1-2 second phase where the UI totally freezes. All UI animations etc stop for this short period of time. Button clicks don't respond until then end of this period either.

It would be good if the Blazor.start(); could happen in another thread.
Anonymous

2025-03-24T12:57:30.51+00:00

Hi Aaron, I can understand the current situation now but unfortunately there's no similar method yet. This is by design that the first loading requires much more time, and it might be longer if there're more assemblies or network is limited. If users can't bear with the init loading, we might change to use server side blazor or try to beauty the init loading UI..
Aaron 10 Reputation points

2025-03-24T23:08:00.4666667+00:00

Hi Tiny. I totally understand what you are saying and I believe I understand all of the current supported options. I hope that real user feedback gives the team some ideas for the future. I am happy with my current option of loading into the hidden div apart from it locking up the UI thread for the final part of the WASM load when on a mobile phone. I would like it if you could consider this small problem in your future startup designs.

Thank you once again for your comments.

Server-side rendering is not a cost effective option for me and I have chosen a fully serverless design on a cost and simplicity basis.
Anonymous

2025-03-25T08:04:09.79+00:00

Hi Aaron, I suggest you creating an issue or raise your requirement in github to gather more attention from blazor team. The github issue you added comment is a little bit old and a new requirement with your effort about your workaround shall be helpful.

Answer 1

Bruce (SqlWork.com) 77,766 Volunteer Moderator

The more supported way of doing this is to have landing page content be a blazor page and use server pre-render.

While preload does currently exist, see this issue:

https://github.com/dotnet/aspnetcore/issues/58875

Aaron 10 Reputation points

2025-03-22T16:40:41.7433333+00:00

Hi Bruce. Thank you for your answer, but this is not a solution for me. The website is hosted on AWS as a static (serverless) website in an S3 bucket using Cloudfront (and Route53).

The backend uses AWS Lambda (DynamoDb, SQS etc) in a fully serverless architecture.

I have seen the Github issue from your link and I have tried the solution from https://medium.com/@python-javascript-php-html-css/preloading-blazor-wasm-assemblies-on-a-plain-html-login-page-082f64f021b9 but I am looking for a supported solution that is a bit better than pre-fetching the *.wasm assemblies. When looking at the load function (blazor.webassembly.js), then it does a lot more than just fetching the files.

Answer 2

Just encase someone else reads this, this is what I landed on (until there is something official).

I already had a <div> for the static (landing page) content and a <div> for the Blazor app, so I simply moved the Blazor.start(); to happen as the index.html is loading. It is at the end of the page so the content is rendered first. The button to start the Blazor app now just simply toggles the two div's to show the Blazor app. If its still loading then you see the loading spinner but if you wait to read more of the landing page content, then you go straight into the Blazor app when they click the button (as it has loaded into the hidden div.

so at the end of the index.html the code looks like this

<script>
        function startApp() {

            document.getElementById('static').hidden = true;

            document.getElementById('app').hidden = false;

        }

        var static = document.getElementById('static');

        if (static.offsetParent != null && window.location.pathname.length > 1) {

            window.location.href = '/';

        }

        Blazor.start();

</script>`

Share via

Blazor Warm Start

2 answers

Your answer