Az SPA az Single Page Application rövidítése, ami magyarul Egyoldalas Alkalmazás-t jelent. Az SPA egy webalkalmazás vagy weboldal, amely egyetlen HTML oldalban interagál a felhasználóval úgy, hogy dinamikusan frissíti az aktuális oldal tartalmát, ahelyett hogy új oldalakat töltené be böngészőben. Az SPA-k úgy vannak tervezve, hogy gyorsan reagáljanak a felhasználói interakciókra, mivel csak a szükséges tartalmi részeket cserélik ki, nem az egész oldalt.
Minden információ áramlás az első oldalletöltést követően AJAX kérések formájában érkezik és nem történik konkrét oldalletöltés. Tehát nem HTML-t kapunk a szervertől, hane JSON formátumban érkező adatcsomagot kaparintunk meg.
Csak az első oldalletöltéskor érkezik konkrét HTML dokumentum. Elindul az alkalmazás, benne az útvonalválasztó is. És az angular beileszti a megfelelő komponenst.
Az SPA fő jellemzői:
- Dinamikus Interakció: Az SPA-k gyors és fluid felhasználói élményt biztosítanak, mivel csak a szükséges tartalmi részeket töltik be vagy cserélik ki.
- Közvetlen URL Hivatkozások: Bár az SPA-k egyetlen oldalon működnek, továbbra is támogatják az URL-ek közvetlen hivatkozását specifikus alkalmazási állapotokra vagy nézetekre a böngésző történet kezelésének és a mély linkelésnek köszönhetően.
- Frontend Alapú Navigáció: Az oldalnavigáció nem igényel oldal újratöltést. A JavaScript (gyakran keretrendszerek, mint az Angular, React vagy Vue segítségével) kezeli a nézetek közötti navigációt.
- Backend Kommunikáció: Az SPA-k általában AJAX-on (Asynchronous JavaScript and XML) keresztül kommunikálnak a szerverrel, ami lehetővé teszi az adatok dinamikus lekérdezését és frissítését anélkül, hogy újra kellene tölteni az oldalt.
Előnyök:
- Gyors: Miután az alkalmazás elsődleges forrásai (HTML, CSS, JavaScript) betöltődtek, csak az adatokat kell letölteni és elküldeni a szervernek, amikor a felhasználó interakcióba lép az alkalmazással.
- Jobb Felhasználói Élmény: A fluid navigáció és a gyors válaszidők javítják a felhasználói élményt.
- Elválasztás a frontend és a backend között: Ez lehetővé teszi a fejlesztők számára, hogy különállóan dolgozzanak a frontend-en és a backend-en, valamint elősegíti az alkalmazás skálázhatóságát és a karbantartását.
Hátrányok:
- Kezdeti Betöltési Idő: Az SPA-k hajlamosak lehetnek hosszabb kezdeti betöltési időre, mivel az alkalmazás összes forrása egyszerre töltődik be.
- SEO Kihívások: Mivel az SPA-k dinamikusan generálódnak, néhány keresőmotor nehézségekbe ütközhet az oldal tartalmának indexelésében. Ugyanakkor ez az elmúlt években javult, és vannak megoldások, mint például az előrenderelés (prerendering), amelyek segítenek ezen a problémán.
- Komplexitás: Az SPA-k építése és karbantartása komplexebb lehet, különösen nagy alkalmazások esetén.
Annak ellenére, hogy vannak hátrányai, az SPA-k népszerűsége nőtt a modern webfejlesztésben a felhasználói élmény javítása és a fejlesztési lehetőségek bővülése érdekében.