The Biggest ISSUE With Blazor (and how to fix it)
Вставка
- Опубліковано 8 чер 2024
- One of the biggest issues with Blazor in .NET 8 is that it doesn't offer a smooth transition from the pre-rendering to interactive rendering. In practice, we end up having the OnInitialized method being called twice. Which can render our applications unusable. However, there's an easy fix for that! In this video I will show you exactly what the problem is and how to solve it!
#dotnet #blazor #aspnetcore
JOIN the Codewrinkles newsletter: codewrinkles.eo.page/newsletter
Join this channel to get source code access and other perks:
/ @codewrinkles
CONTENT
1. Intro: 00:00
2. Regular SSR: 00:36
3. SSR + interactivity = TROUBLE: 01:52
4. Let's fix it! 04:00 - Наука та технологія
![ПОЛНАЯ ИСТОРИЯ ЭКЗОРЦИЗМА [Топ Сикрет]](http://i.ytimg.com/vi/qBySr6Bt0B8/mqdefault.jpg)
A short clarification. According MS documentation, there is a way for stateful reconnects that could potentially also be applied to this scenarios. And this would be to use some kind of memory stream to keep track of the loaded data and when the render process goes the second time through OnInitialized you can get the data from the stream directly. However, I don't think that a simple task in all modern SPA frameworks (like initializing data) should required this level of complexity in our applications.
I love Blazor 8, but MS needs to do a better job of dog fooding their stuff. When I ported my Blazor Server app to the Blazor Web template, I had this same issue. Took me a good hour of internet research to find this same workaround. For my app, I set this globally on the routes component, as it is a SPA.
it's crazy that other ssr frameworks have things like this figured out
Very helpful video, thanks!
Thank you for the valuable information. I have spent many hours to resolve this problem
Wonderful !! Thank you for the valuable information. It will help me solve many problems.
Glad it was helpful!
nice workaround. I'm sure I'll use it
Super stuff, thanks!
Glad you found it useful.
thanks for a big heads-up
I tried to use this, but I found out that my login page is blank (with background) if prerendering is disabled. Is it a bug or is it something wrong? Thank you for all your hard work!
Nice. I'm sure I will use this soon. You have also lost a l ot of weight, whatever u are doing is working. Great job man
For this issue,I have discussed the PersistComponentState approach in detail ua-cam.com/video/qQ91rdMgIMM/v-deo.html
Nice one. Thanks for sharing.
how can i sync between sqlite on mobile offline and remote database (restapi with sql server ) ?
how to manually authenticate with blazor SSR
Could you do a video about Authentification without using Identity in Blazor?
Thank you very much! In a global server mode project I successfully applied the changes in App.Razor component in order to avoid OnInitialized be called twice. It worked fine but if I use Individual Accounts Authentication a problem with login has occurs. After searching, I found that the problem is that http context is null and the login page is not loading. What can be done?
Yes, activating global serber mode effectively turns your app in a Blazor Server app. Please look up the Blazor Server playlist on the channel since I have plenty of videos on Blazor Server Authentication.
When the page is refreshed, the issue is not resolved even though it works for the initial rendering.
You're right. This video is not up to date or even correct. All comments saying 'thank you' to the author are owner's friends probably.
For whatever reason, I couldn't reproduce this behaviour using the Blazor Web App with server interactivity location set to Per page/component. The breakpoint set on the OnInitializedAsync method was not hit twice but once.
Did you miss something or I missed something?
I'm not the only one complaining about this issue. I'm not sure why you couldn't reproduce it. It's just as easy as having the template and making the delay 5 seconds and adding @rendermode InteractiveServer. It's weird however and gives me food for thought.
Are you sure you added @rendermode InteractiveServer? The rendermode needs to be activated manually. By default everything is SSR. The first demo I made in the video, everything was working, but it was without interactivity
@@Codewrinkles Yeah my bad., I overlooked that part. After that correction, it worked as in your demo.
Based on the advise given by DanRoth and Co., I decided to always make a component and not slap the @rendermode in them.
Yeah, but this is not always possible. I mentioned this approach in the "Everything you need to know about Blazor" video. My approach is to also try to keep everything as much SSR as possible. However, sometimes you need to communicate between parent and child components and in that case you can't escape this problem every time.
@@geraldmaale This way it will not render correctly when calling the component from a link or menu. You'll need the @rendermode specified within the component if you also route to it.
Unfortunately, I think disabling/bypassing Pre-rendering harms SEO and prevents search engines from seeing/indexing page content, even though the solution is useful from a UX point of view.
I eventually had to re-enable it because search engines saw pages as empty.
Are you aware of a better solution that still allows prerendering to remain enabled?
You're right: prerendering can help with search engine optimization (SEO) since the initial HTML content is generated on the server and can be crawled by search engines
On a fresh new application based on the default Blazor Web App Template, I never see the "Loading..." message at 1:28, and at Network tab, the request shows as: Status (pending), not immediately 200 as in your demo. Can anyone help me?
Yes , you are right. This video is a modified Blazor app and totally incorrect.
Thanks very useful. +1 sub
why not just make preconfigured global static class for configured render modes? same as RenderMode set in _imports.razor
I don't quite get what this would do other then my entire app would become interactively rendered. What am mI missing?
The video is not up to date or is a modified Blazor Server app or even a Blazor Server app created from .NET 7 migrated to .NET8 later. There is no InteractiveServer rendermode in Blazor Server in .NET8 . Also under Pages in the video I am not seeing _Host.cstml file.
Sorry, but you're totally off on this one. The entire model has changed in .NET 8 and everything is SSR by default. Even if youwant to create a Blazor Server application it just creates a Blazor SSR one (for auth components) and adds server interactivity globally via an if check. Same goes for assembly. I also have a video on getting started with Blazor on .NET 8. I think that one might be really useful.
@@Codewrinkles You are right on this word: you're 'totally' wrong. Please read my comments again. I am using .NET since 2003 and these days I'm under . NET 8. so 100% you're wrong.
Thank you.
I hope Microsoft would take this as a bug and it properly fixed.
Strictly speaking, this is not a bug. This is how things are supposed to work in this model. You have a server predener and then an interactive render process. But I agree it's a fairly big inconvenience and should at least be documented in a more proper way.
@@Codewrinkles Besides documentation, there should be a formal way to prevent OnInitalizedAsync() from executing twice.
Maybe just certain syntatic sugar like:
@rendermode InteractiveServerNotPrerendered
Nice quick fix, anyway.
You can actually move the data load and delay into onafterrender instead oninit, first render only of course
That is not an optimal experience in my opinion since at that point the HTML is already rendered. There will be strange flickers of the UI that end users will experience.
@Codewrinkles there are no strange flickers... I write 100% of my code this way in blazor wasm... screen renders with loading or spinner while data loads and then is presented to user on screen... ux is wonderful at that point... in fact doing data loads in onitnit causes the odd behaviors
I'm making an app where SEO is very important so don't think this will be a viable work around for me unfortunately...
I guess you will need to define which is more important: SEO or data loading twice. An alternate workaround would be to move the Weather into an entire new component. Then have the @rendermode set on the component, not on the page level. This will allow you to still be SEO-friendly and also avoi loading data twice.
what is the down side of this approach? There may be a reason why Microsoft set pretender default value equals true.
How To Add Localization In Blazor | Multi-Language Support with arabic and english or any languages
hi @codewrinkles does blazor run on IIS or some new webserver?
Blazor is An #aspnetcore app and therefore it can run wherever you want it to run, just like any other aspnetcore app.
I mean as is what webserver on windows? IIS? or is there a new webserver?
👍 "promosm"