Blazor Client + SPA

1. Blazor Client vs Blazor Server

Blazor Client 실행결과)

Blazor Client프로젝트를 생성하고 실행하면 Blazor Server와 똑같은 웹페이지가 출력됨을 볼 수 있다.

 

그리고 폴더와 파일의 구성도 비슷하고 파일의 내용도 다 비슷한데 다른 ASP.NET Core와 달리 Startup.cs가 없다는 것을 알 수 있다.

 

2. Blazor Client철학

최초에 게임을 다운로드 받을 때의 1회에만 서버에서 요청을 하고 게임을 실행할 때 부터는 네트워크와 연결을 끊고 독립적으로 게임을 실행하는 경우가 있다. 이렇듯 서버와 거의 상호작용없이 독립적으로 프로그램을 처리하는 경우에 사용하는 것이 Blazor Client이다. 예를들어, 스팀에서 싱글 플레이어 게임을 다운받고 플레이하는 경우를 생각하면 알기 쉽다.

 

3. SPA(Single Page Application)

TP(Tranditional Page) LifeCycle이라고 전통적으로 사용한 서버와 클라이언트 사이의 웹 통신 방식이 있다.

SPA(Single Page Application) LifeCycle은 새롭게 등장한 웹 통신 방식이다.

 

TP와 SPA의 공통점

- 클라이언트에서 서버쪽으로 최초요청(Initail Request)을 할 때 서버쪽에서 HTML로 답변을 하는 방식

 

TP와 SPA의 차이점

- TP는 클라이언트가 서버쪽에 Form POST방식으로 요청을하면 서버쪽에서도 HTML로 답변을 하는 방식이다.

- SPA LifeCycle는 클라이언트가 서버쪽에 AJAX 방식으로 요청하면 서버쪽에서는 JSON으로 답변을 하는 방식이다.

 

참고로, AJAX란?

- XML데이터를 주고 받는 JavaScript 비동기 통신방식

 

SPA방식의 장점

TP방식의 단점은 F5를 눌렀을 때 서버에서 HTML로 통신을 하기 때문에 새로고침 하는 과정에서 버벅거리는 것을 알 수 있다. 그러나 SPA방식에서는 최초에 HTML태그를 받고 이후에 새로고침이 필요할 때는 HTML전부가 아닌 데이터부분(JSON)만 받기 때문에 버벅 화면 전체를 초기화하는 버벅거림 현상이 없다.

 

Server Side Blazor

Blazor이전에는 SPA방식을 사용하기 위해서는 클라이언트는 JavaScript로 구현해야했다.

서버는 C#인데 클라이언트를 다시 JavaScript로 만들어야하는 불편함이 있었는데, Blazor가 이러한 문제점을 모두 해결해주었다.

 

Client Side Blazor

Server Side Blazor는 AJAX와 JSON의 통신이 있는 반면에 Client Side Blazor는 최초요청에 필요한 정보를 모두 다운로드 받은 수 인터넷 연결을 끊은 것처럼 아무런 통신도 하지 않는다.