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
Patrick God
Become a .NET & Blazor expert with weekly tutorials featuring best practices and the latest improvements, right in your inbox.
Hey Reader, .NET 10 is almost here, and it brings a big upgrade for validation in Minimal APIs. In this week’s tutorial, I’ll walk you through how validation works now in .NET 10 (using Entity Framework, Scalar, and Minimal APIs). Before, writing validation logic in each endpoint was a pain. You had to manually check for null values, invalid quantities, or missing fields. But in .NET 10, that’s all built-in and super clean. Watch the full tutorial now: 👇 Happy coding! Take care, Patrick
Hey Reader, If you’ve been coding for a while, you’ve probably asked yourself this too: “Am I getting better… or just older?” I’ve been writing software for fifteen years now, and that question still sneaks up on me. But looking back, I’ve realized something: real growth in tech isn’t about frameworks or chasing trends. It’s about staying curious, patient, and keeping your spark alive when everything feels heavy. So I made a new video about it, my 15 biggest lessons from 15 years of coding....
Hey Reader, If you’re a Blazor developer, you know that annoying flash when your app loads data during pre-rendering. It’s been around forever. Sure, you could disable pre-rendering, but then you'd hurt performance and SEO. Well… with .NET 10, we finally have a real fix: the new Persistent State Attribute. 🎉 🎥 Watch my full tutorial about it here: In this video, I walk you through: ✅ What causes the flashing issue ✅ Why disabling pre-rendering isn’t ideal ✅ How the new Persistent State...