.NET 8 Blazor: Render Modes + Demo App Download

What are render modes in Blazor? When should you use them? We built an app you can download and see how each render mode works.
Link to GitHub repo:
github.com/CoderFoundry/Blazo...
-------------------------------------------------------------------------------------------------------
👨‍🏫 Self-Paced .NET Bootcamp Course (Includes FREE courses)
learn.coderfoundry.com/
🙌 Support the channel and become a channel member
/ @coderfoundry
📖 Buy the Book: Breaking the Code
geni.us/breakingthecode-davis
👕 Grab some CF merch
teespring.com/stores/coderfou...
🗣 Join us on Discord
​ / discord
👓 Buy the blue-light blocking glasses we use at CF. Pixel Eyewear Glasses ($5 off with coupon code CODERFOUNDRY)
www.pixeleyewear.com/?ref=jsF...
💻 How to get your first coding job
coderfoundry.com/jobroadmap
🎥 The equipment we use at Coder Foundry
kit.co/CoderFoundry
DISCLAIMER: This video and description may contain affiliate links, which means that if you click on one of the product links, we’ll receive a small commission. This helps support the channel and allows us to continue to make videos like this. Thank you for your support!

[@betterlifeexe4378]

My wife is starting to learn C# and HTML at the same time, and i've already got her making a blazor shopping cart. It's really amazing how much you can accomplish with go tutorial and a good framework like blazor.

[@CoderFoundry]

That is awesome!

[@DarkOutsideNow]

Amazing video. As a new coder, I'm making a professional web app by myself. I understand the different modes better, their limitation, and how Auto places it's role in Blazor. The video covers the render modes , understanding the communication per rendermode, and helpful visuals. I am so excited that I found your video. Its what I needed.

[@nickmillerable]

This is a great idea for a sample app, great job.

[@CoderFoundry]

Glad you think so!

[@emcwealth]

i've been using blazor professionally since .NET Core 3.1.... ever since I first saw it, I knew in my gut that this was going to be the future for web development (i've been writing software for 25+ years)... it was that good back then... and now it's pretty phenomenal...!

[@CoderFoundry]

Yes it is great.

[@MrFEMGM]

Very useful video and example, thanks a lot. Blazor is really an excellent choice for many cases.

[@CoderFoundry]

Glad it was helpful!

[@mohammadmz1058]

Excellent video, very good explanation.

[@CoderFoundry]

Glad it was helpful!

[@coderbdev]

Very helpful. Thanks :)

[@CoderFoundry]

Glad we helped. We will make more.

[@FearGod123]

Thank you very much !

[@CoderFoundry]

You are welcome!

[@richardc215]

Good stuff.

[@CoderFoundry]

Thanks!

[@kvelez]

Cool

[@CoderFoundry]

Thanks

[@enriquesneffels3053]

​ Hello, @CoderFoundry ! Do you have any plans to update your self-paced bootcamp online to .net 8 and the latest version of C#, and Blazor? I saw the course, but it looks outdated. It doesn't have Blazor, and it shows .Net 6. I would like to learn C# and Xamarin with you, sir.

[@CoderFoundry]

We have a .net 7 blazor course that builds an app called ai chef. It uses blazor wasm, c# web api, and the open ai api. The very latest production version of .net. .Net 6 mvc is still relevant. There are no real changes to mvc under .net7. So we kept it the same. .Net 8 has not been released yet. It's still in preview. We will create new .net 8 content in early 2024. Since .net 8 will not be released until November 2023. We have to wait until it's ready before we can record new content. I hope that helps.

[@enriquesneffels3053]

@@CoderFoundry thanks so much for clarifying. I

[@waleedbensumaidea3947]

Thank you so much. I'm learning Blazor for the first time on NET 8. I start working on enterprise application using blazor net8, but I got confused by those render modes. Like which render mode should i choose for each page in my project. Also because there is two projects Server and Client. Here comes new questions about pages location. Where should i put my pages. Because there is two folders called Pages in Both Server project and client Project. 😂 Sorry, but i feel like i lost in Blazor. And if i put most my pages in client project but i let their render mode to interactiveServer Does that mean no matter where pages are located, the important thing is render mode

[@CoderFoundry]

You need client and server projects. We are releasing a course soon that will help.

[@sammynava5357]

When testing the SSR - Stream page on my development PC (after uncommenting the delay), I noticed that the "placeholder effect" only works when using Kestral to run the solution. If I use IIS Express, the page does not load at all until the delay is over. Is that expected behavior?

