Single-page application (SPA) to aplikacja na miarę naszych czasów: szybka, „lekka”, przyjazna w obsłudze i gwarantująca wysoki poziom user experience. Wyjaśniamy, czym SPA różni się od multi-page application (MPA), jakie są jej mocne strony i w jakich zastosowaniach sprawdza się najlepiej.

W dzisiejszym internecie rządzi UX. Wszystko musi być szybko, gładko, estetycznie i przystępnie. Tak, żeby użytkownik czuł się ukontentowany i nie chciał zmienić strony lub narzędzia – np. aplikacji webowej – na konkurencyjne. O wysoką jakość usability można zadbać na wiele sposobów. Jeden z nich nazywa się single-page application (SPA), czyli aplikacja jednostronicowa.

SPA vs MPA – na czym polega różnica w działaniu tych aplikacji?

W czasach już minionych, ale jeszcze nieodległych na rynku aplikacji webowych i serwisów internetowych rządziło niepodzielnie jedno, domyślne rozwiązanie: multi-page application (MPA) – aplikacja wielostronicowa. W tym modelu, zgodnie z nazwą, aplikacje i serwisy działają w oparciu o wiele stron i wiele plików HTML. Dynamiczna treść HTML generowana jest przez backend, a każde przejście między stronami wiąże się z wysłaniem żądania nowej strony i pobraniem pliku HTML z serwera. Wpływa to na opóźnienia w ładowaniu i wyświetlaniu treści, tym bardziej że przesył danych nie zawsze przebiega sprawnie. W efekcie czas oczekiwania na reakcję systemu bywa zbyt długi jak na dzisiejsze standardy.

W przypadku SPA sprawy mają się inaczej: prościej, szybciej i przyjaźniej dla użytkownika. Aplikacja jednostronicowa korzysta tylko z jednego pliku HTML i nie przeładowuje stron podczas jej obsługi. Cała jej zawartość może zostać przesłana za jednym razem, po nawiązaniu komunikacji z serwerem. W efekcie dane i treść mogą być generowane po stronie frontendu, czyli przez przeglądarkę. Wprawdzie aplikacja wciąż komunikuje się z backendem, np. przez REST API lub graphQL, ale korzysta tylko z warstwy danych i nie musi renderować widoków na serwerze. Dzięki temu po kliknięciu w podstronę treści wyświetlane są błyskawicznie bez konieczności przesyłania dużych ilości danych z backendu.

Ten mechanizm sprawia, że single-page application zapewnia znacznie lepsze doświadczenie użytkownika niż multi-page application. Reakcje SPA są błyskawiczne i pozbawione „szwów” w postaci widocznych tranzycji między jednym a drugim ekranem lub stanem aplikacji. Pod tym względem aplikacja jednostronicowa przypomina aplikację komputerową (zainstalowaną na urządzeniu i mogącą działać również w trybie offline), która – przy odpowiednich parametrach urządzenia – nie „zamula” i żwawo reaguje na polecenia użytkownika.

Skąd się wzięły SPA? Krótka historia single-page application

Koncepcja stojąca za single-page application nie jest nowa. Technologia zbliżona do współczesnej wersji SPA została opisana w patencie z 2002 r. Jej wdrożenie ułatwił jednak mechanizm AJAX, który jako standard sieciowy funkcjonuje od 2006 r. To zestaw technik do budowania systemów webowych, wykorzystujący szereg technologii po stronie klienta do tworzenia asynchronicznych aplikacji. Dzięki AJAX program może wysyłać i odbierać dane z serwera w tle, bez wpływania na aktualny stan strony i tryb wyświetlania treści, a więc bez zakłócania user experience.

Pojawienie się AJAX nie było jednak kluczowym momentem przełomowym w upowszechnieniu się SPA. Popularyzacja aplikacji jednostronicowych to efekt szerszego zjawiska związanego z gwałtownym rozwojem frontendu i wzrostem znaczenia UX w ostatnich latach. Pierwsze single-page applications tworzone były jako aplety Javy czy aplikacje Flash, a także w „czystym” JavaScript lub bibliotece jQuery. Jednak ich kreację znacząco ułatwiły takie systemy, jak Angular, React.js czy Vue – stosunkowo młode frameworki języka JavaScript, wykorzystywane do tworzenia frontendu.

Zalety single-page application sprawiły, że obecnie jest to rozwiązanie w wielu przypadkach preferowane. Sprawdza się ono przede wszystkim w projektach rozmaitych narzędzi webowych, w których kluczowe znaczenie ma szybkość działania i atrakcyjny UX, zaś mniejszą rolę odgrywają treści. Przykładów aplikacji single-page w praktyce jest mnóstwo. Do najpopularniejszych aplikacji tego typu należą Facebook, Gmail, Google Maps, Netflix czy Paypal.

SPA, MPA czy hybryda? W jakich zastosowaniach sprawdzają się poszczególne aplikacje?

