Koncepcje SSR: SPA vs SSR vs SSG vs ISR

Centrum Dowodzenia NOVA LAB musi dostarczać informacje możliwie najszybciej. Różne strategie renderowania są jak różne systemy łączności stacji — każdy ma swoje zalety w zależności od sytuacji.

SPA — Single Page Application

Tradycyjna aplikacja Vue to SPA (Single Page Application):

1. Przeglądarka pobiera pusty HTML
2. Ładuje JavaScript (bundle Vue)
3. JavaScript renderuje całą stronę w przeglądarce
4. Nawigacja odbywa się bez przeładowania strony

1Serwer → [pusty HTML + JS bundle] → Przeglądarka → [renderowanie]

Zalety SPA:

• Płynna nawigacja bez przeładowań
• Bogata interaktywność
• Prosty hosting (statyczne pliki)

Wady SPA:

• Wolne pierwsze ładowanie (duży JS bundle)
• Pusta strona do czasu załadowania JS
• Słabe SEO — boty widzą pusty HTML

SSR — Server-Side Rendering

SSR renderuje stronę na serwerze i wysyła gotowy HTML:

1. Serwer otrzymuje request
2. Vue renderuje komponent na serwerze do HTML
3. Wysyła gotowy HTML do przeglądarki
4. Przeglądarka wyświetla stronę natychmiast
5. JavaScript jest ładowany i "hydratuje" stronę (dodaje interaktywność)

1Request → Serwer [renderuje HTML] → Przeglądarka [wyświetla + hydration]

Zalety SSR:

• Szybsze First Contentful Paint (FCP)
• Doskonałe SEO — boty widzą pełny HTML
• Lepsza wydajność na wolnych urządzeniach

Wady SSR:

• Większe obciążenie serwera
• Dłuższy Time to Interactive (TTI)
• Bardziej złożona infrastruktura

SSG — Static Site Generation

SSG generuje HTML w czasie budowania (build time):

1. Podczas

   npm run build

   — każda strona jest prerenderowana do HTML
2. Pliki HTML są gotowe do serwowania
3. Brak serwera — zwykły hosting statyczny
4. JavaScript hydratuje stronę na kliencie

1Build time → [generuje HTML] → Deploy → CDN → Przeglądarka

Zalety SSG:

• Najszybsza możliwa odpowiedź (pliki z CDN)
• Brak serwera — najtańsze
• Doskonałe SEO

Wady SSG:

• Treść nie zmienia się między buildami
• Każda zmiana wymaga rebuildu
• Nie nadaje się do dynamicznych danych

ISR — Incremental Static Regeneration

ISR łączy SSG i SSR — strony są generowane statycznie, ale mogą się odświeżać:

1. Pierwsza wizyta — serwowana strona ze statycznego cache
2. Po określonym czasie — strona jest regenerowana w tle
3. Następna wizyta dostaje zaktualizowaną wersję

1Request → [cache/CDN] → jeśli stałe → regeneruj w tle → nowa wersja

Zalety ISR:

• Szybkość SSG + świeżość SSR
• Automatyczne odświeżanie

Wady ISR:

• Bardziej skomplikowana konfiguracja
• Dane mogą być chwilowo nieaktualne (stale-while-revalidate)

Hydration — klucz do interaktywności

Hydration to proces, w którym Vue "przejmuje" statyczny HTML wygenerowany przez serwer i dodaje do niego interaktywność:

1Serwer: <button>Kliknij</button>  ← statyczny HTML
2   ↓ hydration
3Klient: <button @click="handler">Kliknij</button>  ← interaktywny

Vue porównuje wirtualny DOM z istniejącym HTML i podłącza event handlery, ref-y i reaktywność — bez ponownego renderowania całego DOM.

Kiedy użyć jakiej strategii?

| Strategia | Użyj gdy... | |-----------|-------------| | SPA | Aplikacja wymaga bogatej interaktywności (dashboard, edytor) | | SSR | Ważne SEO + dynamiczne dane (sklep, blog z komentarzami) | | SSG | Treść zmienia się rzadko (dokumentacja, landing page) | | ISR | Treść zmienia się, ale nie w czasie rzeczywistym (blog, katalog) |