Hello Blazor Client + SPA

📌 Blazor Client란?

Blazor Client는 웹 어셈블리(WebAssembly) 기반의 SPA 프레임워크로, C# 코드가 브라우저에서 직접 실행된다. 다음은 Blazor Client의 주요 특징이다:

• Startup.cs 파일이 존재하지 않는다.
• Program.cs를 중심으로 실행 구조가 이루어진다.
• 실행 결과는 Blazor Server와 매우 유사하다.
• 하지만 동작 방식은 완전히 다르다!

✅ 요약: Blazor Server는 서버에서 동작을 처리하지만, Blazor Client는 클라이언트에서 모든 코드를 다운로드한 후 독립적으로 실행한다.

---

🚀 실행 화면

Blazor Client 프로젝트를 생성 후 실행하면 아래와 같은 웹 페이지가 출력된다:

⚠️ 처음 봤을 땐 Blazor Server와 거의 유사해보인다.

하지만 구조적/철학적인 차이는 다음과 같다:

항목	Blazor Server	Blazor Client
실행 위치	서버 측	클라이언트 측 (WebAssembly)
연결 방식	SignalR 사용 (실시간 연결)	초기 다운로드 후 독립 실행
필요 파일	지속적 서버 연결 필요	초기 전체 다운로드

---

💡 Blazor Client는 어떤 방식으로 동작할까?

Blazor Client는 마치 스팀에서 싱글 플레이 게임을 다운로드 받은 후 인터넷 없이 실행하는 것과 비슷하다.
즉, 최초 접속 시 필요한 모든 코드와 자원을 WebAssembly 형태로 다운로드하고, 그 이후는 브라우저에서 자체적으로 동작한다.

---

🔍 SPA (Single Page Application) 개념

🧱 전통적인 웹 구조 (TP, Traditional Page)

[사용자 클릭] → [서버 요청] → [전체 HTML 페이지 전송] → [페이지 전체 새로고침]

• 매 요청마다 페이지 전체를 다시 받아온다.
• F5 또는 이동 시마다 화면이 새로 고침되며 깜빡임 발생

🔄 SPA 방식 구조

[최초 요청] → [전체 HTML 다운로드] → [그 이후] → [AJAX 요청 → JSON 응답]

• 최초 한 번만 전체 HTML을 서버에서 가져온다.
• 이후에는 필요한 데이터만 AJAX로 요청해 받아온다.
• 전체 페이지가 아닌 일부만 갱신되므로 UX가 부드럽고 빠르다.

✅ AJAX
AJAX는 JavaScript 기반의 비동기 통신 방식으로, 서버와 데이터를 주고받을 때 전체 페이지를 새로 고치지 않고도 동작 가능하게 해준다.

---

🧠 Blazor Server vs Blazor Client

🛰️ Server Side Blazor (SignalR 기반)

• C# 서버와 클라이언트가 실시간으로 연결됨
• SignalR을 통해 DOM(Document Object Model)을 업데이트
• 과거에는 SPA 기능을 위해 JS 프레임워크 (React, Vue 등) 필요했지만, Blazor는 C#만으로도 구현 가능하게 해줌

✅ DOM
문서 객체 모델(Document Object Model)은 HTML/XML 문서를 객체 트리 형태로 표현하는 방식으로, 자바스크립트 및 C#에서 이를 동적으로 조작할 수 있음.

---

🧩 Client Side Blazor (WebAssembly 기반)

• 클라이언트가 초기 접속 시 필요한 자원 모두 다운로드
• 이후에는 네트워크 없이도 페이지가 동작 (오프라인처럼)
• 서버와의 실시간 연결은 존재하지 않음
• 사용자는 싱글 플레이 게임을 하는 것처럼 독립적으로 동작하는 웹 애플리케이션을 경험함

---

📌 SPA vs TP 비교 요약

항목	TP (전통적인 방식)	SPA (싱글 페이지 앱)
요청 방식	요청마다 HTML 전체 수신	최초 HTML 수신, 이후 데이터(JSON)만 요청
페이지 갱신	전체 새로 고침	일부 갱신
UX 경험	느리고 깜빡임 있음	빠르고 부드러움
구현 기술	서버 사이드 렌더링 중심	AJAX, WebAssembly 등 클라이언트 중심

---