문제 발견
OnInitialized() 함수에서 작성한 함수가 2번 연속으로 호출되는 이슈가 있어서 확인해 보니 실제로 2번 호출되는 게 맞았다.
구글링을 통해 Render-mode에 따라서 함수가 호출되는 횟수가 변경된다는걸 확인
- Static : 일반 HTML파일처럼 정적 페이지를 로드하는 방식
- Server : 실시간으로 변하는 Blazor를 그때그때 그리는 방식
(React 초기에 페이지 로딩이 느린 것과 동일한 방법으로 이해) - ServerPrerendered : "Static"방식과 "Server"방식에 중간에 해당하는 방식, 초기 페이지 로딩속도를 빠르게 하기 위해서 정적 데이터로 정적 페이지를 로딩하고 그다음에 페이지의 변화가 있으면 SPA처럼 렌더링을 시키는 방식으로 작동한다. 그래서 OnInitialized() 함수가 두 번 호출됨
문제 해결
Blazor 프로젝트 생성시에 자동 생성되는 _Host.cshtml에서 render-mode를 변경할 수 있다.
render-mode="ServerPrerendered"를 render-mode="Server"로 변경
//_Host.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TestBlazor</title>
<base href="~/" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="css/site.css" rel="stylesheet" />
<link href="TestBlazor.styles.css" rel="stylesheet" />
</head>
<body>
<component type="typeof(App)" render-mode="Server" />
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>'프로그래밍 > Blazor' 카테고리의 다른 글
| Blazor의 작은 아이콘 - 파비콘(Favicon) 변경하기 (28) | 2023.05.24 |
|---|---|
| Blazor에서 Timepicker UI 생성하기 (28) | 2023.05.18 |
| Razor vs Blazor 둘은 어떻게 다른가? (37) | 2023.05.17 |
| Blazor 사용을 결정한 이유 (7) | 2023.05.16 |
| Blazor에서 @code{}와 @{}에 대해서 (6) | 2023.05.15 |
댓글