Nie znaczy to, że SPA jest rozwiązaniem bezwzględnie lepszym. Aplikacje MPA wciąż są szeroko rozpowszechnione i w wielu przypadkach trudne do uniknięcia. Przykładowo w modelu MPA działają portale informacyjne, w których zakładki w rodzaju „Wiadomości”, „Biznes”, „Sport” prowadzą do osobnych stron. Zresztą tego typu serwisy zwykle nie są prostym zlepkiem stron www. Przeważnie wykorzystują technologie stanowiące „namiastkowe” lub pełnowymiarowe aplikacje webowe, służące choćby do streamingu, zakupów czy różnych form interakcji.

Częste jest również łączenie technologii MPA i SPA. Takie podejście jest charakterystyczne m.in. dla serwisów e-commerce, ponieważ pozwala na indeksowanie poszczególnych stron produktowych w wynikach wyszukiwania. Również serwisy usługowe stosują tego typu hybrydowe rozwiązania. Tak jest choćby w przypadku portalu Booking.com, gdzie „wielostronicowość” związana z zastosowaniem modelu MPA ma kluczowe znaczenie.

Każde z miejsc noclegowych dostępnych w systemie Booking.com ma swoją podstronę. W rezultacie może być indeksowane w wynikach Google jako samodzielna lokalizacja z własnym URL. Po kliknięciu w odpowiedni link z poziomu SERP trafiamy na stronę przypisaną danemu hotelowi lub hostelowi w serwisie Booking.com, na której możemy dokonać rezerwacji. Jednak tego typu podstrony funkcjonują już w modelu SPA, ponieważ rezerwacja dokonywana jest za pośrednictwem aplikacji działającej w ramach jednej strony. Wielostronicowa platforma (MPA) może więc zawierać strony „skrywające” jednostronicowe aplikacje.

Warto przy okazji wyjaśnić kwestię, która często budzi wątpliwości. Single-page application bywa mylona z witrynami typu one page, które zazwyczaj z aplikacjami nie mają wiele wspólnego. One page to po prostu strony pozbawione podstron, w których przejście do kolejnej kategorii treści odbywa się przez scrollowanie w dół lub kliknięcie w odnośnik „przerzucający” użytkownika do innego „poziomu” strony. Witryny typu one page najlepiej sprawdzają się jako internetowe wizytówki lub strony firmowe dla małych i średnich biznesów.

Czy w SPA da się tworzyć linki do podstron?

Osobną, istotną kwestią związaną z SPA jest linkowanie. Już samo określenie aplikacja jednostronicowa sugeruje, że tego typu „konstrukcje” korzystają z jednego URL-u. Tak być może, ale nie musi. SPA to często narzędzia, które nie wymagają tworzenia rozbudowanych serwisów z podstronami i mogą być umieszczone – wraz z niezbędnymi treściami – pod jednym lokalizatorem (URL). Jednak możliwość tworzenia wirtualnych podstron wraz z przypisanymi im URL-ami istnieje, choć mechanizm działa nieco inaczej niż w przypadku MPA.

