Intro to Blazor in .NET 8 - SSR, Stream Rendering, Auto, and more...
2023 ж. 13 Қар.
78 006 Рет қаралды
In .NET 8, Blazor has become a full-featured web framework that is modular and adaptable to your needs over time. In this video, we are going to look at how Blazor works now and how to utilize Server-Side Rendered (SSR) mode, Stream Rendering, Blazor Server components, Blazor WebAssembly components, and components that transition automatically from Server to WebAssembly using Auto mode.
Blazor Course: www.iamtimcorey.com/courses/b...
Full Training Courses: IAmTimCorey.com
Source Code: leadmagnets.app/?Resource=Int...
Mailing List: signup.iamtimcorey.com/
It's 2023 and the number of frameworks for creating "todo lists" and "+1 counters" is overwhelming!
It is an easy way to show off how things work without making a complex app that confuses people with irrelevant details. I'm curious how you would show off a Blazor Web App. What would you build to show off what it can do without making a complex app? As a person who builds demos to show off technologies, I'm always looking for new demo ideas.
@@IAmTimCoreyits not about what it can do, but what it cannot do. If you're looking for ideas, do something more complex like a gantt chart. It is also a ToDo list of sorts but with a kink.
@@IAmTimCorey I’m totally new to programming so these suggestions might not be practical but perhaps some ideas: restaurant ordering, no billing just table number and what they want Good inwards: scans product received to a warehouse and adds them to stock levels TV guide for the week: shows some TV channels and what is on throughout the week
@@IAmTimCoreyIt's too bad OP didn't respond to your question, but I didn't read his comment as a slant toward your content, but rather the overwhelming number of frameworks/libraries out there for developers to choose from (React, Angular, Next.JS, Vue, Blazor, etc.). How are new developers to know which framework to choose and why? Outside of "whatever your employer is using, learn that," if a developer wants to make an app in their free time, at home, there are too many "React is the best! No, Vanilla JS is and always will be king! Angular, bro! Vue is the slimmest, especially when paired with Vite! Na, Blazor is good because you can create the whole webpage in C#." Then come the Python kids who only ever learn Python and want to do everything with Python, because that's all they've learned and that's all they're willing to learn... Personally, I've worked with React, Angular, Vue, .Net (for API's only) and SQL, Vanilla JS and TS, and my favorite coding language, by far, is C#, but I've never worked somewhere that had a Blazor app, so I'm learning simply due to my affinity for C# and Visual Studio, but not because I've learned of any particular performance/security benefit with Blazor over the other options... I think maybe OP just wanted to know "why Blazor."
@@IAmTimCorey I'd argue that watching another "+1 counter" being made IS being "confused by irrelevant details". Creating a simple CRUD app, would be relevant. Hooking it up to a database, would be relevant. Making some form of login functionality, would be relevant. I'm sure you agree.
Already Blazor dev here, but still learning new every moment. Big thank you for Tim !! Been giving links your videos to everybody when people asks where to learn blazor. Keep up the good work.
Glad you like them!
Hi Tim, awesome tutorial. Getting into blazor now and LOVE it. The projects layout has been refined so much it is so clean, love it, no extra fluff, just what you need. Thank you so much for explaining the difference between SSR and WASM, especially the gotchas (with examples), so good to know for future projects.
Glad it was helpful!
Finally understand the value of dependency injection, honestly I've mostly just been doing it because of convention and style.
I am glad it was helpful.
"I was THIS close chief!!!" (I wonder is how many people get the reference?) I just completed the older Blazor course last month and unfortunately, I am outside the refund window by several weeks. Oh well. (I still plan to purchase the new Blazor course. But hey, putting these courses together is a LOT of work - especially when they are done at this level. They are well worth the money.) Ironically, I was just about to start a new Blazor project in the beginning of December. I am going to delay the start of the project until after I finish the new Blazor course. Thanks for getting this course out in a timely manner!
Hi Tim, this is the best explanation so far about .net 8. You are far better than any other youtuber at explaining things in a way that people understand. Thank you. I would love it if you would do a tutorial on how to convert an existing .net 7 webassembly app that uses the old duende authentication over to be a .net 8 version that uses the new auth that comes with .net 8.
Thanks for the suggestion.
Amazing Tim, yet another great video and you always seem to show something new (or forgotten and a reminder). And it's worth a call out to Microsoft, you guys' rock and the framework you have develop here is incredible. One thing you said Tim in this video on the lines of something like "Blazor Web part is kind of a API". Keen to know more on this and around authentication and do we need to now use API for a Auto (server\WASM) web project? I know you said your going to do a video on Authentication in .NET 8 soon. Look forward to it.
Thank you!
Nice overview. Thanks man!
You are welcome.
I like the new models they are proposing. SSR and enhanced navigation are a most welcome improvement. I am moving my web assembly project to the new model, and I am noticing way less complexity doing what makes sense in the server and using Wasm with minimal API (within the same project) for interactivity. I am even considering if I really want to use Wasm and instead go with HTMX taking advantage of the new "render anywhere" feature; that is something that I am planning to try at some point. I think what is going to be a BIG problem for most devs is get around on what happens in the client and what happens in the server, the two-project separation tried to be the approach to guide people on it, which to me was and straight forward easy to understand approach, but it seems people are getting even more confused. Great introductory video btw!
Thanks for sharing!
Thank you very much for sharing this valuable knowledge !
You are welcome.
Great introduction. I got all the main differences with .NET 7 Blazor. It would be interesting to demonstrate how to migrate a Blazor project from .NET 7 to .NET 8. Thank you Tim.
Thanks for the suggestion. Please add it to the list on the suggestion site so others can vote on it as well: suggestions.iamtimcorey.com/
Updated to 17.8 :D cant wait to try new blazor
Great!
I was trying to get up the default new Blazor app up and running. This episode was very helpful in getting up to speed with the new stuff, and the better component models in particular. Of course you have not talked about many of the other challenges: data storage, auth, state, APIs, etc. I am pretty excited about SSR because that means you can run the front end from a Azure Static Web Site or even from a blob storage account. I have also been looking into other ways to do the interactivity like HTMX.
Great!
Great vids mate, keep it up!
Thanks!
very informative. thank you
You are welcome.
I've been following Blazor for several years and have been put off having to select brittle Signal R or bloated WASM. I was pleased to see SSR is the default in .Net 8 Blazor. - no WASM or Signal R required. Also, interactivity is accomplished using standard Javascript. Brilliant. You get the benefits of Razor Components, the performance of SSR and industry standard interactivity support. I frankly don't understand why SSR isn't the preferred approach to Blazor apps. The magic associated with WASM and SignalR comes at a significant cost, even if the cost has been lessened somewhat in .Net 8.
I don't know that the cost for SignalR/WASM was quite as high as you are saying, but SSR does make the whole experience more efficient for sure.
thank you for sharing this for free
You are welcome.
Really nice video :)
Thanks!
Danke!
Thank you!
Thank you TIM. As always great video. Precise and to the point. Also watched the Blazor demo from Daniel and steve on Dotnet Conf. With dotnet 8 , Blazor looks really really good. Any plan for making a dedicated video on C#12?
I'll be making multiple videos on the features of C# 12 that I find most relevant to most people.
Took a look at your new blazor course. I noticed when you create the blazor web app with both interactivity types, in the wasm client for counter it has @rendermode InteractiveAuto instead of what you had in your .net 8 preview
Yep, they changed that right before launch.
Awesome video! I hope you'll do a video also about auth with identity in .NET 8, I had some trouble with it in the rc versions, especially in server + webassembly projects trying to implement it on my own without using the preset.
I'll be doing a video on it at some point. There's a lot to cover in the new changes, so I'm not sure when.
Loved the explanation, Tim! Great job. Still not sure if this replaces my normal setup with razor pages, htmx and alpinejs. I think I've worked with Blazor too little to know how Blazor stacks up to plain old html/css/js websites (built with MVC or other web framework sprinkeled with some JavaScript)
You are welcome. I definitely think you should check it out with SSR and Stream Rendering. I think you will be surprised at how easy it is to do everything in one UI, rather than mixing multiple UI types together.
Thank you Mr. Corey for the great video. Any advice on how to migrate existing Blazor projects (server and webassembly) to this new Auto project?
I'll be doing a video on it as soon as I can.
thanks man, i appreciate this! :) self made software architect ;)
You are welcome.
Thank you, very helpful video! Is there an appropriate way to handle the shift from server to wasm as discussed at 36:00, without losing server resources? Especially when setting up the project with "Auto" and "Global" interactivity types, where that shift is always happening?
Always look to your channel and training first Tim, thank you for great information and courses. The new identity additions to Blazor are great, espscially since they filter through to the WASM pages. There is a definate lack of information at the moment in regards to A) Blazor with identity using Dapper instead of EF and B) Using Azure B2C. As these are not a simple upgrade from earlier .net versions - Do you have any plans to cover these in a course or video? (I did check the new Blazor course, but it seems to be EF only). Many thanks
I don't use Dapper with Identity because I'm not a big fan of making big changes to an existing authentication system. Doing so means you take on responsibility for lots of testing and validation of data security and safety. As for using B2C, the Suggestion Site playlist shows you how to use B2C (I also have a full course covering it).
Great video!. In classic Blazor server, a frequently used practice was to maintain temporary user state in a Scoped state service of some kind. With static rendering, scoped dependencies only live for the life of the single page render. So that said, what mechanism do we have to store per user "session" state that can be accessed by both InteractiveServer and Static Blazor components?
Reddis. Storing “session” state in a scoped service is bad for a couple of reasons * it is lost with a hard refresh * it is not scalable horizontally as you can create another site instance
@@MiningForPies Agreed that a distributed cache is the best place to store, but we still need at least a session key of some kind that can be persisted across all render modes. This key has to be stored in and passed by the browser. The only way I have found to do this is a session cookie which, in the case of interactive server, is difficult to set/get (not impossible). My point is this should be easier.
Damn, you're fast :')
I try. I've been busting my butt for the past month on .NET 8.
@@IAmTimCorey good stuff is coming :)
@@IAmTimCorey We all appreciate the work your butt has done Tim 😁
Neat and clean explanation. Just one doubt How we going to Publish the files for release? Since there are 2 projects created if we choose Interactivity type as Auto. So when it comes to deployment / when we publish the files to IIS , do we need to publish these 2 projects separately?
Have nice day Tim, I wanna know more about using a JavaScript library or plugin into a Blazor component... you mention that at the end of this video, do you have a specific video about it or you are planning to explain that in a separate video ? thank you very much
Not yet, but thanks for the suggestion. Please add it to the list on the suggestion site so others can vote on it as well: suggestions.iamtimcorey.com/
I really like the concept of Blazor in .NET 8, but I feel like it would get too confusing to track what belongs in each project. Like you said in the video, the wasm application does not have access to many of the things that the server has. Of course this can be managed, but there isn't much developer protection from this pitfall (warnings, errors etc). I believe a solution to this is in development already for .NET 9 to merge the 2 projects into 1. Awesome video regardless. Keep up the good work :)
Conceptually that wouldn't work, you can't do CRUD calls from the client to the server in the same 'project' (unless that whole thing could be automated somehow?!)
@@DigitalNomadOnFIRE Yeah obviously you couldnt call the db from the wasm assembly, but I think they are going to do some syntactic magic to blend them together into one project.
hey Tim, do you have a video tutorial on how to use Bootstrap modal with blazor? thanks
Not specifically, but it works just like it does in any Bootstrap site.
For the demo where you expected WebAssembly render mode to not show server configuration data (37:00), I wonder if that is the prerender system that is still firing.
Yes, it was.
I have an odd feeling that this is a bug. Tim specifically said WebAssembly so I don't get it why it got downloaded on the server. Unless I am missing a crucial part
With Blazor in .NET 8 I would guess that more and more start-ups will adopt this tech stack. It would be GOLD if you find time to create a course on building a full production SaaS App with Microsoft technologies like Blazor, Azure and so on. I think it is going to be a best seller :)), but maybe it's just me and you don't see a market fit for a course like this :P. All the best
I'll definitely be building a full application with Blazor. I'm actually working through ideas now, before I pitch them to sponsors so that hopefully we can get a full course here on KZhead for free. Maybe even a couple of them.
@@IAmTimCorey thanks for the reply. You shoud pitch Syncfusion to sponsor the course :P and use their UI library :)
Syncfusion guys are very annoying, I had it once they're keep calling me to purchase it's product though I said I am no way close to their limit to buy it. And it kept me giving notification for activation. So I abandoned it finally.
Hi, I got a question. When I start the project with IIS Express. The weather page (with streamrendering on) does not show the loading... msg before it show the data? Works fine if u start the project with https. What's the difference?
Hey, how would I go about into creating one of this apps, but having a Client-side page (like the Demo one) and have it call a component available in the other project to fetch data? In a traditional MVC server side, I'd just set the Mongo client components right into the server project and have the controllers call those. I thought the server side Blazor would be able to provide that but I don't see how.
Hi Tim, How to deal with authentication and authorization in this kind of project?
The question I have is if we use streamrendering Google will be able to read the data from the weather page?
Hello. Do you maybe know if in .Net 8 Blazor is there any elegant way how to fix SignalR disconnection issue? After browser sleep on mobile or just leave open page on desktop for a long time, for example... Auto re-connect or somehow else to avoid out-of-the-box message with the Reload button? This issue is one of the biggest Blazor SSR disadvantages, in my opinion😢
In which project should we have to install the nuget libraries?
What about state management in blazor? What will happen to the clients when I upgrade the web app.
Great vid Tim and thank you for this. I have always worked wth Blazor WASM and my client always calls an API to get data etc. With the new Blazor, will I actually need an API anymore? I mean it's looking like the server side can talk directly to the database and serve the pages that require the data. Am ok in thinking like this?
I mainly write business systems so I tend to just use Server and I always USED to talk to the backend through an API but just gave up as it wasn't giving me anything much. Felt wrong at first but Carl Franklin (BlazorTrain) did a video and gave me "permission" to talk directly to my backend so that's the way I go now. Of course "It Depends" still counts and where you need something else to access your backend via API you are still going to need one but in that case it's easy to setup some endpoints and get them to talk to your backend, so you go Blazor > Backend or [something else] > API > Backend. So TLDR IMHO yes it's perfectly OK.
If you don't use the Blazor WebAssembly or Auto components, you don't need an API.
Great video and explanation of the new .net blazor templates etc. One question I have not seen answered anywhere else is how does setting up a PWA now work? Just the same?
It looks like the only possibility to be PWA compatible is to go full WASM mode (i.e no SSR, auto, or interactive server rendering). PWA is nice but it seems that Microsoft is pushing its signal R stuff...
If you want a PWA, you want to use the Blazor WebAssembly Stand-alone project type. The reason for that is because a PWA cannot have mixed mode. In the Blazor Web App template, components are rendered on the server before being sent down, even in WebAssembly mode (this speeds things up). You can turn all of that off, but you still then have all of the architecture of the server code and you are running on the server project. The stand-alone WASM template cuts out all of the server code so that it can function as a PWA if/when you want.
@SouleyThiam-oj3rk - They aren't "pushing its SignalR stuff". In fact, they are pushing to get away from the need for it. That's why it isn't used by default. That's why auto uses it only the first time. The problem with PWAs is that they have to be fully client-side from the start. That means you have to download the full source code before running any of it. That's a downside that cannot be negated if you want to have a PWA. The Blazor Web App template defaults to SSR, which means the client gets the web app as fast as possible. Even when you make components auto, so that they will use SignalR first and then WebAssembly, components get rendered on the server for speed, then displayed with SignalR for speed, then once the WebAssembly version has been downloaded in the background (for speed), then it is displayed with WebAssembly. All of those speed improvements are ones that cannot be done when you are running fully on the client.
@@IAmTimCorey Thank you very much for the explanation. Makes perfect sense. Love your videos.
31:41 i hope when adding route, adding it in separate file as json to link route name with component like: Demo /demo>/route> to see all routes in one place
Great video - thank you for sharing. I do have one question about the images folder. You mentioned that it could be placed under wwwroot at the server, however, would it be better to place it at the server or client? Thanks again.
Place it where everyone has access to the images (server) rather than where only Auto and WebAssembly components have access (Client).
Thanks, I know understand this structure better. Just one more question, being on the server, will images rendered on pages put more stress on the server, or would they be cached, including if using Cloudflair?@@IAmTimCorey
I have a question about any JS or styles declared on the server project, I'm assuming that gets used by the client control when it switches to wasm? I.e Is the uri path maintained when it switches to wasm and it doesn't just run as an independent 'offline' control? Or do we need to declare styles in both places? Also it's stream rendering using the same technology as signalR but without maintaining the connection once rendering is completed?
It switches the styling and JavaScript over to the WASM side. No, Stream Rendering does not use a WebSocket connection. It uses JavaScript to await a fetch command.
Very informative, but how do I convert an existing Blazor Server app?
It depends. An in-place upgrade seems to be as simple as changing the version to .NET 8 (I haven't tried it yet, but someone else reported that's what they did). However, if you want the new auto, SSR, etc. features then you will need to do some more work. I'll be doing a video on it as soon as I can.
I hoped that you would show how to share updated counter in all components when you click increment button: both on left menu and content page
That's outside the scope of an intro topic. I have shown how to get data in and out of a component, though. Maybe I'll do that in a future demo.
Yeap. That would be very helpful
Thank you very much for your videos .I need MainLayout to be interactive, it works correctly until I use the "Account" pages, it is because they need a HttpContext and lose interactivity (This is explained in AccountLayout). How can I keep the interactivity of MainLayout? Can you help me please?
Would it be correct to think of stream rendering as just a virtual dom replacement?
Tim I'm dying for your opinion on something. After following your early courses and getting used to Dapper, I'm 100% comfortable with my SQL workflow as is. Do you think EF is so powerful / good now that I should learn how to work with it, or am I fine carrying on as is? I will be updating / upgrading to .net 8 either way, so just curious about EF specifically.
Here's the debate that I wrestle through. On one hand, you are probably better off in the long run using Dapper in your projects. I've seen too many projects fail because they decided to make their development easier by using EF. On the other hand, if you use EF right, it can make your development easier and be fine in the long run. Finally, if you aren't in control of the application's architecture, you may need to know EF in order to work for a company. So the answer is that you should probably learn EF (really well) and practice it a lot, in case you need to use it at an organization where you don't control the architectural decisions.
Is the Blazor Start to Finish course on your website geared around .NET 8? I noticed a piece that references .net 8 in the title. Wondering if thats a recent addendum to modernize an older course or if the entire course is .net 8 based? I'm a new subscriber and would really like to get up to speed with Blazor.
It was built entirely with .NET 8.
I noticed that in the Blazor template today, it does not use the @attribute directive for the render modes, but instead it uses the @rendermode directive (example, in the counter page in the client presently has @rendermode InteractiveAuto, but in the video it has @attribute [RenderModeInteractiveAuto]. Can you please explain?
This video was created using the last release candidate before the official release. In that time, they changed the syntax.
hi, When i'm working with SSR, if a component is in @rendermode InteractiveWebAssembly , is there some DLL download on the user machine? I want to besure 'cause of the problem link to some security environment who's blocking the DLL downloading even with the new .webcil extension nice video
Yes, it uses web assembly to load the source code on the client.
Can we use components from. client (web assembly) in another server project. Kinda of like RCL.
Yep, you can.
do we get graphics like canvas?
Hello there, thanks at lot for all your content they are really great and helpful. I have a question. I created a application but instead of choosing https I selected http. Now the StreamRendering does not work on http but it does on https. Do you know how to make it work on http? Thanks for your help in advance.
I'm not sure how to make it work with http. Is there a reason why you want to use http? That is not really safe if you are transferring data or calling an API and if it is on the web, it will also mean your site is downranked by Google and warnings will be issued by browsers.
The app wont be exposed to the out side world. It would be use on a intranet and they use http internally.
Hi Tim! I have a question. Would Blazor be suitable for gallery/blog-type websites as well? To be honest, I'm a bit uncertain about maintaining a persistent SignalR connection when users receive content and don't do anything else on the site besides consuming it. Have nice day!
It sure would. But I would recommend .NET 8 Blazor Web App. Most of your site would probably work as a SSR site, without the need for any client-side rendering. But, for the few areas that need client-side code, you could use Auto mode, where the component starts out as Blazor Server (for speed) and then transitions in the background to Blazor WebAssembly (for next-run speed and no SignalR connection).
Im confused. Why RenderModeWebAssembly still showed the string from the Configuration. Could you explain please? Also does Blazor Server still open and keep TCP connection?
The site, by default, renders the page on the server before sending it to the client. The benefit of doing that is that the site is visible very quickly and is SEO-friendly. Blazor Server still uses web sockets to connect to the server from the client. However, that socket is only open when you are using a Blazor Server component. It will close once the socket is not needed.
great video. i want to point out however the method of declaring a render mode has changed in the final release. it is now done using @rendermode directives not attributes
Yep, gotta love that.
Hi Tim, great video! I haven't understood some parts: -why if you create the demo component in client project and use it in home component, it uses the server mode, because components inherit parent's render mode? -I have a blazor server app in new .net 8 and either I use stream rendering or not,it works like the stream rendering set at true, why? -should I use auto mode only if there is interactivity? Sorry for my english and thanks in advance.
No, components don’t inherit from their parent. Stream Rendering is for non-interactive components. Server will perform similar actions because that is how it operates. If the interactivity is simple, SSR might be enough. Otherwise, Auto is a good choice.
@@IAmTimCoreythank you very much for response, but when should I prefer the old blazor server over automode?
Only if your component needs interactivity and you cannot access the data from WebAssembly. Your goal would be never.
So does this mean we can use blazor in a similiar way the Next.js 13 works? The concept of client side components for interactivity looks very similiar
Yes
It is basically poor man's NextJS
Is it possible to cover Blazor Client code with Tests? We React and Jest now, and Cypress for E2E tests. I want to try Blazor for some new projects.
Yes. Component code can be unit tested (they’re just classes after all). UI can be tested quite easily with something like playwrite
Thanks, and I don't know how you keep up with the comments... but... I'm using VSCode w/ DotNet 8 and the only options I see in doing a "dotnet new list" are blazor and blazorwasm. No matter which I choose, I'm not given an @attribute option of "RenderModeInteractiveAuto". In fact I'm only given a RenderMode with dot attribute options, none Auto or Interactive... all are "server" something. I assume this is a recent video given dotnet 8 so I must be missing something.
If you run it from the command line, you can use the "-int WebAssembly" or "-int Auto" or "-int Server" or "-int None" to set the RenderMode. I'm not sure about why VS Code isn't allowing you to see those options. However, you can also change this quite easily after you create the project. Just go into the Program.cs file and the App.razor file to make the changes (I don't have it in front of me, but they are in one of those locations).
How will having two projects influence the hosting of the site on Azure for example?
Think of it more like a class library and a UI project rather than two UI projects. You just deploy the main project to Azure like you normally would and it will "just work".
Awesome, ok thanks.
I have a question. I really don't understand what's gained by using Stream Rendering vs ServerPreRendered?
When you are calling an API that might take a bit, it will render the page with a placeholder (the Loading... in our demo's case). Then, when the API returns the data, the page will inject the data where the placeholder is. That way the page can be quickly displayed and let the user know that more data is coming rather than just pausing until the data is downloaded.
Since this doesn't use JavaScript, would the logic and dynamic elements work with JS completely disabled on the browser? Since we are doing server side rendering... The final question is, can this be hosted on Tor network?
It does use JavaScript. We just don't have to use JavaScript. If you note, Microsoft adds one JavaScript file onto the template page. As for hosting it on a Tor network, I'm not sure.
Hi , i like what you are doing , Please a i have a question , i have a APi that handle generating authentication with jwt access token , and all my logic is in this API , i want to use blazor as frontend with rendermodeAuto, how to use the JWT in this case? for WASM si I have no probleme , but with Blazor RenderModeAutho i am lost Thank you
if you run into problem on first run, i had to uninstalled the .net 8.0 sdk, switched back to .net 7, the back again to .net 8 for it to compile and run.
Interesting.
👏
👍🏻
I need to create a new eCommerce project. Do you beleive Blazor SSR good enough to move away from vue?
It is a really solid option. The one thing I would review to make sure you understood how it works is the authentication piece, specifically around how it transitions between the Server and WebAssembly.
Thanks for video. Maybe is just me but I am not a fan Blazor, probably mostly cause I prefer using react for frontend.
If you are using C# for your back-end, what benefit does React give you that overcomes the additional overhead?
I'm an All Access Pass member. I just got the email about the new Blazor course. Thank you! I have been taking a deep dive into blazor because I'm hoping to secure my next dev position with Blazor. Are you planning any courses with Blazor hybrid or .NET Maui?
I hope you enjoy it. I am considering when to do a Blazor Hybrid / .NET MAUI course. It is on my "want to do" list. The timing is the big thing.
37:20 Why does it still show up?
Thanks for the video. .NET 8 looks great. The only disheartening aspect is that I've spent 2+ years in .NET 6 using Wasm (which I like and works well). Obviously, the architectural considerations are now different, and perhaps a bit more complex in light of the additional functionality in .NET 8. I'm hoping that it all comes together after a bit more study and experimentation.
You haven't lost anything, and if you want to continue just with WASM (so you can do PWAs), you can do that as well. There is a WASM-only template in .NET 8. If you decide to use full Blazor, though, all of your skills transfer. You just get extra features and ways of doing things.
But, if RenderMode decides if its going to be server or client side, what is the point of adding the component to server or client projects? I am a bit confused.
You put a component in the server project only if you are limiting it to being a server-only component. If it might be WebAssembly or Auto, put it in the client project. You can always make a component Server-only even though it is in the client project.
Any way you can make a vIdeo on HOW to DEBUG this type of project? , since it uses both server and web assembly, the normal debuging on Visual Studio no longer works, Break ponts do NOT work on either the Server Project nor the Web Assembly :(
I'll probably do a video on debugging, but I don't know what you mean about the breakpoints. I put breakpoints in and they are hit, even when the component is marked as Auto.
@@IAmTimCorey Thank you for replying to my question, your videos have helped me a lot and I appreciate your work. What I meant to say is that: On the Client Project, the breakpoints I use on Visual Studio, no longer work, for example, If put a breakpoint inside the "protected override async Task OnInitializedAsync()" method or the "protected async Task FormSubmit()" Visual Studio does not stop Furthermore, perhaps I've done something different this time but it does not stop on the Server side either (Note that: I have lots of other projects functioning correctly) 😕
I'm confused, why can't you do interactivity if the page is Server Only, i.e. no websockets?
If the page is using SSR, the page is rendered on the server as HTML and CSS and then transmitted to the client. There is no code-behind running on that page because there is no code on the page. It is the same as a PHP page or an MVC page. In order to get interactivity, you need to either use JavaScript or you need to use WebSockets (Blazor Server) or WebAssembly (which is actually running on JavaScript). You need some type of code to get interactivity.
@@IAmTimCoreyThanks Tim, I'm thinking of PHP or MVC using javascript to call back to the server to execute a function or get data, but that doesn't appear to exist. Why can't AJAX be used to call an SSR page? I'm thinking it may be possible by calling the component via AJAX and having it return whatever you want, but I'm too new to this to know if that's a good thing to do.
You can use JavaScript on a Blazor page as well (or AJAX, which is JavaScript). That still works. But if we are going to do that, we can just use C# instead and make the page interactive.
Is it possible to create a PWA using Blazor?
Yes. Use the standalone Blazor WebAssembly template and select the checkbox for PWA when creating it.
I tried stream rendering just like you did but it always comes with delay. It does not load the page and show me "Loading..." text. Any of you guys have the same problem? Anyone can help will be much appreciated.
It sounds like there is something different about your setup. Try looking for those differences or just try running the standard template and see what happens.
@@IAmTimCorey actually i did a little dig on the internet. There is an issue about iis. İf i get that right it seems iis has buffering problem. İf I solve the issue I will get back here and inform you guys.
Excellent! Thanks for sharing.
is Blazor now the future? should i learn JS and react or Blazor if i am begnner?
If you are a beginner learning C#, learn C# really well first. Then learn Blazor. Then decide if you want to expand into JavaScript and React. The biggest mistake you can make as a newer developer is to spread yourself thin and not concentrate on any one area. You need depth of knowledge before you need breadth of knowledge.
@@IAmTimCorey do you belive that Blazor is the future and will replace soon React and JS for front developer? is Blazor also more easy than React?
@@user-rl4qz8be2qThere is no one "future". Devs will probably continue to develop using different stacks just like they have been doing up to now. Many may move to just using Blazor while others will prefer to continue with React or even JQuery.
@@user-rl4qz8be2q blazor is “easier” than react when you know c# really well.
This may finally help me convince the powers that be to let me rewrite "my baby" - I've managed a backend intranet piece for 20+ years that is still in framework web forms and is beyond pasta due to how many people worked on it for so long before the concept of code reviews and such were ever "things." I'm used to it all and have always been effective despite the mess but it's increasingly brutal to make sophisticated things happen. That and no other dev is ever effective in "my" code base because it's such a disaster - and most devs produced in the past 10 years that I've encountered seem to only be able to understand code they author themselves or that's Azure oriented as apparently MS has won the war and now most c# devs only learn how to do anything Azure and are oblivious to the history of coding and/or the fact that one can produce code without paying MS by the nanosecond for all things.
38:14 Don't u think u just found a bug in this one ? Interactive webassembly initially rendered as interactive mode server. Do u think it's fixed? That seems like a Bug to be honest. 😅😅😅😅
No, I still had server rendering turned on. My bad. Not Blazor Server. It renders once on the server to make things appear to load faster.
The Source Code link above sends a very old version of the Blazor project that is worthless for following this video with.
I updated it. Thanks for letting me know.
shall we drop JS frameworks in favor of Blazor for new projects, or not yet? AFAIK at the moment no one is using Blazor for something more than small scale apps or dashboards.
I always encourage people not to make radical moves, especially if you already have something in place. Going forward, I think this will make it easier to drop the JavaScript frameworks in favor of just Blazor. As far as people using Blazor in larger projects, they are out there but there aren't any that really advertise as case-studies. But don't forget, up until now Blazor fit a smaller niche. Now, it a platform that can handle a wide variety of use-cases. I think adoption for "regular" sites is going to skyrocket in the next year or two.
24:39 @*To allow increment*@ @rendermode InteractiveAuto Counter Copy Demo Count: @counter Increment @code { private int counter = 0; // private but still accessed by the page private void Incremental() { counter += 1; } }
Yep, they changed from @attribute to @rendermode after the video was created.
@@IAmTimCorey Thanks friend. Hope to see more .NET9 MVC, Web API, Min API, Razor Pages and Blazor Courses soon.
This example/code needs to be updated to reflect the changes re: @attribute [RenderModeInteractiveAuto] - this should be replaced with @rendermode InteractiveAuto, requiring an change to the Imports.razor file to include @using static Microsoft.AspNetCore.Components.Web.RenderMode. You will also need to update the package references.
Yep, they changed how that works right before launch.
My question is simple. What Microsoft sites are written in Blazor? My biggest problem with Blazor is Microsoft doesn't seem to want to dogfood it by building their own web based applications using it. It doesn't build any trust in the platform that it's not good enough for Microsoft applications.
That's not really a good litmus test. How many companies switch their enterprise applications over to a new technology without a really good reason? Bing runs on .NET. The Microsoft websites run on .NET. Requiring them to re-architect major systems to a new UI to "prove" that it works isn't a good test. Besides, up until now, Blazor had a very specific set of use-cases. Now with Blazor in .NET 8, it is finally entering a phase where it is broadly usable in almost any scenario. So now is when companies, including Microsoft, can start considering Blazor for that wider range of projects. Since major projects, like building full-scale applications like you want to see from Microsoft, take years to complete, it will be a bit before we see something like that from Microsoft. That doesn't mean they don't believe in it, though, nor does it mean that we can't trust it.
@@IAmTimCorey I'm speaking from having a HORRIBLE experience with Blazor server. Even going to consulting companies specializing in Blazor who were MS partners were asking what we were even thinking trying it. It didn't scale and was a massive flop, and webassembly wasn't ready (and I still keep up to date on a not so good debugging experience on webAssembly). Our management team said "enough" and we had to rewrite it all in angular because a) no shortage of commercially successful web applications are written in Angular and b) easy to find competent devs who can code typescript/angular sites. A key performance indicator is looking at who is deploying successful commercial web-based applications with Blazor, client or server, and that was a needle in a haystack. You're telling me ok now at .net 8, it is "finally" entering a phase where it's usable for these projects. I understand it takes time to make large scale applications and I'm not trying to sound like a jerk, but it doesn't sound like Microsoft itself has embraced and adopted it for Microsoft projects, or announced any roadmaps of any applications that will be written with it. So it gives the appearance that Blazor is good enough for us, but not for Microsoft.
Wish I had watched this before messing w this stuff lol
Well, hopefully it helps you now.
"Loading" not rendered. It's still awaiting for results. I think this was broken with official release. Also "StreamRendering" now has default enabled (without "true" parameter)
All this new Blazor stuff seem done on the rush. Surprising when .NET 8 is a LTS. I will not be surprised if there are again many changes (project structure etc...) in .NET 9.
Yes, the template now uses the implicit true instead of the explicit true. The action is still the same, though. As for the Weather page not showing the Loading... text, that seems like it is a problem on your machine or with your configuration. I just loaded up the release version of .NET 8 and ran the project. The Loading... text shows up just fine.
@SouleyThiam-oj3rk - That may be your perception, but I can tell you that it definitely wasn't rushed. The team has been working on these updates for a year and a half at least. I saw demos of these features a long time ago. What they did do is work really hard to make them stable and ensure that they are going in the right direction. I've seen their ideas of where Blazor could go in the future (.NET 9 and beyond) and I can tell you that it is definitely exciting. I can also tell you that they aren't rushing to put half-baked ideas into the product.
How much better and faster is it than the time-tested, Angular?
That's not really a great comparison. Is Blazor fast? Absolutely. But using Blazor is about simplifying your tech stack. If you are already building a backend in C#, why would you switch languages, add the complexities of npm, eslint, etc. in order to render a UI that you could have built using your existing tools, existing package system, existing build system, and existing knowledge? I will say that Blazor is also much more SEO-friendly, since the SSR and server rendering mean the pages are searchable as soon as they load rather than once the site is downloaded and the JavaScript is rendered.
The only downer with MS technology is that it's a roller coaster every new version as they hack the architecture. I like blazor, but I'm just so damn productive in webforms it's tough to justify the pain of an ever-changing new thing!
It is only ever-changing if you decide to keep changing it. For example, the Suggestion Site I built here on this channel was originally done in Blazor Server for .NET 6. I then upgraded it to .NET 7 (a 5-minute process). Just recently, I upgraded it to .NET 8 (another 5-minute process). However, I did not upgrade it to be a Blazor Web App. That is a more complicated change. However, I don't need to do that. It works just fine as a Blazor Server app. I can keep it that way if I want and not invest the time needed to transform how it works. Even though there are newer ways of doing things or new templates, that doesn't mean you have to use them. You can stick with what works for you and your project and continue to upgrade it with .NET without a problem.
@@IAmTimCorey fair comment, Tim. Blazor is an exciting technology, but I can't help thinking the Blazor bus has similarities to Keanu Reeves and "Speed" and can't slow down to let any passengers on or off! WASM should (and probably will) be great, but currently it looks like a small car crash with some bodging going on in the workshop to keep it on the road (i.e. Auto mode). It's all great and I'd rather be on a framework that's evolving than PHP. You have a lifetime's work ahead making these videos to keep the stragglers like me hanging on to the coat tails of the cool kids and Blazor! 😉
I don't understand why we need another project for WebAssembly components. I tried to use them in a main project but could not get them working. Probably this is a way to separate server razor components to not be exposed to outside world.
The second project gets compiled into a dll that can be downloaded to the client. We wouldn't want to send the main project down to the client, which is why WebAssembly components need to be in their own assembly.
I don't think. Net8 blazor is production ready. Only problems after trying to upgrade from .net7.
It is definitely production ready. That's what the official release means. As far as having problems, I've been extensively testing it for the past month and haven't had any issues that weren't fixed before launch. My guess is that when you upgraded from .NET 7, you missed something. You can't just change the version to .NET 8 for Blazor. You need to update the JavaScript file, change the structure of the app, and more. Basically, everything changed.
@@IAmTimCorey you can it worked for me.. had a blazor server app that been using for 3 years changed to .net 8 and worked fine.. u only need to do all that other stuff like javascript when you want to change it to use the new way with ssr etc..
Sounds like user error really. I also wouldn't have used .net7 in production since it isn't LTS.
@@okmarshallits still supported until may next year and you will upgrade to net8 before that anyway. Its just 6 more months extended support for NET6 compared to 7.
@@IAmTimCorey Can you make a quick video on upgrading to .net 8. I did all steps in the documentation without success.
I regret investing so much into Blazor. Like that old saying goes, it is simple until it is not.
I think the new Blazor is really simple. I think you are confusing simplicity with lack of functionality. There is a difference. A car is simple enough to use that a 16-year-old can use it, yet it is incredibly complex. We don’t need to stick with bicycles because they are simple. The Blazor you learned fully translates to this new version and you can stick with Server or WebAssembly if you want. What you have, though, are additional features that can make your app more powerful when you are ready.
@@IAmTimCoreyI think I might have expected too much from Blazor 8. I hate to point this out but just like when you where demonstrating client side rendering. You were expecting client side rendering and was surprised that the code first rendered on the server and then "refreshed" on the client when it was supposed to be exclusively client side. I have been surprised by a few things myself. It all started with the appsettings.json in the App project template to be honest. Like in this case, if the code is marked for client side rendering it should be executed like that, client side only. One would design logically around this assumption only to have it turn out that that is not exactly the case. Could talk for hours if not days about the gotchas but probably does not count for much. Thank you for reading my comment.
Another todo app😂 when using this for production its a hell. And alot of challenges and performance issues. But nobody shows that
Except I do: kzhead.info/channel/PLLWMQd6PeGY0cZFMqx5ijmdaD87sJKCsU.html That playlist is a production app that I built fully on video to show off how to use Blazor Server in .NET 7. I've since upgraded it (on camera) to .NET 7 and then .NET 8. The reason why todo apps are so popular for this type of video is because they can show you the full CRUD operation with very little "extra" stuff getting in the way. The point is to show off Blazor, not to build a real application. Building a real application every time would be foolish and wasteful. And yes, I will be doing a Blazor Web App full application series coming up soon. I just can't do it right away when it comes out.
Honestly, I am getting an impression that WebAssembly has largely failed as a technology. And the current iteration of Blazor clearly shows it. I suspect that's the reason SSR now has streaming.
I'm not sure what gave you that impression, because it is definitely not true. WebAssembly is a growing technology and one that more systems are relying on (remember that WebAssembly is an industry standard, not a Microsoft technology). The thing I think you are getting stuck on is the concept that it needs to be used everywhere. That's not true of any technology. Each has their place. WebAssembly has a lot of benefits for certain situations, but not every situation.
@@IAmTimCorey Blazor itself gives me this impression. It started as WASM project but since then it moved to SSR largely. WebAssmebly was a lso a promising technology to render HTML and JavaScript irrelevant, but after many years.... it really is a niche technology. I've been researching a new stack for my next upcoming project, and I was thinking: "ok, .NET 8 is out. Let's check it out. Maybe this time." And the answer is no once again, because I am not sure what's worse performance or sheer amount of resources required per user. That's pretty disappointing :(
I'm not sure how you are making these evaluations, but I would recommend you re-evaluate how you evaluate technologies. First, WebAssembly has always been niche because it isn't designed to be for every situation. You are essentially downloading an entire application and running it in the browser of every user. That can be great when you need offline availability and rich client-side interactivity, but that isn't the solution for every problem. By the way, Angular, React, and Vue act very similarly to WebAssembly. They also download the entire application to the client's computer before running it in the browser. Also, WebAssembly was never about rendering HTML and CSS irrelevant. I'm not sure where you heard that, but it is the opposite of true. We rely on HTML and CSS for WebAssembly projects. Yes, there are ways around that, but this is the most common pattern. As for .NET 8, what metrics are you even looking at? .NET 8 is faster than most other frameworks on the market. It made Blazor a lot faster, and that's before Blazor received a number of performance-enhancing options like SSR, Stream Rendering, and component-based client-side interactivity. As for the amount of resources needed per user, I'm not sure what to say other than "huh?". If you are using Blazor SSR, the user only gets HTML and CSS (just like you would with PHP or MVC). If you use Auto for a component, they download just what they need for that component. It is a LOT more efficient than before AND it handles a LOT more scenarios than before.
@@IAmTimCorey Thank you. That's very valuable input. I am continuing to evaluate Blazor even right now. And the reason I am looking at Blazor, because HTTP was not originally designed to be transfer protocol for massive JavaScript libraries, which render HTML. After working on number of very large projects that included Angular and Vue.js, I just cannot stand them, because your front-end shouldn't be tens of thousands of lines of JavaScript talking to brittle micro-service backend built with Node.js
For anyone following along, as of Microsoft Visual Studio Version 17.8, @attribute [RenderModeInteractiveAuto] attribute on Demo.razor should instead be @rendermode InteractiveAuto
Yeah, they just changed it. Gotta love that.