Jak SPA funguje
Při prvním načtení prohlížeč stáhne HTML, CSS a JavaScript bundle. JavaScript převezme kontrolu nad routováním a renderováním. Když uživatel klikne na odkaz, JavaScript načte potřebná data z API a aktualizuje DOM — bez obnovení stránky. Přechody jsou plynulé, připomínají nativní aplikaci.
Výhody a nevýhody SPA
Výhody: plynulá navigace, bohatá interaktivita, skvealý uživatelský zážitek, snížená zátěž serveru. Nevýhody: pomalé první načtení (velký JS bundle), problémy s SEO (vyhledávače nemusí spouštět JS), složitější sdilení na sociálních sítích (chybějícá OG metadata). Proto dnes často kombinujeme SPA s SSR v Next.js.
Kdy zvolit SPA
SPA je ideální pro aplikace, kde uživatel tráví hodně času — dashboardy, admin panely, e-mailové klienty, chat aplikace, nástroje pro práci. Pro obsahové weby, blogy a firemní prezentace je lepší SSR nebo SSG kvůli SEO. Moderní frameworky jako Next.js umožňují kombinovat oba přístupy.
SPA frameworky
Nejpopulárnější SPA frameworky jsou React (s React Router), Vue.js (s Vue Router) a Angular. Pro přidání SSR nad SPA existují meta-frameworky: Next.js (React), Nuxt.js (Vue), Analog (Angular). V Appitect používáme Next.js, který dává SPA zážitek s výhodami SSR.
Praktický příklad
Gmail je typická SPA — načte se jednou a pak navigujete mezi Doručenou poštou, Odeslánými a Koncepty bez přenášení stránky. Vše je okamžité a plynulé. Podobný zážitek vytváříme pro interní aplikace a dashboardy našich klientů.