W ostatnich latach coraz częściej możemy spotkać się ze stronami – a właściwie aplikacjami internetowymi – typu SPA. Co właściwie oznacza ten skrót, czym charakteryzuje się takie podejście do tworzenia witryn i jakie są jego wady oraz zalety?
Strona SPA – co to jest?
W dosłownym tłumaczeniu skrót „SPA”, czyli „Single Page Application”, oznacza „jednostronicową aplikację internetową”. To specyficzny rodzaj witryn, w którym za całą zawartość odpowiada pojedynczy plik HTML. Podstrony nie są zatem zapisane w osobnych lokalizacjach na serwerze. Zamiast tego odpowiednio przygotowane skrypty wyświetlają konkretne części witryny, zachowując elementy, które powinny zostać bez zmian, takie jak nagłówek strony czy menu nawigacyjne. W efekcie przy przejściu do innej części strony nie ma potrzeby przeładowywania całości, co przekłada się na uczucie większej płynności dla użytkownika.
Przykładów zastosowania takiego projektu stron internetowych nie brakuje nawet wśród najpopularniejszych serwisów. Koncepcję SPA wykorzystują m.in. Netflix, Gmail, Airbnb, Paypal czy Mapy Google. Takie podejście zyskało spore uznanie zarówno w przypadku niewielkich firm, jak i gigantów, którzy dominują w swoich branżach – z pewnością warto zastanowić się nad modelem SPA przy własnej stronie.
Jak działa strona SPA?
Aby odpowiedzieć na to pytanie, warto najpierw opisać sposób działania tradycyjnych stron internetowych, które są niekiedy określane jako „MPA” – „Multiple Page Application”, czyli „aplikacje wielostronicowe”. Standardowe podejście zakłada obecność różnych podstron, które są umieszczone w osobnych plikach i połączone między sobą poprzez odnośniki. Kliknięcie konkretnego linku powoduje wczytanie nowego pliku, który zawiera kod docelowej strony.
Warto jednak zauważyć, że wiele elementów witryny zachowuje swoje położenie i zawartość bez względu na to, na której podstronie się znajdujemy. Dotyczy to przede wszystkim sekcji takich jak menu, nagłówek czy stopka. Aplikacje SPA powstały między innymi w celu ograniczenia potrzeby wielokrotnego ładowania tych samych części strony. Dzięki wykorzystaniu języków skryptowych, takich jak JavaScript, możliwe jest dynamiczne wczytanie potrzebnej zawartości, pozostawiając resztę bez zmian. To właśnie główna cecha aplikacji webowych SPA – stronę tego typu można określić jako witrynę, która z użyciem skryptów wyświetla użytkownikowi żądaną treść bez potrzeby przeładowywania.
Technologie wykorzystywane przy tworzeniu jednostronicowych aplikacji internetowych
Przez długi czas tego typu witryny opierały się głównie na stosowaniu apletów Javy lub aplikacji Flash. Stosunkowo powolne działanie i obawy związane z bezpieczeństwem, zwłaszcza w przypadku technologii Flash, sprawiły jednak, że w sektorze web developmentu potrzebne były inne narzędzia. Strony SPA zaczęły przybierać swoją obecną formę wraz ze wzrostem popularności techniki AJAX, która pozwala na asynchronicznie przeładowywanie elementów na witrynie. Kluczowym elementem jest tutaj wspomniany już język skryptowy JavaScript, który doskonale pasuje do obsługi dynamicznego wczytywania stron. Z tego względu przy aplikacjach SPA najczęściej stosuje się różne frameworki i biblioteki oparte na języku JavaScript – w tym Vue.js, Angular czy React.js.
Zalety stron typu SPA
Nie bez powodu coraz więcej firm stawia właśnie na witryny internetowe tworzone w tym stylu. Za tym trendem stoją liczne zalety stron SPA – oto najważniejsze z nich.
1. Szybsze ładowanie
W przypadku stron MPA przejście na każdą podstronę wymaga przesłania całkowicie nowego zapytania do serwera, a często także do bazy danych. Aplikacje SPA z kolei ładują większość elementów już na samym początku – dzięki temu całość działa płynnie i bez zbędnych opóźnień. Spore znaczenie ma tutaj między innymi odpowiednie wykorzystanie pamięci podręcznej.
2. Lepszy UX
Doświadczenia użytkownika, czyli właśnie UX, to obecnie jeden z głównych czynników, jakie należy wziąć pod uwagę przy tworzeniu strony. Aplikacje SPA wypadają pod tym względem znacznie lepiej niż tradycyjne witryny. Ponownie wynika to z braku potrzeby przeładowywania – dzięki temu cały proces korzystania ze strony jest spójny; do tego dochodzi także szybsze działanie witryny.
3. Łatwiejszy rozwój witryny
Choć w niektórych przypadkach rozpoczęcie tworzenia strony może być pewnym wyzwaniem, zwłaszcza przy stosowaniu nowych frameworków, późniejsze dodawanie funkcji przebiega zazwyczaj znacznie łatwiej niż przy witrynach typu MPA. Nawet skomplikowane elementy aplikacji webowej stworzonej zgodnie z tą koncepcją mogą być przygotowane w stosunkowo prosty sposób, dzięki czemu programiści mogą zaoszczędzić sporo czasu i zasobów.
Jednostronicowe aplikacje webowe – wady
Mimo licznych zalet, które przekonują do stron SPA coraz więcej firm, nie można także pominąć kilku potencjalnych minusów. Jednostronicowe aplikacje nie zawsze się sprawdzą – przed podjęciem decyzji o projekcie witryny warto zaznaczyć najczęściej wskazywane wady.
1. Trudniejsza optymalizacja pod kątem SEO
Algorytmy wyszukiwarek internetowych zwracają uwagę przede wszystkim na zawartość strony. Dotyczy to nie tylko jej jakości, lecz także sposobu prezentacji – dla przykładu Google penalizuje witryny, w których treść jest ukryta. To sprawia, że optymalizowanie strony SPA może być trudniejsze. Rozwiązaniem tego problemu może być jednak renderowanie części front-endowej na serwerze, co znacznie ułatwia dostosowanie witryny do wymogów wyszukiwarek.
2. Spore obciążenie dla przeglądarki
Ze względu na fakt, że języki skryptowe takie jak JavaScript działają bezpośrednio w przeglądarce, obsługa strony SPA wymaga więcej zasobów niż w przypadku MPA. Warto jednak zaznaczyć, że problem ten jest praktycznie niezauważalny przy nowych, dobrze zoptymalizowanych przeglądarkach, dzięki czemu będzie on dotykać jedynie bardzo niewielkiej części użytkowników.
3. Strony SPA są bardziej narażone na niektóre ataki hakerskie
Mowa w szczególności o atakach XSS, które polegają na „wstrzyknięciu” do kodu witryny niechcianych skryptów, które mają na celu na przykład przechwycić dane użytkownika. Strony SPA opierają niemal całe działanie właśnie na skryptach, przez co ryzyko w tym aspekcie jest większe.
