Egy keret HTML jelenik meg, amibe csak a scriptek vannak behúzva, nincs semmilyen content, hanem a JavaScript fogja renderelni API hívásokon keresztül. Nem a HTML-ben van a szerkezet.
Amikor egy Single Page Application (SPA) először jelenik meg a böngészőben, az alapértelmezett HTML váz gyakran minimális és nem tartalmazza az alkalmazás teljes dinamikus tartalmát. Ehelyett a kezdeti HTML általában a következőket tartalmazza:
- Dokumentum Metaadatok: A doctype, a karakterkódolás és néhány meta címke, amelyek a nézet méretét, a SEO-t és más beállításokat irányítják.
- Stílus és Script Hivatkozások: A CSS fájlokra és a JavaScript kódra mutató hivatkozások, amelyek az alkalmazás működéséhez szükségesek.
- Root Elem: Gyakran van egy gyökérelem, amelyre az SPA keretrendszer (pl. Angular, React, Vue stb.) rátapad, és ezen belül generálja a dinamikus tartalmat. Ez az elem gyakran egy minimális, általános szerkezettel rendelkezik, mint például:
<div id="app"></div>vagy<app-root></app-root>. - Loading Indikátor: Egy egyszerű üzenet vagy animáció, ami a felhasználónak jelez, hogy az alkalmazás betöltés alatt áll. Ez különösen hasznos lehet, ha az alkalmazásnak több időre van szüksége a teljes betöltéshez.
- Noscript Elem: Egy
<noscript>elem arra figyelmeztető üzenettel, hogy az alkalmazás működéséhez JavaScript szükséges. Ha a böngészőben a JavaScript le van tiltva, ez az üzenet jelenik meg.
Példa:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My SPA</title>
<link rel="stylesheet" href="styles.css">
<script src="main.js" defer></script>
</head>
<body>
<app-root>
<div>Loading...</div>
</app-root>
<noscript>
Az alkalmazás használatához engedélyeznie kell a JavaScriptet a böngészőjében.
</noscript>
</body>
</html>Amint a JavaScript kód betöltődik és futtatódik, a keretrendszer “aktiválja” az alkalmazást, amely azután dinamikusan generálja és injektálja a tartalmat a gyökérelembe. Ennek az a lényege, hogy az alkalmazás valós idejű interakciókat és navigációt biztosítson anélkül, hogy újra kellene tölteni az egész oldalt.