
Yksittäinen sivusovellus (SPA)
Yksittäinen sivusovellus (Single-Page Application, SPA) on web-sovellus, joka lataa yhden HTML-sivun ja päivittää dynaamisesti sisältöä käyttäjän interaktioiden myötä ilman koko sivun uudelleenlatauksia.
Yksittäinen sivu -sovellus (SPA) on verkkosovellus, joka latautuu kerran ja päivittyy dynaamisesti käyttäjien navigoidessa sen sisällä. Perinteisen lähestymistavan sijaan, jossa jokainen napsautus lataa kokonaan uuden sivun palvelimelta, SPA kirjoittaa nykyisen sivun uudelleen uusilla tiedoilla luoden sujuvamman, sovelluksen kaltaisen kokemuksen.
Alkulatauksen jälkeen kaikki myöhemmät vuorovaikutukset tapahtuvat JavaScript API -kutsujen kautta, jotka hakevat dataa ja päivittävät sivun sisältöä ilman täydellistä uudelleenlatausta. Siksi esimerkiksi Gmail, Google Maps ja Trello tuntuvat niin nopeilta ja reaktiivisilta. SPAt rakennetaan yleensä JavaScript-kehyksillä kuten React, Angular tai Vue.js.
Käytännössä
- Gmail on yksi tunnetuimmista SPAsovelluksista: voit lukea, kirjoittaa ja hakea sähköposteja ilman, että sivu koskaan latautuu kokonaan uudelleen
- Projekinhallintatyökalu, joka on rakennettu SPA:nä, saavutti 40 % korkeamman käyttäjäsitoutumisen, koska raahaa-pudota-liittymä ja hetkelliset päivitykset tekivät tehtävien hallinnasta vaivatonta
- Rahoituskoontinäköalan SPA mahdollisti analyytikoiden vaihtaa eri datanäkymiin ja aikakausiin välittömästi verrattuna edellisen perinteisen verkkosovelluksen 2–3 sekunnin sivulatausaikoihin
- Verkkosuunnittelutyökalu (kuten Figma tai Canva), joka on rakennettu SPAna, mahdollistaa reaaliaikaisen yhteistyön, jossa useat käyttäjät näkevät muutokset välittömästi ilman sivun uudelleenlatausta
Lisää aiheesta: Verkkosivujen kehitys
- Responsive-design
- Progressiivinen verkkosovellus (PWA)
- Yksittäinen sivusovellus (SPA)
- Palvelinpohjainen renderöinti (SSR)
- Staattinen sivuston generointi (SSG)
- API (Application Programming Interface)
- CMS (Sisällönhallintajärjestelmä)
- Headless-CMS
- Versionhallinta
- CI/CD (Continuous Integration / Continuous Deployment)
- JavaScript-kehyskirjasto
- TypeScript
Et ole varma, miten tämä koskee sinua?
Kokenut insinööri käy läpi kohteen, hakukoneesi esiintymisen ja yhteydenottojen saannin, ja kirjoittaa kolme asiaa, jotka kannattaa korjata ensin. Pidät dokumentin joka tapauksessa.