Mastering .NET 8 Blazor: Server-side Rendering (SSR)

Рет қаралды 9,156

9 ай бұрын

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!

Пікірлер: 42

@bripowered 9 ай бұрын

Thanks Bobby! I'm looking forward this.

@CoderFoundry 9 ай бұрын

Glad it helps. More content on the way.

@rafapioli75 9 ай бұрын

Great content! I'm excited to use Blazor 8!

@CoderFoundry 9 ай бұрын

It's going to be great

@andresbeltran5779 5 ай бұрын

Very clear explanaition

@CoderFoundry 5 ай бұрын

Thanks

@osman3404 8 ай бұрын

Honestly I would use Server Render + JavaScript for interactivity and stay away from Blazer Server and it’s SignalR dependency.

@CoderFoundry 8 ай бұрын

I think render mode auto with web assembly is going to be the way.

@PortalUser2 8 ай бұрын

In that last part of the video (using javascript on the static rendered page) another alternative, compared to using javascript, would be to define a route such as /movies/{movieId} and if that route movieId value was supplied, you would render the modal. That way, you could let the progressive rendering work its magic. If the user clicked on a movie sending the browser to /movies/10123, the modal would be rendered, and if the click "close" it would send the user back to /movies. Each time the progressive rendering should just DOM update what needs to be modified on the page, so it should at least look nice. Of course it would not be as efficient because the browser would technically fetch the page each time, but it should DOM update only the modal if that was the only difference. Also you should be able to do it in a way that when running as WASM or traditional signalr server the same stuff happens without needing to change any code (and the client router should handle the navigations). One other benefit is you could directly link to the details with the modal open.

@CoderFoundry 8 ай бұрын

I will try it out.

@jamisonr 8 ай бұрын

This is what seems intuitive to me. I'm trying to get away from Angular for my personal projects. It feels a bit like using an ng-template for placeholders until you get your xhr response back and then render in an ngFor. Only it's on server and not browser. If I'm going to have to write a lot of javascript, I'm going to do it with typescript and Angular!

@chairmakerPete 3 ай бұрын

Seems like a kludge, but clearly explained 👍

@CoderFoundry 3 ай бұрын

Not sure what you mean. It's a feature built into Blazor.

@brianking8883 9 ай бұрын

This powerful

@CoderFoundry 9 ай бұрын

Thanks!

@rpreviato 7 ай бұрын

Great video, lots of content that I didn't see in other videos from MS. My question is about your custom site.js file that you put it into you App.razor. Is it possible to do that with a per page js? Something like Index.razor.js and call a js function that is in that file? I pulling my hairs off trying to do that, even with RCL and I can't find a way to make that happen. I'm not a javascript guy :( I ended up doing the same thing that you did, but I don't think that is the best solution. For that reason I would like to create a per page js file with functions that regards with that page. Is something like having a @Section scripts { } in your page. I tried the new SectionOutlet and SectionContent, but that didn't work as well.

@CoderFoundry 7 ай бұрын

You can do isolated js. But you have to use an export and import pattern. I will make a video.

@user-up8qv3ts2w 4 ай бұрын

Hi , i like what you are doing , Please 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

@shameermulji 9 ай бұрын

Can students get through your bootcamp using a Windows on ARM laptop? I have an M2 MBA and I know MS now officially supports virtualization of WoA via Parallels for Mac.

@CoderFoundry 9 ай бұрын

I use windows on Mac m2 hardware via parallels. it works great.

@shameermulji 7 ай бұрын

@@CoderFoundry If you don't mind me asking, what RAM and storage configuration is your M2 MBA?

@CoderFoundry 6 ай бұрын

32 gb of ram and external 2tb m2 ssd for code files.

@wadecodez 5 ай бұрын

non c# dev looking into current state of blazor, does ssr and streaming mode work well with SEO? when I checked out blazor a few years ago it could only render to wasm which made it near impossible to rank on google.

@CoderFoundry 5 ай бұрын

SSR is server-side rendered. Each page has a predefined route and returns a complete page. So yes, this works for seo.

@shjaaz4139 9 ай бұрын

hey bobby , I hope you're all good. can you make portfolio review videos . Its been 4 month since the last one.

@leander8247 9 ай бұрын

Is it correct that even tho using ssr there is still an active websocket connection?

@CoderFoundry 9 ай бұрын

No. It's completely server rendered.

@JacobVisick 9 ай бұрын

The only time there is an active websocket connection is when you use interactive server mode via SignalR - e.g. using auto mode or @attribute [RenderModeServer]. In the case of this video, it's static server rendering or streaming rendering, neither of which uses an active websocket connection. The page is completely pre-rendered on the server and sent to the browser as static HTML. Streaming rendering leaves the response open until async tasks have completed on the server and then patches the results into the DOM, but it does not require any websockets.

@dovh49 6 ай бұрын

This seems like it would be a good to use with HTMX. The components, I'm assuming, called be rendered like partials and sent back down?

@CoderFoundry 6 ай бұрын

Htmx is not needed we have razor markup and can tell a component where to execute. Server side or client side

@dovh49 6 ай бұрын

@@CoderFoundry Oh, that is really nice. I'll have to look into how that all works more. I've been a huge fan of HTMX and custom elements. But if I can element a dependency that is even nicer. And for business apps that actually need to be connected all the time, this pattern seems to be better and simpler.

@dovh49 6 ай бұрын

@@CoderFoundry Reading Jon Hiltion's blog posts on Exploring Blazor Changes in .NET 8. It makes it sound like if you want interactivity you need Blazor Server. So, I guess I'm missing something - since I don't see how you can just use HTTP calls rather than resort to Web Sockets. Also, I'm not seeing how you can send events down from the server to trigger other interactivity on the front end. So, to me it appears that you still need HTMX (or html-form) to have good interactivity with scalability (AKA less resources). The Razor syntax is also a bit jarring. It looks a lot like JSX, which I don't like, as React creates a bit of a tag hell. I like sticking closer to the metal, as far as possible. But maybe if I tried it I would decide it isn't too bad. That's one gripe that I have with custom elements, they do have built-ins but for some reason Safari refuses to implement them.

@CoderFoundry 6 ай бұрын

You have 2 choices blazor server and web assembly. You also have enhanced navigation with forms.

@RenanDuarteHB11 9 ай бұрын

Hi! what a great content! make some for blazor hybrid please

@pokepython 8 ай бұрын

Cant you just use Blazoredmodal for modals instead of JS?

@CoderFoundry 8 ай бұрын

If you want to sure. I have not tried it, but if it works well and you like how it is set up, go for it. This video is to show you how to create components and use javascript interopt. There are a lot of 3rd party libraries out there to support your Blazor apps. Which is another strong argument for why Blazor is going be adopted.