W ostatnim czasie na polskich grupach pojawiło się sporo pytań technologicznych odnośnie sposobu budowania stron i aplikacji internetowych. Jak się okazuje - ogrom możliwości, jakie daje nam technologia, bardzo łatwo prowadzi do dezorientacji, w wyniku czego do względnie prostych rozwiązań wykorzystujemy złożone narzędzia.
W dzisiejszym artykule opiszę podstawowe sposoby renderowania Internetów. Wyjaśnię, czym są statyczne strony, SSR i SPA, opiszę ich wady i zalety, a także wskażę, kiedy warto postawić na dane rozwiązanie.
Zacznijmy od nieśmiertelnego rozwiązania, czyli od…
Statycznej strony internetowej
Najprostszym przykładem statycznej strony internetowej jest strona napisana w czystym HTML'u. O ile dla prostych stron Internetowych może być to wystarczające podejście, o tyle tworzenie np. blogu w ten sposób mogłoby być trudne. Na szczęście dziś już nie tworzy się złożonych stron internetowych w ten sposób. Byłoby to niesamowicie czasochłonne i podatne na błędy, których naprawa zajmowałaby dużo czasu.
Do tworzenia statycznych stron używa się zazwyczaj dedykowanych generatorów. Ich działanie oparte jest o źródło danych oraz szablony stron, które mają zostać nimi wypełnione. W wyniku budowania takiej strony generator "zaciąga" cały zestaw danych i generuje stronę dla każdego rekordu, wypełniając ją danymi. W wyniku takiego działania dostajemy pliki HTML gotowe do wrzucenia na serwer.
Statyczne strony internetowe świetnie sprawdzają się jako: landing page, porfolio, blogi, dokumentacje, itp. W dużym skrócie - wszędzie gdzie treść jest statyczna, tam idealnie spisze się statyczna strona.
Zalety:
- Brak problemów z SEO,
- Szybko się ładują,
- Nie potrzebują JSa, aby działać,
- Zahostujemy je w statycznym hostingu (niski koszt i łatwość),
- Brak bezpośredniego połączenia z serwerem danych oznacza wysokie bezpieczeństwo.
Wady:
- Każde dodanie treści wymaga ponownego zbudowania CAŁEJ strony (może być czaso- i zasobo-chłonne przy większej ilości treści)
Do wad bardzo pasowało mi napisanie "niski stopień interaktywności / dynamizmu w porównaniu do SPA / SSR". Warto się jednak dwa razy nad tym zastanowić. Przy drugim spojrzeniu okazuje się, że nie jest to ich wada - to ich charakterystyka. Do tego są najlepsze.
Popularnym generatorem stron statycznych jest Gatsby.js. Działa on w oparciu o Reacta i ma masę pluginów ułatwiających development.
BTW. ten blog jest zbudowany z użyciem Gatsby'ego ;)
SPA - aplikacja jednostronnicowa
Jest to nowoczesne podejście tworzenia aplikacji internetowych (aplikacji, nie stron). SPA bazują na pojedynczym pliku HTML stanowiącym wejście do aplikacji oraz pliku JS zawierającym całą aplikację. Wszystko, co dzieje się wewnątrz SPA obsługiwane jest przy pomocy JavaScriptu. Charakterystyczne dla SPA jest to, że nie ma tu przeładowań strony przy zmianie URLa - takie scenariusze najczęściej obsługiwane są wewnątrzaplikacjowym routingiem.
Na pierwszy rzut oka mogłoby się wydawać, że w takim rozwiązaniu serwer nie jest potrzebny. Jest to błędne myślenie. Tego typu aplikacje nadal bardzo mocno opierają się na komunikacji z serwerem. Jest ona jednak nieco inna niż w przypadku statycznych stron. SPA nie odpytują serwera o pliki HTML tylko o dane, które są potrzebne do wyświetlenia kolejnych widoków. W wyniku tego strona nie jest przeładowywana, a użytkownik jedynie widzi spinner wczytujący dane. Daje to poczucie "natwyności" strony - jak w przypadku aplikacji desktopowych lub mobilnych.
SPA idealnie nadają się tam, gdzie potrzebujesz zapewnić użytkownikowi "natywne" poczucie aplikacji - dynamiczne widoki i wysoki stopień interaktywności. Przykładami SPA są: Netflix, Gmail, Google Maps.
Zalety:
- Brak przeładowań zapewnia wysoki komfort użytkowania
- Wysoki stopień interaktywności
- Stosunkowo prosta obsługa dynamicznych danych
Wady:
- Trudności z SEO
- Inicjalne ładowanie strony jest dłuższe
- Wymaga JSa, aby działać
Obecnie najpopularniejszymi narzędziami do budowania SPA są React, Vue i Angular.
SSR - renderowanie po stronie serwera
Server Side Rendering jest swego rodzaju kompromisem pomiędzy SPA a statyczną stroną. Podejście to istnieje od wielu lat, a przez długi czas było jedynym sposobem na wstrzyknięcie danych z serwera bezpośrednio do strony internetowej. O pojęciu zrobiło się znów głośno wraz z nadejściem SPA. Mądre głowy widząc wady, jakie niesie ze sobą SPA, zaprzęgły nowoczesne frameworki front-endowe, aby te jedynie służyły do definiowania widoków generowanych po stronie serwera. Zniwelowano w ten sposób część wad SPA i przeniesiono większą część odpowiedzialności na stronę serwerową.
Warto wiedzieć, że korzystanie z SSR wcale nie musi nam zabierać dynamizmu SPA. Możemy wykorzystać SSR tylko do pierwszego renderu (SEO friendly), a dalsze działanie aplikacji może być już w modłę SPA.
Z SSR można zbudować zarówno proste strony, jak i złożone aplikacje. Najczęściej używane jest tam, gdzie treść jest często zmieniana. Idealnym kandydatem do zbudowania z użyciem SSR jest e-commerce.
Zalety:
- Brak problemów z SEO,
- Lepsze pozycjonowanie strony,
- Zazwyczaj szybsze ładowanie niż SPA,
- Mniejsze obciążenie urządzenia klienta niż SPA,
- Możliwe jest cache'owanie zapytań po stronie serwera,
Wady:
- Największe obciążenie serwera,
- Konieczność utrzymania serwera,
- SSR jest najbardziej złożoną z tych 3 technik (próg wejścia).
Najpopularniejszymi narzędziami pozwalającymi na tworzenie aplikacji z użyciem server side renderingu są: Next.js (React), Nuxt.js (Vue), Angular Universal i znany wszystkim Wordpress.
Podsumowanie
Pamiętajcie, że w tym wypadku nie ma czegoś takiego jak lepsze czy gorsze narzędzia. Są tylko lepiej albo gorzej dobrane do problemu, który chcemy rozwiązać. Dlatego warto wiedzieć, jakie mamy możliwości i w świadomy sposób podjąć decyzję o skorzystaniu z tej, a nie innej technologii.
Każde z tych pojęć jest na tyle duże, że zasłużyłoby na osobną serię. Z pewnością z czasem napiszę o nich nieco więcej. Do tego momentu zaproponuję Wam inne źródła wiedzy dla każdego z nich. Znajdziecie je poniżej.
Przydatne linki:
- Artykuł od Google "Rendering on the Web" (polecam!)
Statyczne strony internetowe:
Server-side rendering:
Single-page-application:
