CODEWITHSUNDEEP
asp.netblazorrenderingblazor-server-sideblazor-webassembly
Jaden
Jaden

Reputation: 203

.NET 8 Blazor Handling Data With Auto/Global Interactivity

I have been familiarizing myself with the .NET 8 Blazor Web App structure, and am trying to understand and use the "Auto" interactive render mode, with the "Global" interactivity location. Upon creating a new solution, there are two projects: server and wasm. Using the auto/global interactivity settings, components appear to always be server rendered first, and then switch over to wasm rendered. I really like this concept, however I am having issues handling data throughout this process.

When attempting to query a database from a component on the wasm project, the component is initially server rendered and the query results are displayed on the wasm component. However, once the server connection closes and the component rerenders as wasm, the component cannot access the server database and the query results disappear. Similarily, when attempting to query the database from a component on the server project, the component is initially server rendered and the query results are displayed on the server component. But once the server connection closes and the component attempts to rerender as wasm, there is a "sorry, page not found" error instead.

I have seen many example videos where users highlight this auto render switching. However, they all setup their projects with the per page/component interactivity location, and manually set these pages to keep an active server connection. With this in mind, what's the point of the global interactivity location handler?

While I'm loving the concept of the global auto switch, I feel like I'm missing a key part of understanding how to correctly utilize it.

Upvotes: 2

Views: 3191

Answers (1)

MrC aka Shaun Curtis
MrC aka Shaun Curtis

Reputation: 30167

This is all about design and abstraction.

Consider your database example.

In your application, your component should be talking to a View Provider that uses a IDataBroker interface to get it's data.

In Server mode the DI IDataBroker connects to say EF. In WASM mode the DI IDataBroker makes API calls to controllers on the Server. The UI and Core domain code is the same. It just interfaces through different implementations of the IDataBroker provided by DI.

You therefore need to design your data pipeline to run both:

  1. directly through EF
  2. via an API pipeline

i.e. Your requests, such as collection filtering and sorting, need to be serializable.

There's no silver bullet in Net8 that connects a dbContext call from a component to a database in WASM. When your page component switches mode, it needs to switch IDataBroker implementation.

Here's a link to demo implementation of A SSR/CSR data pipeline based on the Weather page https://github.com/ShaunCurtis/Blazor.ExploreRendering/blob/master/Documents/An-Interactive-Data-Pipeline.md

Upvotes: 5

Related Questions