Become a .NET & Blazor expert with weekly tutorials featuring best practices and the latest improvements, right in your inbox.
.NET 8 Blazorš„All Render Modes (SSR, Server, WebAssembly, Auto) Explained for Beginners
Hey Reader,
This week, let's dive deep into the world of Blazor, specifically the render modes in .NET 8. There's a lot of buzz and a bit of confusion around this, so let's clear the air.
š„ All Render Modes of Blazor in a Video
Below is a crisp 20-minute guide on Blazor SSR (Static Server-Side Rendering), Blazor Server, WebAssembly, and the intriguing Auto Render Mode. Dive in and enjoy!
š» Quick Recap
Short on time? Don't sweat it! Here are the essential nuggets about the render modes. Firstly, to tap into the power of all render modes, start by setting up a Blazor Web App project. Opt for WebAssembly or Auto for the "Interactive render mode" during setup. This gives you a head start with two projects (server and client) ready to roll.
Keep an eye on two crucial lines in the Program.cs file. If you're configuring your app to switch from no render mode or just the Server render mode, you'll need these lines:
Note: In my example, "MyButton" is a component of the client project. You can replace it with any component of your choice. Typically, the "Counter" class is used in template examples.
No client project yet? No worries. Use the Blazor WebAssembly Standalone App template to set one up. Remember to link it as a project reference to the server project and include the NuGet package Microsoft.AspNetCore.Components.WebAssembly.Server.
With this setup, you're all set to explore every render mode. Just remember to place any component or page you want to use with WebAssembly or Auto render mode in the client project. It's a key step.
Also, don't forget to add the @rendermode directive. You can place it at the top of a page or component, or tailor it for each component's use.
Hereās how you do it for an entire page:
And for an individual component:
Got questions or need more clarity? Just hit reply to this email, and I'll eagerly whip up more video tutorials to help you out.
A big shoutout to our fantastic community, and a heartfelt thanks to my Patrons for your incredible support. You're the rockstars of this newsletter and my channel.
Can't wait to see what we'll achieve together this year. Stay safe, and remember, the joy is in the coding! š»
Take care,
Patrick
.NET Web Academy
Become a .NET & Blazor expert with weekly tutorials featuring best practices and the latest improvements, right in your inbox.
Hey friend, The other day I found a bug in StackBuddy, an app I built. Normally I'd open it, file a ticket for myself, and move on. Instead I turned to my AI and just said, "log a dev ticket for that." And it did. A real ticket in my own bug tracker. Title, description, priority, the whole thing. I never opened the actual app. The thing that makes that possible is called MCP, Model Context Protocol. Ignore the name for a second. Out of the box, an AI can only talk. It writes and explains, but...
Hey friend, I don't really write code by hand anymore. I describe what I want, and the AI builds it. For a while, that scared me. If I am not writing the code, does everything I spent years learning still matter? Does my stack matter at all? If you are a developer right now, I would bet you have felt some version of that too. Here is where I landed. It flipped the whole thing for me. The other day I was debugging a slow app, talking it through with the AI. Would WebAssembly help here? Is it...
Hey friend, Lately I told an AI Iād see it in 7 hours, and went to bed. It was done in 2. Across two different projects. Thereās this thing people call the night shift. You give an AI agent a pile of work, start it in a loop, and go to sleep while it keeps working on your real codebase. I tried it a month ago and could not make it work, the model just fell apart. But with the newest models, it works now. And the surprising part wasnāt that it ran all night. Itās that it ran out of work before...