Web-Development with Blazor

1. How Websites Work

sequenceDiagram
    participant Browser
    participant Server

    Browser->>Server: HTTP GET /index.html
    Server-->>Browser: HTML
    Browser->>Server: GET /style.css, /app.js
    Server-->>Browser: CSS, JS
    Browser->>Browser: Render DOM

Key Concepts

• The browser (client) requests a resource using HTTP (usually GET)
• The server responds with:
  • HTML (structure)
  • CSS (style)
  • JavaScript (behavior)
• The browser builds the DOM (Document Object Model) and renders the page

Important Notes

• Each navigation usually triggers a new HTTP request
• Without JavaScript, pages are static

---

2. Server-Side Rendering (SSR) & Templating

Idea

Instead of storing static HTML files, we generate them dynamically on the server.

flowchart LR
    Request --> Server
    Server --> TemplateEngine
    TemplateEngine --> HTML
    HTML --> Browser

Examples

• PHP
• ASP.NET Razor / Blazor SSR

Key Concept

👉 The browser never sees the template, only the final HTML

---

Example: Razor / Blazor SSR

@page "/greeting"
<h1>Hello @Name!</h1>
 
@code {
    string Name = "Alice";
}

What happens?

1. Browser requests /greeting
2. Server executes Razor code
3. HTML is generated:

<h1>Hello Alice!</h1>

4. Browser receives only HTML

---

Advantages of SSR

• Fast initial load
• SEO-friendly
• No heavy client requirements

Disadvantages

• Every interaction requires a new request
• Limited interactivity without JavaScript

---

3. Single Page Applications (SPA)

Idea

Load the application once, then update parts dynamically.

flowchart LR  
	subgraph Browser
		App["SPA (JS / Blazor WASM)"]  
		DOM["DOM"]  
	end  
	  
	App -->|manipulates| DOM  
	  
	Browser -->|HTTP GET| Server  
	Server -->|HTML + JS + CSS| Browser  
	  
	App -->|API call e.g. JSON| Server  
	Server -->|JSON| App

Key Differences to SSR

SSR	SPA
Reloads full page	Updates parts of page
Returns HTML	Returns data (JSON)
Server renders UI	Client renders UI

---

Example (Conceptual)

fetch("/api/products")
  .then(r => r.json())
  .then(data => renderProducts(data));

renderProducts might use DOM manipulation such as getElementById to find an HTML node and replacing its contents.

---

Popular SPA Frameworks

• Angular
• React
• Vue

---

4. Blazor Server

Concept

• Runs UI logic on the server
• Uses a persistent WebSocket connection (SignalR)

sequenceDiagram
    participant Browser
    participant Server

    Browser->>Server: WebSocket connect
    Browser->>Server: Click event
    Server->>Server: Execute CSharp
    Server-->>Browser: DOM diff update

flowchart LR  
    subgraph Browser
        Client["Blazor JS Client (SignalR)"]  
        DOM["DOM"]  
    end  
      
    Client -->|applies UI updates| DOM  
      
    Browser -->|HTTP GET| Server  
    Server -->|"HTML + JS (Blazor client)"| Browser  
      
    Client -->|"User event (click, input)"| Server  
    Server -->|"Execute C# (Blazor app)"| Server  
    Server -->|"UI diff (render updates)"| Client 

---

How it works

1. Page loads
2. A JavaScript runtime opens a WebSocket
3. User interaction → event sent to server
4. Server executes C#
5. Server sends back UI changes (diff)
6. Browser updates DOM

---

Example

@rendermode InteractiveServer
<button @onclick="Increment">Click me</button>
<p>Count: @count</p>
 
@code {
    int count = 0;
 
    void Increment()
    {
        count++;
    }
}

👉 Logic runs on server, UI updates via WebSocket

---

Advantages

• No need to write JavaScript
• Full access to server:
  • Databases
  • File system
• Small client download

Disadvantages

• Requires constant connection
• High server load (state per user)
• Not ideal for large-scale apps

---

5. Blazor WebAssembly

What is WebAssembly (WASM)?

• Binary format executed in browser
• Faster than JavaScript for some tasks (e.g. used for image recognition, AI modules, …)
• Language-independent (C#, C++, Rust…)

---

How Blazor uses WASM

flowchart LR
    Server -->|Download| Browser
    Browser -->|Run| WASMRuntime
    WASMRuntime --> CSharpApp

1. Browser downloads:
   • .NET runtime (WASM)
   • Application DLLs
2. C# code runs inside the browser

---

Example

@rendermode InteractiveWebAssembly
<button @onclick="Increment">Click me</button>
<p>Count: @count</p>
 
@code {
    int count = 0;
 
    void Increment()
    {
        count++;
    }
}

👉 Now runs fully in browser, no server needed

---

Advantages

• True SPA behavior
• High scalability (no server state)
• Offline capable (PWA)

Disadvantages

• Large initial download
• Slower startup
• Limited capabilities:
  • No direct DB access
  • No TCP sockets
  • Must use HTTP APIs

---

6. Mixing Approaches

Modern Blazor allows combining:

• SSR for fast initial load
• Server for dynamic features
• WebAssembly for rich SPA parts

👉 Choose based on:

• Performance
• Scalability
• Complexity

Controlling the Render Mode

Blazor provides the @rendermode directive to define how a component is rendered.

On a page:

@page "/counter"
@rendermode InteractiveServer
 
<h1>Counter</h1>
<Counter />

Possible values:

• @rendermode InteractiveServer
• @rendermode InteractiveWebAssembly
• @rendermode Static (SSR, no interactivity)

Per component:

<Counter @rendermode="InteractiveWebAssembly" />

This allows mixing modes within a single page.

Typical Use Cases

• SSR + Server
  • Fast load + dynamic forms
• SSR + WASM
  • SEO + rich client-side UI
• All mixed
  • Large applications with different requirements

---

Summary

• Websites use HTTP + HTML/CSS/JS
• SSR generates HTML on server
• SPAs update UI dynamically in browser
• Blazor offers:
  • Server (interactive via WebSocket)
  • WebAssembly (client-side C#)
  • SSR (static rendering)

👉 Blazor enables full-stack web development using C# instead of JavaScript