I’m starting a new end-user SaaS product using Blazor WASM & ServiceStack Locode (typical sort of end-user CRUD web app). What put me off jumping to Blazor in the past was a long initial load time, but this seems to have been fixed with interactive auto mode.
Looking at the ServiceStack Blazor WASM template, it seems most of the pages are still in server components. I have a few questions regarding the best practices for using server and WASM components:
Is it best to avoid server components entirely due to their lower responsiveness and higher server resource usage?
Would it be a good approach to keep only the main App and Route component as server components and have everything else as WASM components?
Is it better to have a component with live analytics as a server component?
Are there any other situations where using server components is preferable?
I realize these questions aren’t fully ServiceStack specific and somewhat opinion-based, but as a long-term customer, I highly value your overall architectural guidance on these matters. Any insights or recommendations you can offer as I start this project would be greatly appreciated.
If you’re going with Blazor WASM you’re going to have to make some trade offs, WASM requires a large download whilst Server Rendering performs poorly over high latency Internet connections, so whilst InteractiveAuto is able to download WebAssembly in the background, the initial Server rendering will likely be noticeable on first load. You can minimize this with some tricks to delay users from accessing Interactive pages, like having a static landing page that links to your interactive pages.
Now if this is for an Intranet app over high speed network connections, I’d avoid WASM and just use Server Rendering (i.e. blazor template) since it performs great in low latency environments and you don’t have to work around any WASM limitations and supporting/testing multiple render modes.
But for any Internet Apps I personally avoid Blazor Interactive modes and only use Blazor Static Rendering with Vue components which I’ve wrote about in detail here:
You still get access to great blazor features like Enhanced Navigation and streaming rendering whilst avoiding all of the trade-offs for Blazor’s Interactive rendering modes. It does mean you’re developing interactive features with Vue, but we have a comprehensive Vue Component Library that still enables great productivity and the Instant / Live Reload is a welcome breath of fresh air after living with Blazor’s highly fragile Live Reload dev UX.
Thanks, that article made the template a lot easier to understand. After going through it all I think that for my use case Blazor still isn’t quite there yet. (I don’t do anything for intranets, it’s all publicly facing and requires an API)
I currently use NextJs to generate a static site with pre-rendering, pre-loading, css inlining, bundling and code splitting out of the box. I thought I could simplify things by making everything C# but I think to get everything I have in NextJs in Blazor is a bit too fiddly for my liking still.
I do really want to benefit from the SS locode components though so I think I need to decide whether I switch to Nuxt so I can use the Vue components or I port EditForm and AutoQuery data grid components to React.
Thanks again, I know I just made a complete 180 but you helped me get there a lot quicker.