Praktické zkušenosti s Blazor SSR

Jak jste si všimli, celý můj web je v novém kabátě. Používám technologii Blazor SSR vydanou v NET 8. Rád bych v bodech nasdílel pár postřehů z praktického programování.

• Obecně je SSR naprosto geniální. Kliknutí na odkazy odchycuje JS, ten pošle požadavek na server. Server vyrenderuje novou verzi webu a JS provede aktualizaci DOM, takže se nepřekresluje celá stránka. Při zapojení Stream Renderingu je navíc možné zobrazit spinner, než se načtou data. Nemám to všude, protože ještě ověřuji, jak se k tomu zachovají vyhledávače.
• Navigation Manager vyžaduje konkrétní URL v aplikaci, takže je snadné udělat překlep. V případě jazykových verzí by se asi musel Navigation Manager upravit.
• Při odkazování na obrázky se nepoužívá vlnka (~/img.jpg), takže i zde chybí přirozená kontrola existence souboru ve wwwroot.
• Scrollování při přecházení mezi stránkami je navržené špatně. Microsoft si to žehlí tím, že údajně ve Vue to funguje podobně blbě. Naštěstí to lze řešit workaroundem (mrkněte na JS kód na tomto webu)
• Systém komponent je opravdu super. Hodně se mi osvědčilo spojení komponenty + vlastních CSS stylů. Výhoda je, že každá sebemenší komponenta si může nezávisle načítat data na základě parametrů, které předám zvenku. Jsou to partial views na steroidech.
• Na stránce fungují mizerně kotvy (#). Respektive funguje to při zobrazení nové stránky, ale pro pohyb na stránce je používat nejde. Co víc, Blazor v takovém případě posílá uživatele na úvodní stránku.
• Při stavbě FORM je potřeba hlídat si strukturu HTML. Nějak se mi stalo, že se mi do P vygeneroval DIV s alertem a v enhance módu mi to pak ten DIV z odstavce vyhodilo.
• Atribut [SupplyParameterFromQuery] nebyl ochotný vzít číselnou hodnotu a zparsovat ji na řetězec. Opačně bych to chápal, ale není dobré mít v query parametru něco, co může mít hodnotu jako řetězec i číslo. Třeba telefonní číslo "773272767" vs "+420..." už může být problém.
• Když mám prvek InputSelect ve formuláři, tak se mi nevybere automaticky správná OPTION při two-way bindingu. U Blazor Server to fungovalo. Musím tedy ručně přidat vlastnost "checked" a hodnotu true/false dopočítat.
• Zatím jsem nenašel způsob, jak zapojit efektivně Application Insights JS SDK. Připravený kód od MS automaticky dělá TrackPageView(), ale tato událost logicky nenastane při klikání na jiné stránky, protože se neobnovuje celá stránka, ale pouze se aktualizuje DOM. Zatím mám AI pouze na serveru. Řešením bude najít nějaký init script a dát ho do App a v App pak reagovat na událost "enhanceload" a v této události zavolat TrackPageView().
• Při zastavení aplikace nebo rekompilaci obecně dochází k nějakému záseku. Dlouho mi svítí Application Is Shutting Down, takže vynucuji vypnutí. Děje se to i po update JetBrains Rideru, takže to bude asi něco v tom SSR.