Blazor Component Render Modes [Pt 8] | Front-end Web Development with .NET for Beginners

[@jimvacca7101]

One of the best explanations of render mode. Great job!!

[@ivandrofly]

00:00 - Intro 00:27 - Static server-side rendering (SSR) 01:28 - Enhanced navigation and form handling 03:40 - Streaming rendering 06:42 - Add client interactivity 11:27 - Set up interactive WebAssembly rendering 17:20 - Enable interactivity everywhere

[@ivandrofly]

For curious, the tools that he is using to highlight things is called ZoomIt from microsoft

[@huangjiawutw]

thanks for the Beginners series, short video, clear explanations

[@stoyandimov7914]

Great explanation. Thanks for using vscode as well.

[@plcworker]

11:28 How would you do it from Visual Studio?

[@abdulsalamelsharif5387]

Thank you, This is a clear explanations

[@kourosh234]

Thank you so much for another great video. Your videos with Steven Sandersons videos are the best :) Is there an example with Blazor interactive auto render mode and custom jwt with roles?

[@tinpochan5547]

So with 4 different mode - Static Server, Interactive Server, Interactive WebAssembly, Interactive Auto, when use which? This is kind of confusing... At the first impression I thought using Interactive Auto would be having some advantage on performance, but someone below stated it’s actually slower than InteractiveServer.

[@wusswuzz5818]

Creating a blazor project (dotnet new blazor -int Auto) results in warnings like "Found markup element with unexpected name 'PageTitle'. If this is intended to be a component, add a @using directive for its namespace." These are fresh new projects therefore the warnings are curious. How do you resolve that?

[@muhamedkarajic]

Dose this mean that e.g. I have always to keep the App.razor as a ServerSide rendered component even doe I wanna only use InteractiveWebAssembly?

[@arabiceasycode]

Well explained, but Blazor behaves differently using Visual Studio, I don't know why? but using vs code in Mac it works exactly as video.

[@victorcates9330]

I understand the render modes in isolation, but put together? Do the render modes interleaf safely? When things work automagically, I'm always afraid of whether I'm about to be bitten by things stopping working and suddenly having to deal with massive complexity. Is everyone else watching this with a befuddled expression or is it just me?

[@Autystyczny]

Don't worry, it's working. I was already trying this out. You can specify the render mode per component / page or per the whole app.

[@victorcates9330]

@@Autystyczny Good to know. Thanks.

[@d3vwannabe]

I just thought Blazor is kinda similar to React up til this point. About rendering, does this mean Blazor also act kinda like a web server that serves SSR content? I suppose React does the same in development..? But in React you usually bundle and build everything into just 1 html, CSS, and JS for production. Or you could do SSR using next.js. But say in production using Blazor, if you want to have an interactive site do you either have to serve WebAsm stuff, html, CSS, js... by some generic server like Nginx, or you need to have Blazor running as a server where it will generate server side rendering and return the SSR HTML, which act like next.js? Also, isn't stream rendering something handled by the backend?

[@d3vwannabe]

A little bit confused on how it achieves stream rendering. I would appreciate further explanations/examples.

[@eduardogoncalvesdossantos4323]

In the standard project, the "IncrementCount" function with "@rendermode InteractiveAuto" is very slow on first access, it does not have the same speed as "@rendermode InteractiveServer". In subsequent accesses the increment is automatic, very fast! I thought "@rendermode InteractiveAuto" would open websocket at the same speed as "@rendermode InteractiveServer".

[@osman3404]

I wish there was client interactivity but without Signalr or WebAssembly.

[@Autystyczny]

there is to some extent. That's what [streaming rendering] does when injecting the data. Usually you'd wait to see the page until all of the data loads in but with it you don't have to. Also - the default SSR is working just fine with forms etc. so there is interactivity to some extent.

[@SBDavin]

Then your choices are JavaScript with a good library (jQuery?) or maybe with a framework like Htmx.

[@ivandrofly]

Another cool video about rendermodes kzbin.info/www/bejne/eZDFioOkYrSHqtk

[@rushas]

I don't understand why he didn't use VisualStudio to show us the UI for creating those projects, but rather, he used VS Code with a terminal to create solutions.