Blazor FAQ - Hosting models

There are two hosting models available in Blazor: Blazor Server and Blazor WebAssembly.

Blazor Server
Server-side Blazor apps are executed on the server within an ASP.NET Core application. All UI updates, JavaScript calls, and event handling are handled from the server using a SignalR connection. On the client side, the blazor.server.js script sets up the SignalR connection with the server. The script is served to the client-side app from an embedded resource in the ASP.NET Core shared framework.

Blazor WebAssembly
Blazor WebAssembly apps are executed on the client-side in the browser. The .NET runtime is downloaded with the app along with the app assembly and any required dependencies, then the application is executed directly from the browser UI thread. The WebAssembly app static assets are loaded as static files to a web server or service capable of serving static content to clients. The blazor.webassembly.js script handles downloading the app, the app’s dependencies, and the .NET runtime. The script file also initializes the runtime to run the app.

Refer to this documentation section to help you choose a Blazor hosting model.

Blazor application renders UI as HTML content in client-side (browser). So, you can determine whether it is a Desktop, or a Mobile device based on the viewport’s width.

The meta tag named “viewport” is used to design the webpage responsiveness and this is included in all Blazor applications, _Host.cshtml file in Blazor server-side application and index.html file in Blazor Web Assembly application. CSS styling makes designs responsive in Blazor apps.

Another way, you can create a responsive design using media queries that adjusts to the size of the user’s screen based on desktop or mobile browser.

For example, you define breakpoints for small, medium, and large screen sizes.  

<style>
    /* Default styles */ 
    @media (max-width: 576px) { 
        /* Styles for small screens */ 
    } 

    @media (min-width: 577px) and (max-width: 992px) { 
        /* Styles for medium screens */ 
    }  

    @media (min-width: 993px) { 
        /* Styles for large screens */ 
    } 
</style>

For more details, refer to this link.

To reconnect the Blazor server automatically you need to include the following code in the script of the Blazor application. This will refresh the Blazor server automatically when it is up again.

[_Host.cshtml]

<script>
   Blazor.defaultReconnectionHandler._reconnectCallback = function(d) {
        document.location.reload(); 
   }
</script>

The “Blazor (server-side)” template is now called “Blazor Server App.” Use blazorserver to create a Blazor server app from the command line.

• Server-side Blazor is executed on the server within an ASP.NET Core application.
• All UI updates, event handling, and JavaScript calls are handled from server by using a SignalR connection, even a button click will go to server.

For more information regarding Blazor client-side and server-side apps, check this link.

• Client-side Blazor makes use of WebAssembly, which is used to run high-level languages on browsers.
• Necessary .NET WebAssembly-related code and its dependencies are downloaded to the browser, and the app is executed directly on the browser UI thread.
• All UI updates and event handling occur within the same process.

WebAssembly is not supported in the IE browser, so client-side Blazor is not supported in IE. But server-side Blazor can be used instead in IE 11 with polyfills.

For more information on browser compatibility, check this link.

Yes, but it’s a bit non-trivial right now. It’s easier right now to have two separate projects for your client-side and server-side Blazor apps that both reference the same components. Please check out this link for more information