.NET 8 Blazor🔥All Render Modes (SSR, Server, WebAssembly, Auto) Explained for Beginners

Поделиться
HTML-код
  • Опубликовано: 28 дек 2024

Комментарии • 92

  • @TohidAzizi
    @TohidAzizi 9 месяцев назад +9

    Definitely, the best video I have seen so far trying to explain and differentiate SSR, Server rendering, WebAssembly, and Auto rendering. Thank you, Patrick.

    • @vittoriomorellini1939
      @vittoriomorellini1939 28 дней назад

      Question: in interactivity server mode the socket is responsible of js on the client that generates interactivity. The page is not full reloaded on the browser at the user action. Is it correct?

  • @christiantricarico
    @christiantricarico 11 месяцев назад +14

    Starting from a project without interactivity and adding the pieces step by step really help to understand new blazor features. Good job!!

  • @anandvgchennai1974
    @anandvgchennai1974 26 дней назад +1

    I've been using .NET & Angular till now. I am planning to use Blazor from 2025. Just wanted to know the difference between WebAssembly & Server Side. I happen to see this video. Absolutely amazing. Easy to understand and very well explained. Thank you so much.

  • @HenningKilset76
    @HenningKilset76 8 месяцев назад +10

    I really appreciate how you pull apart the default templates and show what actually matters. Thanks for that.

  • @maykonelias
    @maykonelias 10 месяцев назад +3

    Very nice, the best explanation about how the rendering works, thanks for share Patrick!!

    • @PatrickGod
      @PatrickGod  10 месяцев назад

      My pleasure! Glad you enjoyed it and thanks for your feedback!

  • @xakzpc
    @xakzpc 11 месяцев назад +4

    Ironically perfect timing. I wanted to start explore htmx + Blazor SSR today and here is a brief introduction of render modes. Thanks 👍

    • @PatrickGod
      @PatrickGod  11 месяцев назад +1

      Glad I could help!

  • @tamasbalog1569
    @tamasbalog1569 2 месяца назад +1

    Wow. What a nice spontaneous video. I just love it. ".. or we could do and move that to... You know what? Let's do that."

  • @silvio_bassi
    @silvio_bassi Месяц назад

    Very enlightening! Thank you for your content! Simple to understand...

  • @ちゃこる-m9h
    @ちゃこる-m9h 4 месяца назад +3

    Your explanation of Blazor render modes was incredibly clear and helpful. I was quite confused before, but now I have a much better understanding. Thank you so much!

    • @PatrickGod
      @PatrickGod  4 месяца назад +1

      Thank you so much for your kind words! It means a lot to know that my explanation made a difference for you. Keep diving into Blazor!

  • @jimvacca7101
    @jimvacca7101 11 месяцев назад +2

    Great content! I had already learned most of what you shared but love that you put it all together!! And I was tempted to start with a SSR project and add the other items to convert to the other project types - so thank you for doing that and showing us the magic that occurs!! Great stuff and big fan of your content!!

    • @timroberts_usa
      @timroberts_usa 11 месяцев назад

      good -- to understand how to convert my various render modes and related project(s) structure and dependencies.

  • @stefanozotti9790
    @stefanozotti9790 2 месяца назад

    Great tutorial, concise and comprehensive. Thank u very much!

  • @phin01
    @phin01 2 месяца назад +1

    Incredibly helpful. I wanted to remove global Server rendering from an existing web app but wasn't really sure how to tackle it, now it's all pretty clear!

  • @NazeerBashaShaik
    @NazeerBashaShaik 9 часов назад

    Awesome explanation thank you so much for providing one more great video.

  • @achmadzackyr
    @achmadzackyr Месяц назад +1

    Thank you, I have a project in interactive auto then create component in Server/Page. At first second it shown, after that it is redirecting to Not Found Page. Is that expected when I choose auto?
    I just want to make a SEO friendly page so I make the page on the server project.

  • @cfeze
    @cfeze 10 месяцев назад

    Thanks a lot! I was confused about how this works now I'm getting because you!

  • @gvberhveh
    @gvberhveh 3 месяца назад +1

    Great video man! Subscribed instantly.

    • @PatrickGod
      @PatrickGod  3 месяца назад

      Thank you so much! ❤️

  • @xaberue
    @xaberue 5 месяцев назад +1

    Amazing and simple explanation Patrick! thanks for sharing it

    • @PatrickGod
      @PatrickGod  5 месяцев назад +1

      Happy to help! 😊

  • @warrenhales
    @warrenhales 8 месяцев назад

    Excellent video. Starting from the Interactive Render Mode: None template and adding everything in step by step to get all the way to Auto was extremely valuable to me. Thanks Patrick!

  • @watershedmetal2
    @watershedmetal2 2 месяца назад

    Best explanation of this on the internet

  • @TheGentleMan_Once
    @TheGentleMan_Once 3 месяца назад +1

    That's great presentation. Thanks !

  • @BarriDuty
    @BarriDuty 11 месяцев назад +3

    I didnt know you could use forms in SSR, I would love a video on that

  • @flyaway319
    @flyaway319 8 месяцев назад +1

    nice... is auto the same as united?

  • @andvik84
    @andvik84 11 месяцев назад +1

    Great video!
    A question I'm wondering about: How does it work with signal-R circuits if you land on a completely static page, and then go to an interactive component? How does scoped services work with this?

  • @healthyliving9746
    @healthyliving9746 11 месяцев назад +3

    Is auto rendering mode can be use for manage the database? for instance if the connection is lost then we still can use 'local db' and after the connection established then we use the 'server db'? and how about synchronize the data between 'local db' and 'server db'? please advise...Thank you.

    • @waleedbensumaidea3947
      @waleedbensumaidea3947 8 месяцев назад

      This sounds cool to be implemented. But will be hard to implement it.
      Have you did that yet?

  • @AvinashGadiraju
    @AvinashGadiraju 11 месяцев назад

    Great intro video, Thank you!! Saved my day.

  • @tk5782
    @tk5782 5 месяцев назад

    Very interesting, thank you. Is there any benefit to using the client/server project approach?

  • @djordje3d
    @djordje3d Месяц назад

    Great sistematic knowledge transfer! Bravo!

  • @gianfrancodiaz6486
    @gianfrancodiaz6486 9 месяцев назад +1

    I loved this explanation! Now I know what VS does in the background when I choose the Blazor Web App template.
    Would it be possible for you to teach us how to set up TailwindCSS in Blazor 8?

  • @Tetsukeii
    @Tetsukeii 2 месяца назад

    Thanks for making this from the ground up. Definetely clicked that subscribe button :)
    I'm curious though why we're adding the MyButton Component on the client side and adding a reference to the client on the server.
    That feels pretty odd and against common patterns where the server should never depend on it's client (should be the other way around).

  • @johndirksen4617
    @johndirksen4617 4 месяца назад

    Thank you, this helped me a lot!

  • @The-Z-Zone
    @The-Z-Zone 11 месяцев назад +2

    These new render modes are very confusing. The example done in this video would have been a much better set-up for the boilerplate code to show the minimum required to get it working. Great video

  • @26anti
    @26anti 11 месяцев назад +1

    In Blazor, the render in auto mode allows you to use both the server and WebAssembly. Therefore, the purpose of this mode would be to leverage the server for the initial load, thus avoiding the WASM problem on other pages. Additionally, you can use the server on specific pages if necessary. I am right?

  • @FearGod123
    @FearGod123 11 месяцев назад

    Great video. Thank you Patrick!

  • @oluwatosinaboluwarin8653
    @oluwatosinaboluwarin8653 11 месяцев назад

    Great improvement from your previous videos on this topic, it is clearer now. I also want to ask, why in a real-world application would I want to have a Blazor Web App with the Interactivity Location set to "Per page/component" but not "Global"

  • @georgestavrou8785
    @georgestavrou8785 11 месяцев назад

    Really nice video and i learn and refresh a lot of knowledge here. I would like to see also how services works? Singleton, Scoped, etc when you are using different render modes.
    Can you have a video for Services also as this video of how the lifetime of each service works depending on the render mode???

  • @marcovelazquez5689
    @marcovelazquez5689 5 месяцев назад

    Excellent video! 👍

  • @richardschofield2201
    @richardschofield2201 20 дней назад

    Just thinking on the best way to organise razor pages.
    Since the client project can render on the server, webclient or auto, would it make sense just to put all components in the client project and decide there where to render?

  • @alkishadjinicolaou5831
    @alkishadjinicolaou5831 7 месяцев назад

    How does this affect MAUI Blazor Hybrid ?

  • @alfonsdeda8912
    @alfonsdeda8912 11 месяцев назад +1

    Hi Patrick, very nice explanation!
    I have one doubt, when is convenient to use old server mode over auto mode?

  • @Artokieffer
    @Artokieffer 11 месяцев назад +2

    And how do you access data with a Web Assembly component when you need real data and not just a simple counter who doesn't need any call to your Blazor "server" project ? Because I've seen so much examples of the new render modes but no one is talking about how you retrieve real data when using a Web Assembly component. Do we need to create an API project just to manage some call which will only be used in Web Assembly render ?
    Because the other day I was trying to create a controller API within the Blazor "Server" project to be accessible by the Web Assembly but it didn't work.

  • @MaggieGod-x2w
    @MaggieGod-x2w 11 месяцев назад +1

    You are the best ❤

  • @acmesoft
    @acmesoft 11 месяцев назад

    Really helpful! Thank you!

  • @ImranKhan-nc7wp
    @ImranKhan-nc7wp 6 месяцев назад

    This was the best one

  • @10Totti
    @10Totti 11 месяцев назад +2

    So if we use auto mode to read data from a database, do we have to create two interfaces, one for Server mode and one Wasm?

  • @sarikaransubhe6562
    @sarikaransubhe6562 8 месяцев назад

    Indeed it helped 🤩 Thanks

  • @Wynnytsky
    @Wynnytsky 10 месяцев назад +1

    What I'm observing is that the WASM module is completely lazy, and only downloads if you touch a route it serves. So if a user doesn't have certain roles then he'll be spared that background download. That's the holy grail for performance and security -- it's safe to include admin WASM module in your public site. Also, this is the first time I've seen a Program.cs executed in a project that isn't flagged for startup. Blows my mind!

  • @enricoroselino7557
    @enricoroselino7557 11 месяцев назад

    okay then the practices is to put server interactivity in server project and wasm interactivity in client project ? or it can be live in one project whatever the rendermode ? what do you think the best ?

  • @Bleep0Bloop
    @Bleep0Bloop 6 месяцев назад

    I know you advertised the academy.. but I find this useful, and you easy to listen to. So I was wondering if you might have Udemy courses. I haven't checked but I have a subscription there. If you don't its fine, I'd just like to see your courses there.

  • @GeromeGuillemin
    @GeromeGuillemin 11 месяцев назад

    Nice video as usual Patrick! Now I come with a question: I have a Net 6 stack project with ASPNET Core as server and WebAssembly as client. In my client I have an appsettings that indicates the server address where the client has to connect to reach server. How to define the server endpoint with the new stack in Net 8 as of now in order to be able to deploy and use such a solution ported from net 6 to net 8 ? Any advice or a small video on that point please ? Thanks again and keep up the great work!

  • @RashakaVLOGS
    @RashakaVLOGS 11 месяцев назад

    Great video! Thank you, Patrick. Can you do the Blazor together with TabBlazor template?

  • @OPEN_OVER
    @OPEN_OVER 2 месяца назад

    it is possible to run just on solution and make defrent render mode component ?

  • @pinyorungoral6037
    @pinyorungoral6037 5 месяцев назад

    Can I use server render mode under client component?

  • @oncalldev
    @oncalldev 11 месяцев назад +1

    Really enjoy these short overviews. As I get deeper into Blazor with all the variations between server and client interactions, it's becoming apparent that there's a need to really spend the time and organize my code and structure so I can even find what I'm looking while building out an application. Time to step back and think more about such things as architecture, folder structures, naming conventions, etc. Hmm, sounds like a possible future video.

  • @erenozdemir9247
    @erenozdemir9247 7 месяцев назад

    Great video

  • @amirameri1354
    @amirameri1354 8 месяцев назад

    Nice video . How can i Used Server side like controller API on Blazor app with auto(server and webassembly) with individual account ? it is good because i can used authentication and authorization for API on Server side. Thanks

  • @SebastianReyesjsrc1990
    @SebastianReyesjsrc1990 11 месяцев назад

    Hi, Good Video, Can i put @rendermode InteractiveWebAssembly in a page that is placed in server project, or i need put it neccesary in client project

  • @suhutwadiyo
    @suhutwadiyo 11 месяцев назад

    thx ya..
    btw i can't breakpoint/debug on ButtonClick when InteractiveWebAssembly mode

  • @iamjosedev
    @iamjosedev 6 месяцев назад

    Good morning, a question. Why is it that when we create the interactive render mode as "WebAssembly" the server project is also created? With .NET 7 you only created a single project configured for WebAssembly. Thank you so much

  • @thegoatmachine980
    @thegoatmachine980 7 месяцев назад

    Thank you so much.
    What is the name of the community on twitter?

  • @mboycenyo
    @mboycenyo 11 месяцев назад

    If I have an InteractiveAuto component that retrieves some data from a database, we might do this directly when rendered on the server but via an API when rendered on the client. How do Blazor applications typically handle this? One thing you probably don't want to do is accidentally send your data access DLLs down to the client and potentially reveal a load of details about your database.

    • @TheAstroguypasa
      @TheAstroguypasa 11 месяцев назад +1

      I have been thinking about this. But looks like you will need to have an interface that is implemented on both client and server. The server one has access to the data access dlls. The client one simply accessing a http client. Then let Dependency injection work the magic for you.

  • @fahadaltafBA
    @fahadaltafBA 11 месяцев назад +2

    How we can host this new Balzor web app in azure?

  • @yassermian9913
    @yassermian9913 11 месяцев назад

    my question is that no matter what the render mode is...page is not going make a server trip like old fashion asp...ami right?

  • @AT_ASTATINE_85
    @AT_ASTATINE_85 Месяц назад

    Is it possible to use only project to support InteractiveAuto mode ?

  • @MrBenix181
    @MrBenix181 10 месяцев назад

    Hello,
    I still don't understand the practical used case of when Using WebAssembly or Server side render. Particularly when it comes to choose the blazor project in VS, we have too many choices. From which Blazor project to its Render mode.
    How to choose according to the future app ?

  • @ankeshankur3058
    @ankeshankur3058 7 месяцев назад

    Hii , i want to understand which render mode we should use, because i am confused between interactive server mode or auto render mode...?
    Any plz reply....

  • @zantwed01
    @zantwed01 3 месяца назад

    Hi Patrick.
    I am trying to get user data from HttpContext in Blazor server in Net 8, I know that for InteractiveServer render mode it will always be null (httpContext). I have the cookie loaded in the browser but to read that in a component with render mode IntereactiveServer, I did not found a way to do that. Should I need to create my client project, move all the content of the project (Grids, buttons, list, etc..) and have the server project as static and the client project as WebAssemblyRenderMode?.

  • @mibli2935
    @mibli2935 9 месяцев назад

    Followed the tutorial, everything works on each step except that I don't see Wasm downloading

  • @ivandrofly
    @ivandrofly Месяц назад

    Thank you

  • @programacion984
    @programacion984 4 месяца назад

    Can you explain how make custom authentication and authorization (jwt) with net 8? now it not work like net 7

  • @mithranr184
    @mithranr184 11 месяцев назад

    Hi @patrick i have a doubt regarding multiple openid implementing like login with google ,facebook and microsoft in blazor wasm alone without involving backend i have tried implementing seperately in three seperate wasm projects its works fine but i need all the there authentications in one wasm how to do that? please help.

  • @alialshreef2874
    @alialshreef2874 7 месяцев назад

    when chose project Server The Button in Counter the @rendermode InteractiveServer is not Working !! the Breakpoint ALL Button Not Working

  • @dfmf1982
    @dfmf1982 11 месяцев назад

    HI Patrick do you have a plan for create a cource NET MAUI BLAZOR APP... mix both tecnology.?

  • @yoannvisentin3465
    @yoannvisentin3465 4 месяца назад +1

    Mixing render can't expose critical information ? I feel like in use of mixing render it's necessary to be very careful.

  • @TheCorruptedClan
    @TheCorruptedClan 7 месяцев назад

    Not sure if anyone has insight on this but I am making a Blazor wasm / server app that can work online and offline. I have a page in the client that I specify the render mode as InteractiveWebAssembly and when I go to the page none of the methods get called like if I click a button, nothing happens, breakpoints not hit etc.
    But when I convert it to a component and specify the render mode on the component like then it works and methods are hit.
    Anyone got any idea why that is?

  • @techreviews-j1o
    @techreviews-j1o 10 месяцев назад

    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

  • @Aisaneslamchalandar
    @Aisaneslamchalandar 9 месяцев назад +1

    Yo

  • @ivandrofly
    @ivandrofly Месяц назад

    Another cool video about render modes ruclips.net/video/HZAdXx7-PnM/видео.html