[@CoderFoundry]

I just tried it and that seems to be the case. In production, it works as expected.

[@maacpiash]

Can we do AOT build for auto mode, i.e. initialize with SSR, then download WASM files (instead of DLL files and the Mono runtime) in the background?

[@CoderFoundry]

So auto mode will run the component first with SignalR. The reason that it does not use SSR is because interactivity has to be coded with js. SignalR and Wasm will use identical code base. The only difference is the render mode attribute. With Auto mode the component first runs with SignalR then in the background the files needed for WASM are downloaded.

​@@CoderFoundryIs there an automatic hand-off between server and wasm versions when the files are ready? Or is the component stuck on server mode until navigation/refresh?

[@dawiemos]

I keep on getting this error: Severity Code Description Project File Line Suppression State Details Error CS1061 'IRazorComponentsBuilder' does not contain a definition for 'AddServerComponents' and no accessible extension method 'AddServerComponents' accepting a first argument of type 'IRazorComponentsBuilder' could be found (are you missing a using directive or an assembly reference?) Server C:\Users\XXXX\source epos\EmboBlazorRenderModes\Server\Program.cs 9 Active

[@CoderFoundry]

This built with rc1 and rc2 has been released. We have a rc2 branch on github

[@dawiemos]

Thank you for the video and the reply@@CoderFoundry

[@ProDevelopmentPK]

What If entire Application is Server Side Interactive but I want to make one Component like Login a Static Server. As it doesn't have any attribute how can I do this ?

[@CoderFoundry]

Yes. Login would be interactive. But you could for example have a static home page. That is just html and links. The sample actually does this out of the box. So you can mix any of the render modes.

[@Blr046]

@attribute [RenderModeServer] is giving compile error in MovieListSignalR.razor Error (active) CS0246 The type or namespace name 'RenderModeServerAttribute' could not be found (are you missing a using directive or an assembly reference?)

[@CoderFoundry]

This changed with rc2 to @attribute [RenderModeInteractiveServer]

[@Blr046]

@@CoderFoundry Thanks a lot. I liked the LIVE Coding video to keep the razor files clean. Could you please demonstrate the API project as well for this series along with a basic CRUD operations?

[@CoderFoundry]

We will do more coding focused videos. We also have a new course coming out in Jan 2024 that will cover everything.

[@Sladeofdark]

Does WASM have the same problems as Silverlight?

[@CoderFoundry]

Silverlight was a plug-in technology. So they are not the same in any way. The reason silverlight was deprecated along with flash was plugins were removed by the browser venders. Wasm is an approved language for all browsers. Its a standard the same as javascript is. We build wasm apps with all api endpionts, CSS and html. Wasm sits in the middle and updates the dom so we don't have write dom update code in js. We will build apps in a modern stack and it is part of the specification for browsers. It is going to be fantastic.

[@mouradaissani8957]

not the same at all

[@ericblankenburg]

Blazor is not a plugin. It uses web assembly, which is a standard part of all modern browsers.

[@tjf7101]

Possibly dumb Q. This is something the September cohort will be building?

[@CoderFoundry]

No it's in github as a public repo

[@AmirImam-ir5gb]

Blazor is the best front end framework, but it is not popular here in the middle east (Egypt for example). I think we need some support to replace flutter with Blazor

[@ProDevelopmentPK]

Using .NET8 RC2 I created a Blazor Server App with Global Interactivity and with Identity Authentication, then I added MudBlazor to Make it look better and Layout worked but not the Interactivity until I set it up in App > Routes and If I do that then Identity's Login component stops working. This is a total mess there is no documentation on how to solve this, Without Interactivity I can't validate Register/Login Components and Can't show Snackbar Message or Check Boxes. I think you should make your next video playing with Authentication and Interactivity with Blazor Server App.

[@CoderFoundry]

We are doing a live coding session Monday but authentication is not this code along. We are building the course now that does include auth.

[@ProDevelopmentPK]

@@CoderFoundry Looking forward to that Session and course. There is also CustomAuthenticationState thing in Blazor may be include that as well in your course. So, we don't use Identity stuff at all (Its Tables and Code First thing)

[@CoderFoundry]

The course will cover indentity in detail. And it will also build a visual studio template, so instead of using the web app as a starting you start with web app plus db and indentity. Makes it easy to start new projects.

[@CoderFoundry]

At the time I'm writing this, you can not use global interactivity with identity. But this is a good thing it makes these pages really fast.