How does Blazor Work?

Although any major UI design pattern, such as MVC or MVP, can be implemented in Blazor, it is especially well-suited for the MVVM pattern:

Blazor standard flow

1. DOM event: The user triggers an event (e.g., 'onclick').

2. Event relayed to View Model: Using a WebSocket connection, the event is sent to the server and then to the session View Model.

3. State change: The View Model executes business logic and updates the model.

4. View Model update: The View Model reacts to model changes, updating its state and triggering the HTML renderer.

5. HTML rendering: The HTML renderer uses the bound parameters from the Model to generate new HTML and compute the difference with the current state.

6. Visual delta transport: HTML differences are streamed asynchronously to the server, reducing data transfer and improving performance by updating only the necessary elements.

7. DOM update: The view is refreshed by directly modifying the DOM with the received data.