This Blazor Issue Could Ruin Your Project 🔥 Learn How to Avoid It!

🚀 Join the .NET Web Academy: learn.dotnetwebacademy.com
💖 Support me on Patreon for exclusive source code access: / _patrickgod
🚀 Get the .NET 8 Web Dev Jump-Start Course for FREE: dotnet8.patrickgod.com
🐦 Let's get social on Twitter/X: / _patrickgod
🔗 Let's connect on LinkedIn: / patrickgod
#DotNet #Blazor #AspNetCore

[@markusn4614]

SOLUTION: The way you solve this problem in WASM with prerendering is to have all your pages in the server project, and use WASM components as islands, where you inject the needed state as parameters. So for example in the Weather page you would have the table as a WeatherTable component, that takes the weather data as a parameter. Blazor automatically serializes and hydrates the parameters, so this removes any need for additional fetches and PersistentComponentState usage.

[@DaveForster1970]

do you have an example project you can share with this approach ?

[@DarrellTunnell]

I see. So the WeatherTableComponent in that example doesnt do any fetch in OnInitialised but it would expect OnParamatersChanged (cant remember method name off the cuff) to be fired on the client side right - once the state paramater is set?

[@margosdesarian]

Great Video Patrick, these sort of things, where information falls between the cracks, it is really great to explain it

[@classiccomputing]

Great catch! I saw this problem and didn’t know what was going on!

[@cristovaomorgado]

WOW I've been having this issue and never understood the why! GREAT!!!!!

[@FearGod123]

Great tutorial. Very helpful. Thank you

[@schreiber-it-consulting]

Great video. Thanks! Just one question: Why not just use PersistentComponentState?

[@Krasipeace]

omg... finally figured out the freaking bug! Thank you so much!

[@k3dare]

I'm starting a new project of web app, I am a little bit confusing is I should just do everything rendered on the server (so without the .Client) project or just do as you did with 1 project for the server part and 1 project for the client app ? It looks like that adds a lot of complexity (as then you need to create new API endpoints instead of just rendering it on the server, probably more stuff to handle authentication properly I guess?) What would you recommend ?

[@poteb]

Another reason I like the clean WASM+hosted model a lot more than this confusion mess.

[@Tommyt212002]

Patrick can you please do video on the Fluent Blazor dialog service? Its been so confusing how to correctly implement.

[@thibaudgallanddemanneville174]

Am I missing something if instead of calling the api in the OnInitializeAsync I'm calling it in the OnAfterRenderAsync ?

[@gordantadic5156]

Thank you for the video that saved me a ton of nerves! It would be nice if you could explain how to run javacsript in Blazor web applications on the server side. Another black hole in the new Blazor. Things that used to run on net 7 no longer work on net 8?!?

[@bulicminda2220]

YEP- JS Nightmare !

[@slopapa]

Great video! Another big issue with Blazor is how to best handle reconnection; how to handle when the browser tab sleeps or connection is lost. By default you get that "Could not reconnect to server. Reload page to restore functionality."

[@rankarat]

Blazor Server != Blazor SSR.

[@okcharles7]

It it true that the problem was not solvable before Blazor 8. Now you have two options : one is as this video introduced: client side rendering (with help of prerendering). Another is auto render mode where it transits from web socket to web assembly so web socket session will gracefully end under a reasonably fast line speed. Once web assembly is cached, no web socket connection will be made again. If you don't like that, go to traditional MVC or Web Pages.

[@StudyProgrammer96]

Great tutorial. Can you make Video how to deploy Blazor Web App on Azure ? :)

[@bootsector13]

what I did for the solution was I saved the result in the browsers local storage as json format while the page is on server rendered then retrieve that result when the page is rendered as wasm.

[@tfarrag1981]

I face this problem in the fist day of using balzor 8.0 . Is thier any way to gobally stop preredering in client project

[@Akustik]

private IComponentRenderMode renderMode = new InteractiveWebAssemblyRenderMode(prerender: false); private IComponentRenderMode? RenderModeForPage => HttpContext.Request.Path.StartsWithSegments("/Account") ? null : renderMode;

[@TrOgaN_]

Im not sure why they didn't just disable prerenering when the reneder mode is set to webassembly, I guess that's too hard for em!

[@volibita8902]

This is a bid issue( from my opinion), In my blazor server project i have a cascade parameter in mainlayaout and the call to db for receiving data makes twice. i think many developers deactivate prerender in net8 blazor becouse the benefits are less than the damage this logic does.

[@EricKing]

Is there no way to turn off prerendering globally? Or do you have to do it component by component? edit: Found this in the docs. Lame. "To disable prerendering for the entire app, indicate the render mode at the highest-level interactive component in the app's component hierarchy that isn't a root component."

[@chrisgoetz9330]

Yes - in the server project in Components > App.razor find the body tag. Inside that tag you will find or possibly . You can change the render mode within the Routes component globally. An example would be: . If you have configured your project to use authentication for individual accounts, you will want to make this change in the RenderModeForPage method at the bottom of the App.razor file instead.

[@kurdishfreeman7568]

Only when you are excited for something, they come with all these confusing hidden settings and switches here and there. It is already difficult to debug, and then you have to handle this too on top of it. Just use razor pages and help your brain relax.

[@MrDinakdakan]

patric you using blazor modal? blazor modal not working no new blazor app, client cant see cascadingparamter in server

[@minashokrallameichael5998]

Now I will call the API twice one from server and one from client, correct?

[@okcharles7]

Yes. Once for prerendering, another for client side (real) rendering. With this setup, your server gives web crawlers a pre-rendered page with data filled up and it may help SEO, which used be one of the biggest challenge for all SPAs (not limited to Blazor)

[@cfeze]

PageTitle doesn't work when Prerendering is false, has anyone found a solution to this?

[@markharby180]

Like you say, I'm sure Microsoft had a good reason to bring in all of this rendering mayhem, but I'll be brutally honest it has turned me right off Blazor, you can now waste hours tracking down a problem that is not there. I have been evaluating UI frameworks (Radzen, Mud, Syncfusion) and have been hitting all sorts of problems and blocks, really frustrating. Thanks for trying to bring some clarity but I can sense by your frustration in trying to explain it that this is still not clear.

[@m4r10x2]

Same here, my conclusion is to go webassembly mode only and Tailwind for UI. That should give full flexibility without too much magic

[@pezhmanpiramoun2997]

important !

[@dasfahrer8187]

Haha, this exact behavior happened to me the other day. I was like 😕❔❓⁉

[@richardaubin1951]

Just cache the first response.

[@user-ov7sz2pe8d]

Hi, Patrick! I already had notice this behavior. I found another video on how to avoid this (kzbin.info/www/bejne/p4KcYqWagsx8g68). Hope it helps!

[@alex.nolasco]

🤦‍♂

[@navirbox4913]

I just realized something with these kind of videos. They way you put the title and say nothing about the content in the description makes it so difficult for someone who's actually trying to find the solution to the problem explained in said video. Do you prefer short-term views by shock value or long-term views from people who actually searched for the solution? Food for thought.