Vue Academy · Lekcja

Tryby SSR, SSG i SPA

ssr:true/false, prerenderowanie Nitro, polecenie generate oraz hybrydowe renderowanie dla poszczególnych tras.

Tryby SSR, SSG i SPA to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Przegląd trybów renderowania

Nuxt może renderować aplikację na trzy sposoby: SSR (serwer renderuje każde żądanie), SSG (strony są przygotowywane podczas kompilacji) oraz SPA (całość jest renderowana w przeglądarce). Można nawet łączyć te tryby dla poszczególnych tras.

SSR: ustawienie domyślne

Przy ustawieniu ssr: true (domyślnym) serwer renderuje kod HTML dla każdego żądania, a klient go hydratuje. Zapewnia to szybkie pierwsze wyświetlenie i dobre SEO, ponieważ roboty indeksujące widzą pełny kod.

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true
})

Kiedy SSR sprawdza się najlepiej

SSR pasuje do treści, które często się zmieniają lub są spersonalizowane — pulpitów, kanałów aktualności i sklepów internetowych z aktualnymi cenami — gdy potrzebujesz świeżego kodu HTML przy każdym żądaniu.

Tryb SPA

Ustawienie ssr: false zmienia Nuxt w aplikację jednostronicową: serwer wysyła pusty szkielet, a przeglądarka renderuje całość. Hosting jest prostszy, ale SEO słabsze, a pierwsze wyświetlenie wolniejsze.

export default defineNuxtConfig({
  ssr: false
})

Kiedy SPA jest odpowiednie

Tryb SPA sprawdza się w narzędziach wewnętrznych i aplikacjach dostępnych po zalogowaniu, gdzie SEO nie ma znaczenia i aplikację można wdrożyć jako pliki statyczne w dowolnej sieci CDN.

SSG: generowanie witryny statycznej

Uruchomienie nuxt generate renderuje wstępnie każdą stronę do postaci statycznego kodu HTML podczas kompilacji. Wynikiem jest katalog plików, który można hostować w dowolnym miejscu bez serwera Node.

npx nuxt generate
# outputs static HTML to .output/public

Kiedy SSG jest odpowiednie

SSG idealnie nadaje się do treści, które rzadko się zmieniają — blogów, dokumentacji i witryn marketingowych. Strony działają bardzo szybko, a ich udostępnianie z CDN jest tanie.

Renderowanie dla poszczególnych tras za pomocą routeRules

Konfiguracja routeRules ustawia tryb renderowania dla wzorca ścieżki. To renderowanie hybrydowe: różne części jednej aplikacji korzystają z różnych strategii.

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/admin/**': { ssr: false },
    '/blog/**': { swr: 3600 }
  }
})

Typowe opcje routeRules

prerender: true przygotowuje stronę podczas kompilacji; ssr: false zmienia ją w SPA; swr: n buforuje wynik SSR przez n sekund (stale-while-revalidate); redirect przekierowuje użytkowników w inne miejsce.

Przyrostowa regeneracja statyczna

Opcja isr renderuje stronę przy pierwszym żądaniu i buforuje wynik, a następnie okresowo go regeneruje. Łączy szybkość SSG ze świeżością SSR w przypadku popularnych stron.

routeRules: {
  '/products/**': { isr: 600 }
}

Wybór strategii

Rozpocznij od SSR, aby uzyskać najlepsze połączenie SEO i interaktywności. Użyj SSG dla treści statycznych, SPA dla aplikacji prywatnych, a routeRules do dostrajania poszczególnych tras w miarę pojawiania się wymagań dotyczących wydajności.

Szybki test

Sprawdź swoją wiedzę na temat trybów renderowania.

Podsumowanie

Wiesz już, jakie są tryby renderowania:

SSR (domyślny) renderuje stronę przy każdym żądaniu, zapewniając dobre SEO i szybkie pierwsze wyświetlenie.
ssr:false zapewnia SPA dla aplikacji prywatnych.
nuxt generate tworzy statyczną witrynę SSG.
routeRules umożliwia renderowanie hybrydowe: prerender, swr, isr i ssr:false dla poszczególnych tras.

Często zadawane pytania

Czy lekcja „Tryby SSR, SSG i SPA” jest bezpłatna?

Tak — pełny tekst „Tryby SSR, SSG i SPA” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Tryby SSR, SSG i SPA”?

ssr:true/false, prerenderowanie Nitro, polecenie generate oraz hybrydowe renderowanie dla poszczególnych tras. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Tryby SSR, SSG i SPA”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Vue Academy