Blazor .NET8 저한테는 계륵같네요.

🌐 ASP.NET, Blazor, IIS, 웹 Q&A
1

저번주부터 .net core API + nuxt3 로 개발된 사이트를 Blazor Web App(SSR)로
마이그레이션 하는중인데 몇가지 문제가 있었습니다.

  1. OnInitialized, OnParametersSet 이벤트가 두번씩 호출됨
    서버에서 1번 렌더링, 클라이언트에서 1번 렌더링으로 두번 호출됨
    하지만 OnInitialized, OnParametersSet 함수 내부에서 서버인지 클라이언트 구분 플래그가 없음.
    이것때문에 함수를 사용 못함.
    해결방법 : prerendered: false로 하면 되지만 SPA로 바뀜

  2. cloudflare에 호스팅 불가
    릴리즈 된지 얼마 안되어 기다리면 되겠지만 이게 가장 큰 문제임.
    호스팅 업체를 azure로 바꿔야 되는데 2~3일 잠깐 테스트하는데도 비용이 좀 나오네요.

  3. 스마트폰 sleep 모드에서 wakeup 될때 서버와 SignalR 통신이 끊겨 아래와 같은 화면이

    image
    image732×123 5.86 KB

    재접속 하는데도 20초 이상걸리고 그 마저도 실패하면
    image
    image1139×55 6.91 KB

Reload를 클릭해야됨.

저는 3번이 제일 이해가 안갔어요.
클라이언트와 서버가 왜 접속유지 상태를 체크해야 하는지를…
블레이저 메커니즘이 그렇다니 어쩔수 없지만.
연결이 끊기면 새로고침 없이는 모든 버튼과 기능이 작동을 중지합니다.

이런 단점으로 인해 Blazor가 나쁘다는 의미는 아니고
내가 모르는 해결 방법이 있나 하는 혹시 하는 마음에 포스팅 해봤습니다.

8개의 좋아요
2
    1. SSR이여서 그렇고 Blazor는 페이지 인스턴스에 대한 생명주기가 있러서 그렇습니다. CSR(웹어셈블리 사용)을 이용하면 해당 문제는 해소됩니다. 아니면 관련 동작을 보완할 수 있는데 지금 외부라 관련처리는 컴퓨터 앞에 있을 때 추가로 보완 답변할께요
    1. Blazor는 기본적으로 SPA입니다. prerendered가 true일 경우 먼저 페이지를 렌더링 한 후 동작성을 확보합니다. prerendered가 true일 경우 동작성을 확보하기전 렌더링 확보후 렌저링해 그렇습니다.
9개의 좋아요
3

렌더링 모드와 상관없이 Blazor Web App 은 Asp.Net Core 앱, 즉 WAS 입니다.
즉, 2 티어 모델임을 의미합니다.

기존과 같은 3 티어 모델로 운영하고 싶다면, Blazor Webassembly + Asp.net core API로 구성하시면 됩니다. 이 방식의 경우, 1, 2, 3 의 문제가 모두 사라집니다.

그러나, Blazor Web App 을 사용하시면 프론트를 위한 호스팅이 필요 없어 운영 측면에서는 간편해지는 장점이 있습니다.

개인적으로 2티어 모델의 경우 Blazor Server (Blazor Web App)를 쓰는 것에 대한 회의는 있습니다.
1번, 3번 문제에 대한 현실적 보완책이 아직 제시되지 않았기 때문입니다.

2티어 모델은 MVC, 3티어는 Blazor wasm + api 의 구성이 가장 깔끔하고 재사용 가능한 기술인 것 같습니다.

6개의 좋아요
4

우선 답변 감사드립니다.
.net core API + nuxt3 로 개발한 이유가
백엔드는 C#, 프론트엔드는 (SSR+SPA) 이 두가지 이유 때문이었고
3티어로 바꾸면 nuxt3에서 Blazor Webassemble로 바꾸는 의미가 없어 보이네요.

.NET8에 Blazor WebApp(SSR + 풀스택) 릴리즈를 보고 환호 했던거 같아요.
말씀하신데로 API와 상호작용 하는데 필요한 여러가지(DTO, Controller) 것들이
없어도 되다 보니 저한테는 요 며칠 신세계였습니다
다시는 javascript framework로 돌아갈 일이 없을거 같지만.
1, 2번 어떻게 해결한다 치더라도 3번이 젤 문제입니다.ㅠ

2개의 좋아요
5

렌더링 모드를 wasm으로 해도 그러나요?

1개의 좋아요
6

wasm 로 바꾸면 spa로 바뀌는데
그럼 마이그레이션 하는 의미가 없어서요

2개의 좋아요
7

폰을 오래 사용하지 않다가 웹 브라우저를 다시 실행했을 때 Blazor에서 기본 제공하는 Attempting to reconnect to the server 메시지는 그다지 사용자 친화적이지 않습니다.

아래 링크의 내용을 참고하여서 연결이 끊어졌을 경우 페이지를 자동 새로 고침 하거나 적절한 CSS로 연결이 끊여졌음을 인지하게 하면서 내용은 확인할 수 있도록 하는 것이 좋습니다.

4개의 좋아요
8

앗 제가 위에 댓글을 제대로 안읽었네유…

9

답변 감사합니다.
저도 이미 확인했던 부분인데 여러 상황 테스트 해본 결과 비정상 동작하는 부분이 있었어요.

CASE 1 휴대폰이 비행모드(인터넷 끊김)가 될때 →
브라우저에서 “No internet” 경고창이 뜨고 온라인이 되면 자동으로 새로고침 (정상)

CASE 2 서버가 종료됐을 때
브라우저에서 " 페이지에 연결할 수 없습니다" 경고창이 뜨고 사용자가 수동으로 새로고침 (정상)

CASE 3 폰 sleep 모드에서 wake up 됐을때(이게 문제입니다)
짧은(대략 1분이내) sleep 에서는 정상적인 동작이지만
대략 1분 이상 sleep에 있다가 wake up 되면 offline이 되면서 사이트는 멀쩡해 보인다는 겁니다.
image
저는 이게 문제가 될거라고 보는데 사용자가 Offline을 봤으면 “새로고침 해야겠다” 라고
인지를 하겠지만 만약 못봤으면…
사이트는 정상으로 보이는데 버튼들은 작동을 안할테니
유저들은 “사이트가 이상하다” 라고 생각하고 이탈할 우려가 있어서요.

boot.js 에서 Offline 관련 이벤트도 없고, 어디를 어떻게 수정해야될지 감도 안오는 상태 입니다.

5개의 좋아요
10

저도 상기 문제들로 인해서 골치가 많이 아팠습니다.
결론적으로 이래나 저래나 wasm+api로 가야한다는 결론을 내리고
마이그레이션 중인데 이것 또한 정말 손이 많이 가네요.

제가 보기에 아직까지도 blazor는 명확한 기준과 방향성이 없는 상태같네요…
server에서 연결 끊김 메시지에 대해 약간의 충격 완화 장치(?)를 이것저것 시도해보았으나 perfect하지 않은 관계로 포기했구요.
blazor의 생명주기 자체가 그렇다지만, 아무래도 정적인 웹페이지에서 지속적인 통신을 한다는 개념은 저도 아직까지 납득을 못하고 있습니다.
에이~~ 설마 이걸 보완하는게 없을까?? 했는데 8.0이 출시된 아직까지도 없네요…

4개의 좋아요