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

[@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 ?

[@Wouldntyouliketoknow2]

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?

[@cristovaomorgado]

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

[@chairmakerPete]

Useful info. I'm staying away from Blazor web assembly for a few more versions in the hope it'll settle down.

[@margosdesarian]

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

[@poteb]

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

[@classiccomputing]

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

[@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 !

[@orterves]

Wouldn't running JS server side imply a JS engine on the server? I guess you could hack a call to NodeJS. But it'd probably be better to separate client side only blazor code and ensure it only runs client side

[@rezvlt9285]

What if my project is uses interactive server side rendering? How can I prevent the flickering without turning of prerendering for SEO purposes?

[@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.

[@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 ?

[@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!

[@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.

[@rmbl349]

does it open a websocket only for the time it streams and closes it or is it always open for the full lifetime of the app?

[@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.

[@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.

[@FearGod123]

Great tutorial. Very helpful. Thank you

[@MrDinakdakan]

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

[@Tommyt212002]

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

[@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

[@thibaudgallanddemanneville174]

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

[@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.

[@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!

[@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)

[@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;

[@Together4Ever96]

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

[@cfeze]

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

[@pezhmanpiramoun2997]

important !

[@dasfahrer8187]

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

[@richardaubin1951]

Just cache the first response.

[@AlexandreRizzo-p2u]

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!

[@randypenajimenez3893]

Blazor Server Side all day.

[@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.