Blazor Server App.razor Initialized Multiple Times

1 Answer 301 Views
General Discussions
Cody
Top achievements
Rank 1
Iron
Cody asked on 30 Oct 2023, 07:13 PM | edited on 30 Oct 2023, 07:17 PM

Greetings,

When adding the TelerikRootComponent to the MainLayout.razor, the App.razor is initialized multiple times.  If I remove the TelerikRootComponent, then App.razor is initialized once as expected.

The problem is within App.razor, we use the NavigationManager to navigate to a login endpoint when a user is not authorized.  The navigation now gets triggered multiple times before actually completing.  What change do I need to make in order to have the App.razor initialize once while still using TelerikRootComponent?

I followed the guide wrapping @Body with TelerikRootComponent and then tried creating the TelerikLayout which had the same result.  This is in a .NET 7 Blazor Server app.  Thanks in advance for the help.

 

Dimo
Telerik team
commented on 02 Nov 2023, 02:26 PM

Cody, on my side OnInitialized of App.razor fires twice, no matter if there is a TelerikRootComponent in the layout or not. (Thе second execution is due to the ServerPrerendered render mode of the application).

Do I understand correctly that you are not using the usual way to redirect inside <RedirectToLogin /> ? What happens if you move the <TelerikRootComponent> to App.razor and wrap it around the <Router>? If you have <CascadingAuthenticationState> in App.razor, then place our root component inside it.

If the problem persists, please provide a simple runnable project for inspection.

Cody
Top achievements
Rank 1
Iron
commented on 03 Nov 2023, 03:39 PM

I believe we have it figured out.  To answer your questions first for context, we are using the <CascadingAuthenticationState> and moving the <TelerikRootComponent> into the App.razor like you suggested did not fix the issue but got me rethinking things.  I ended up moving our navigation logic to the OnInitializedAsync method of MainLayout.razor which then fires the redirect after App.razor has finished loading, which is the desired end result I was looking for.

The App.razor still loads five times for me but I believe this is just how it works with the <CascadingAuthenticationState> and doesn't impact anything else.  @Dimo your comments were helpful in working out the root of the problem.  I appreciate your time.
Dimo
Telerik team
commented on 03 Nov 2023, 03:43 PM

Great, thanks for sharing, Cody!

1 Answer, 1 is accepted

Sort by
1
Accepted
Cody
Top achievements
Rank 1
Iron
answered on 03 Nov 2023, 03:43 PM
The answer for this question is checking the AuthenticationState of a user in MainLayout.razor instead of the App.razor, because App.razor may need to render multiple times.  Using the TelerikRootComponent made this issue more apparent, but was not the root cause of our issue.
Tags
General Discussions
Asked by
Cody
Top achievements
Rank 1
Iron
Answers by
Cody
Top achievements
Rank 1
Iron
Share this question
or