웹 애플리케이션(.NET)

1. ASP.NET MVC (Server-Side Rendering)

동작 방식:

• 전통적인 서버 사이드 렌더링 방식
• 클라이언트 요청 → 서버에서 HTML 생성 → 완성된 HTML 반환
• 각 페이지 이동마다 전체 페이지 새로고침

장점:

• SEO 친화적 (검색엔진이 콘텐츠 쉽게 크롤링)
• 초기 로딩 빠름 (서버에서 완성된 HTML 전송)
• 서버 리소스 활용 (클라이언트 부담 적음)
• .NET Framework 4.8 같은 레거시 환경에서도 안정적

단점:

• 페이지 전환시 깜빡임
• 서버 부하 높음 (매 요청마다 HTML 생성)
• 인터랙티브한 UX 구현 어려움
• JavaScript로 추가 작업 필요

적합한 경우:

• 콘텐츠 중심 웹사이트
• SEO가 중요한 경우
• 레거시 시스템 유지보수

// Controller
public class ProductController : Controller
{
    public ActionResult Index()
    {
        var products = _productService.GetAll();
        return View(products); // 서버에서 HTML 생성
    }
    
    public ActionResult Detail(int id)
    {
        var product = _productService.GetById(id);
        return View(product); // 페이지 전체 새로고침
    }
}
```

**플로우:**
```
사용자: /Product/Index 요청
    ↓
서버: DB 조회 → Razor 뷰 엔진으로 HTML 생성
    ↓
브라우저: 완성된 HTML 받아서 전체 렌더링
    ↓
사용자: 상세페이지 클릭 (/Product/Detail/1)
    ↓
서버: 다시 HTML 생성
    ↓
브라우저: 페이지 전체 새로고침 (깜빡임)

 

 

2. Blazor Server (SSR + SignalR)

동작 방식:

• 초기 HTML은 서버에서 렌더링
• 이후 SignalR로 실시간 양방향 통신
• UI 이벤트 → SignalR → 서버 처리 → DOM 업데이트 전송

장점:

• 빠른 초기 로딩
• 작은 다운로드 크기 (클라이언트에 전체 앱 불필요)
• 서버에서 로직 실행 (보안에 유리)
• C# 코드만으로 개발 가능

단점:

• 지속적인 서버 연결 필요 (동시 사용자 많으면 부담)
• 네트워크 지연 시 반응 느림
• 서버 종속적 (오프라인 불가)
• SignalR 연결 관리 복잡도

적합한 경우:

• 기업 내부 시스템 (안정적 네트워크)
• 실시간 데이터 처리
• 보안이 중요한 애플리케이션

// Component (.razor)
@page "/products"
@inject ProductService ProductService

<h3>상품 목록</h3>
@foreach (var product in products)
{
    <div @onclick="() => ShowDetail(product.Id)">
        @product.Name
    </div>
}

@code {
    private List<Product> products;
    
    protected override async Task OnInitializedAsync()
    {
        products = await ProductService.GetAllAsync();
    }
    
    private async Task ShowDetail(int id)
    {
        // UI만 부분 업데이트 (페이지 새로고침 없음)
        selectedProduct = await ProductService.GetByIdAsync(id);
    }
}
```

**플로우:**
```
초기 로딩: 서버에서 HTML 생성 → 브라우저 렌더링
    ↓
SignalR 연결 수립 (WebSocket)
    ↓
사용자: 버튼 클릭
    ↓
SignalR로 이벤트를 서버에 전송
    ↓
서버: 처리 후 변경된 UI 정보만 전송
    ↓
브라우저: DOM만 부분 업데이트 (새로고침 없음)

 

 

3. Blazor WebAssembly (CSR)

동작 방식:

• 전체 앱을 WebAssembly로 클라이언트에 다운로드
• 브라우저에서 .NET 런타임 실행
• SPA처럼 동작 (클라이언트에서 모든 렌더링)

장점:

• SPA 경험 (빠른 페이지 전환, 부드러운 UX)
• 서버 부하 최소화
• 오프라인 작동 가능 (PWA)
• API 서버와 분리 배포 가능

단점:

• 초기 로딩 느림 (전체 앱 다운로드 필요)
• SEO 어려움 (초기 HTML 거의 비어있음)
• 브라우저 호환성 이슈 가능
• 클라이언트 성능에 의존

적합한 경우:

• 인터랙티브한 웹 앱
• PWA 구축
• API 기반 아키텍처

// Component (.razor)
@page "/products"
@inject HttpClient Http

<h3>상품 목록</h3>
@foreach (var product in products)
{
    <div @onclick="() => ShowDetail(product.Id)">
        @product.Name
    </div>
}

@code {
    private List<Product> products;
    
    protected override async Task OnInitializedAsync()
    {
        // 브라우저에서 직접 API 호출
        products = await Http.GetFromJsonAsync<List<Product>>("api/products");
    }
    
    private async Task ShowDetail(int id)
    {
        // 브라우저에서 모든 처리 실행
        selectedProduct = await Http.GetFromJsonAsync<Product>($"api/products/{id}");
    }
}
```

**플로우:**
```
첫 방문: 전체 앱 다운로드 (.dll, 런타임 등) → 느림
    ↓
브라우저에서 .NET 런타임 시작
    ↓
사용자: 페이지 이동 또는 버튼 클릭
    ↓
브라우저에서 C# 코드 직접 실행 (WebAssembly)
    ↓
필요시 API 서버에 데이터만 요청
    ↓
브라우저에서 UI 업데이트 (빠른 반응, SPA 경험)

 

 

Blazor 8+ (Auto/통합 렌더링)

.NET 8부터는 Static SSR, Interactive Server, Interactive WebAssembly, Interactive Auto 모드를 컴포넌트 단위로 선택 가능합니다.

렌더 모드 옵션:

• @rendermode InteractiveServer: Blazor Server 방식
• @rendermode InteractiveWebAssembly: WASM 방식
• @rendermode InteractiveAuto: 초기 Server → 이후 WASM 전환
• Static SSR (기본): MVC처럼 정적 HTML만