Server-Side Rendering vs Static Generation - Co wybrać w Next.js?
Next.js daje Ci 3 sposoby renderowania stron. Każdy ma swoje plusy i minusy. Źle wybrany może kosztować Cię konwersje.
1. Static Generation (SSG) – Generuj przy buildzie
Jak działa:
Strona generuje się raz podczas buildu. Użytkownicy dostają gotowy HTML.
Plusy:
- ⚡ Najszybsze (strona już gotowa)
- 💰 Najtańsze (brak serwera)
- 🔒 Najbezpieczniejsze (brak dynamicznego kodu)
Minusy:
- Dane muszą być znane z góry
- Każda zmiana = rebuild
Kiedy używać:
- Landing pages
- Blogi
- Strony firmowe
- Portfolio
Przykład: Blog z wpisami – posty zmieniają się rzadko, więc generujemy je statycznie.
2. Server-Side Rendering (SSR) – Generuj na żądanie
Jak działa:
Za każdym razem gdy ktoś odwiedza stronę, serwer generuje HTML od nowa.
Plusy:
- Zawsze świeże dane
- Personalizacja per użytkownik
- SEO friendly (Google widzi pełny content)
Minusy:
- Wolniejsze (serwer musi pracować)
- Droższe (potrzebujesz serwera)
- Większe obciążenie infrastruktury
Kiedy używać:
- Dashboardy użytkowników
- Strony z real-time data
- Personalizowane treści
Przykład: Panel klienta – każdy użytkownik widzi swoje dane.
3. Incremental Static Regeneration (ISR) – Najlepsze z obu światów
Jak działa:
Strona statyczna, ale regeneruje się co X sekund w tle.
Plusy:
- Szybka jak SSG
- Świeża jak SSR (prawie)
- Skalowalna (nie trzeba rebuildować wszystkiego)
Minusy:
- Pierwsza osoba po regeneracji czeka dłużej
- Bardziej złożona konfiguracja
Kiedy używać:
- E-commerce (produkty zmieniają się, ale nie co sekundę)
- Newsy (update co 1-5 minut)
- Oferty / cenniki
Przykład: Sklep online – produkty regenerują się co 60 sekund.
Porównanie w liczbach
| Metoda | Time to First Byte | Koszt hosting | Świeżość danych |
| ------ | ------------------ | -------------- | ------------------- |
| SSG | ~10ms | $0-5/miesiąc | Stare (do rebuildu) |
| ISR | ~50ms | $10-20/miesiąc | Prawie świeże |
| SSR | ~200ms | $20-50/miesiąc | Zawsze świeże |
Jak wybieramy w Netova?
90% projektów: SSG + ISR
5% projektów: SSR (dashboardy, aplikacje)
5% projektów: Client-Side Rendering (narzędzia interaktywne)
Pro tip: Możesz mieszać!
// Strona główna: SSG (najszybsza)
export async function getStaticProps() {
return { props: {} };
}
// Blog posty: ISR (revalidate co 60s)
export async function getStaticProps() {
return { props: {}, revalidate: 60 };
}
// Dashboard: SSR (zawsze świeże)
export async function getServerSideProps() {
return { props: {} };
}
Podsumowanie
Nie ma "jednej dobrej odpowiedzi". To zależy od typu contentu i częstotliwości zmian. W Next.js możesz mieć SSG dla strony głównej, ISR dla produktów, i SSR dla panelu użytkownika. Wszystko w jednym projekcie.