Zasadniczo dostępne są dwa rozwiązania: z wykorzystaniem znacznika hash (#) i bez. W pierwszym przypadku lokalizator zawiera znak #, który oddziela „podstawowy” URL od oznaczenia (np. wyrazu określającego kategorię treści) wskazującego na sekcję aplikacji. Identyfikatory te nie są przesyłane do serwera jako żądanie HTTP, a jedynie wskazują przeglądarce, jakie zasoby ma wyświetlić. URL-e z hashem to rozwiązanie odchodzące do lamusa. Jest ono stosowane coraz rzadziej, ponieważ nie sprzyja pozycjonowaniu SPA i może wydawać się nieintuicyjne, a nawet „podejrzane” niektórym użytkownikom.

Drugie rozwiązanie oparte jest na wykorzystaniu HTML History API. Jest przyjazne dla SEO i użytkowników, ale nieco trudniejsze do wdrożenia, wymaga bowiem odpowiedniej konfiguracji serwera. Ponadto w przypadku błędnego zdefiniowaniu ścieżek URL może skutkować przeładowaniami całej strony. Wdrożenie tego typu linkowania ułatwiają jednak moduły do routingu, które obecnie wbudowane są w większość frameworków do tworzenia SPA.

Niezależnie od wyboru metody w przypadku realizacji bardziej rozbudowanej SPA warto zadbać o stworzenie URL-i do podstron lub widoków dla określonych sekcji treści. Ułatwiają one nawigację po witrynie i wpływają na jej czytelność oraz przyjazność dla użytkownika.

SPA a SEO. Jak pozycjonować aplikacje single-page?

Mimo wielu zalet SPA posiada swoją piętę Achillesową. Chodzi o optymalizację pod kątem silników wyszukiwania. Aplikacje javascriptowe, generowane po stronie klienta (przez przeglądarkę), mają słabe wsparcie SEO w porównaniu ze stronami generowanymi w backendzie (MPA). Roboty Google przez długi czas ignorowały treści serwowane przez JavaScript. Sytuacja się poprawiła – do tego stopnia, że Google w swoich zaleceniach promuje rozwiązanie SPA – ale i tak aplikacje jednostronicowe mają w SERP pod górkę.

Nie znaczy to, że twórcy SPA są na przegranej pozycji. Pomocą służą im rozwiązania w rodzaju Next.js. To minimalistyczny framework Reacta, który umożliwia tworzenie aplikacji jednostronicowych z obsługą tzw. server side rendering (SSR), czyli renderowania po stronie serwera, innymi słowy: serwowania wygenerowanego kodu HTML danej strony. Dzięki zastosowaniu tego rozwiązania strona staje się czytelna dla robotów Google, co umożliwia pozycjonowanie całej witryny. Oczywiście w tym przypadku nie mamy do czynienia z czystą SPA, tylko hybrydą aplikacji jednostronicowej z charakterystycznym dla MPA renderowaniem w backendzie.

Kwestia pozycjonowania SPA jest oczywiście bardziej złożona. Trudno też oddzielić ją od przeznaczenia aplikacji i sposobu jej promocji. Tradycyjnie aplikacje webowe miały zastosowania biznesowe i Google nie kładł nacisku na indeksowanie tego typu stron, koncentrując się na witrynach serwujących treści. Obecnie sytuacja się zmienia, ponieważ aplikacji webowych przybywa i rośnie konkurencja w tym obszarze – dlatego walka o wyższą pozycję w wynikach wyszukiwania się zaostrza.

Aplikacje SPA – jakie mają zalety i wady?

Zalety i wady SPA w dużym stopniu zależą od celów, jakim aplikacja ma służyć. Szczegóły konkretnych rozwiązań – single-page application, multi-page application bądź hybrydowego – najlepiej omówić z doświadczonym software house'em, ponieważ o właściwym wyborze mogą przesądzać niuanse.

Wśród zalet single-page application najczęściej wymienia się następujące kwestie:

1. SPA są szybsze niż MPA
Choć załadowanie apki trwa dłużej niż w przypadku MPA – bo wiąże się z przesłaniem wszystkich plików z serwera „na starcie” – nawigacja po aplikacji jednostronicowej przebiega szybciej niż w przypadku multi-page'a i wiąże się z mniejszym obciążeniem zarówno serwera, jak i urządzenia klienckiego. Aplikacje MPA wymagają bowiem przesyłania plików z serwera przy każdym przeładowaniu strony.


2. SPA zapewnia lepsze user experience
Szybkość i płynność działania SPA przekłada się na atrakcyjniejsze doświadczenie użytkownika niż w przypadku MPA. To mocny argument za aplikacją single-page, bo UX ma obecnie ogromne znaczenie.


3. SPA jest łatwiejsza do debugowania
Zamiast przedzierać się przez tysiące linijek kodu po stronie serwera developerzy mogą zdebugować SPA przez zbadanie kodu JavaScript wyrenderowanego w przeglądarce. Ponadto wiele frameworków JavaScript służących do tworzenia SPA ma wbudowane narzędzia do debugowania.


4. SPA można łatwiej przerobić na innego typu aplikacje
Sporą część kodu SPA można wykorzystać do stworzenia aplikacji mobilnej] na bazie aplikacji single-page. Mając SPA za bazę, łatwiej również stworzyć progressive web app (PWA), czyli aplikację progresywną.

Jeśli chodzi o wady aplikacji SPA, to najczęściej wskazuje się następujące mankamenty:

1. SPA są trudniejsze w pozycjonowaniu
Jeśli zależy ci na wysokiej pozycji w Google lub tworzysz system, w którym treść odgrywa istotną rolę, lepszą opcją będzie MPA lub rozwiązanie hybrydowe, łączące wariant multi-page i aplikację jednostronicową.


2. SPA ładują się wolniej „na starcie”
Może to być uciążliwe w przypadku słabego połączenia sieciowego. Z drugiej strony – po przesłaniu plików z serwera SPA „hula” znacznie szybciej niż MPA.


3. SPA mogą być niekompatybilne ze starszymi przeglądarkami
To efekt obfitego korzystania z frameworków JavaScript i nowych interfejsów API przy ich tworzeniu.


4. SPA stawiają większe wyzwania w zakresie analityki
Narzędzia analityczne lepiej współpracują ze stronami renderowanymi w backendzie. Zapewnienie lepszego wglądu w ruch i działania na stronie może wymagać dodatkowych prac developerskich.

Jaką aplikację mam wybrać dla swojego biznesu?

Zasadniczo model SPA polecany jest w przypadku aplikacji biznesowych lub konsumenckich, które wymagają wielu interakcji z użytkownikiem, a dynamika i płynność ich obsługi ma kluczowe znaczenie. Modele MPA sprawdzą się w przypadku serwisów informacyjnych, a hybrydowe m.in. w przypadku e-commerce i innych narzędzi internetowych, obejmujących wiele stron wymagających indeksowania w wyszukiwarkach.

Jeśli szukasz software house'u, który sprawnie przeprowadzi cię przez meandry dostępnych rozwiązań webowych i pomoże ci opracować plan działania, który najlepiej zrealizuje twoje cele biznesowe – skontaktuj się z nami.