En SPA (Single-page application) er en webapplikation eller et websted, der interagerer med brugeren ved dynamisk at omskrive den nuværende webside med nye data fra webserveren, i stedet for den standardmetode, hvor browseren indlæser hele nye sider. Hovedformålet er at levere en mere flydende brugeroplevelse, der ligner en desktopapplikation. I en SPA er al nødvendig kode (HTML, JavaScript og CSS) enten hentet med et enkelt sideindlæs eller de nødvendige ressourcer indlæses dynamisk og tilføjes til siden, når det er nødvendigt, normalt som svar på brugerhandlinger.
Det betyder ikke at der kun må være en enkelt side og den bare er meget lang! Det betyder at vi ikke loader et helt nyt HTML dokument ud ved sideskift. Vi skifter bare indholdet i dommen. Der er mange frameworks som bruger SPA strukturen og det gør det ofte ret forskelligt. React bruger en virtuel-DOM, mens Svelte ikke gør! De mest brugte SPA-frameworks arbejder med JavaScript eller TypeScript som deres primære sprog, vi har samlet dem under JavaScript Frameworks.
Vi bruger og anbefaler på næsten alle vores hoved forløb at i bruger Blazor og .NET.
Som vi kan se på følgende GIF, er det kun meget få elementer som faktisk ændre sig, når vi navigere rundt på vores side.
Her reloader den kun <head> og <article>. Det betyder at sidebaren aldrig behøver at blive genindlæst.
Generelt føles det hurtigere og mindre klodset end alternativetet som er nedenunder!
På Lectio kan vi se det virker anderledes. Hele vores DOM, genindlæser med en ny HTML fil. Det vil sige at hvis man skal læse noget nyt data eller skifte noget i URLen er man tvunget til at loade en helt ny side, man kan tydeligt mærke og se forskellen når man er inde på siderne!
