How to Fetch Data from Server in Blazor Interactive Auto Render Mode - .Net 8 (Easily and Securely)

[@Jorgearananeyra]

Good solution, it is the first video that explains how to get the httpclient to work in .Net 8, however, it seems that it is too complicated to make it work on each page that we add. I think the developers forgot that this is important for a real application. Well, all we have to do is wait for .Net 9 to come out while I return to .Net 7

[@JaimeWyant]

Great video. I agree with the guy that recommended solely using the API call. This gives you one interface and implementation that you can have in a shared project. This was a good explanation of InteractiveAuto - thanks!

[@abhayprince]

@@JaimeWyant but then there is that problem - Fetching data from the same app server via http call to the same app server. That does not make sense

[@JaimeWyant]

@@abhayprince It makes sense if you're thinking "I only want to do this one way". Which is generally how I like to do things. I understand your preference for using the service when running in server-mode. I would have just extracted it myself to an httpclient. I always create a separate API for my blazor apps, and never thought to just create the API directly in the app itself. That's a nice idea!

[@craigmusicdude]

This solved a problem I spent hours trying to understand. Thanks!

[@waleedbensumaidea3947]

Thank you so much Mr.Abhay for this great video. You did nice explaining about Blazor Auto render mode and the scenarios that we got when choosing this approach. We would be very grateful for you if you also do video abuse Blazor NET8 authentication and Authorization using JWT with AutoRender Mode Because this approach has some difficulties like RevalidatintServerAuthinecationStateProvider and so on...

[@josepheffanga2069]

How about moving the interface of the services and its implementations into a library and reference them on both server and client?

[@abhayprince]

The problem would be implemented class. When it will run for WebAssembly it will try to directly call the database which does not exist on the client side. So it’s not going to work

[@tomnewport9011]

I am following this though with a new app build. I have created 3 libs, services.server, services.client and services.interfaces. services.interfaces is shared and the other 2 go to the respective client or server. This is working for .GetAsync() but I am now trying to refactor to use .PostAsync(jsonObj)

[@halheinrich8238]

Thank you for the video! Very helpful and much appreciated.

[@yurilukashenko3175]

Thank you so much for this video, it really helped me to understand how Interactive Mode works! This DI for two implementations on server and client is a really wild thing (in a good sense), I appreciate your idea. By the way, I created a regular controller instead of a minimal API. But it is also a good approach.

[@AnnaThomas-d2f]

Regular controller is not working for me. I included the builder.Services.AddControllers() . But nothing working. Can you give an example.

[@manojnaik5643]

Nice video presentation and architecture of blazer components, I have implemented the business logic to post and get data from third-party API in the services project class library and referenced the same in the server project and API endpoints using a minimal API approach, how I can use HTTP client to access server minimal API endpoints in this case by creating proxy in my client(web assembly) project?

[@headcode]

Great video! A couple of questions: 1. When I try this and follow the steps in your video, it works fine, except when I browse to another page (click another link) and come back to "fetch-data." I get a 404 on the api request. The only step difference is I created an ApiController rather than using minimal api. 2. Why are there multiple calls to the service when the component loads?

[@abhayprince]

Using minimal api or controller should not change anything. Something else might be causing this behaviour Do you have some repo, I can review? For question 2 - it happens because of pre-rendering

[@MB-nw5sz]

Nice video thank you. Another approach might be to simply use the the api call in both the server AND the client code, making the code work the same in both.

[@abhayprince]

Then there will be an extra call from server. From the server side component we will make api call to the same server which does not make sense

[@MB-nw5sz]

@@abhayprince Ahh yes, but since it's auto render mode, it's only for the first call - just a suggestion to simplify the code. It would not make sense otherwise. Still nice to see another way of working, using the alternative interface implementation :)

[@nileshgr]

Very helpful in understanding how to use InteractiveAuto. Thanks!

[@hVSjRJ53]

Thank you 👍👍

[@pavelshkomov8777]

Thank you for this video! I see one small problem with this approach: the minimal api (/api/fetch-data) is accessible to everyone from the outside. How can I make it inaccessible to everyone except FetchDataBlazorAuto.Client?

[@abhayprince]

It depends on the requirement. We can implement Auth easily, and then add .RequireAuthorization() etc methods on minimal api endpoints

[@Don-ii4vm]

Excellent video. Thanks.

[@amusefly]

thank you very much,you saved many times for me.

[@xdiegors]

Thank you! Nice video!

[@olagisrarikis]

Excellent thank you! Saved me a lot of time.

[@shabanelmogy7912]

how can i sync between sqlite on mobile offline and remote database (restapi with sql server ) ?

[@waleedbensumaidea3947]

Did you find any solution for your question

[@shabanelmogy7912]

i nees example for blazor hybrid with mobile devices like camera/sound/contacts/send message/maps

[@shabanelmogy7912]

in blazor hybrid how can prevent button hover to show as native?

[@MihaiMoisei]

Thank you very much.

[@CheerfulMountainVolcano-Jay]

Demo on Client service using rapid would be appreciated.

[@abhayprince]

you mean Refit Client?

[@davemasters]

Helpful!

[@manojnaik5643]

can you please guide on how to make user login session in this architecture.

[@abhayprince]

Using cookie Auth. You can try creating a new project with Authentication Individual account, and then review the generated code

[@shabanelmogy7912]

I want Full Example For NaigationManager (kill component when close / prevent navigation on specific event)

[@Crisis742]

Thank you!

[@okcharles7]

I can't find any benefit of choosing interactive auto mode. Your way of fetching is just the same as you can under 3 tier model of web api + front end (blazor wasm).

[@abhayprince]

If you dont want you user to wait till the app downloads Mbs of webassembly to the browser, Its great to start with InteractiveAuto

[@tonymarks4694]

IF this is the only or best way of doing things then its utterly ridiculous on MS part ( not your fault). This should require nothing more than hitting an api and pulling in the data as is done with every JS framework with the framework itself taking care of the indentification and switching . Lets not forget that this whole issue of switching from signalR to webassembly is because webassembly takes too long to transfer to the client. so all this tedious work is just to compensate for a technology that cant run as smoothly as JS. Since for other things you have to already resort to Jsinterop you have to ask yourslef how much do I really hate Js to have to do all this? Using something faster and just as easy to learn like svelte is MILES better than this.

[@abhayprince]

I agree with this. Right now this is the only way. There is a library which makes it easier to write, cannot remember its name right now. They do all this for you

[@nicolasgonzalezl]

Great video. Thanks!

[@shabanelmogy7912]

in blazor hybrid how can prevent button hover to show as native?

[@abhayprince]

using css styles. You need to play around with css