Frontend Academy · Lekcja

Wdrażanie: statyczne a SSR

Wygeneruje Pan/Pani w pełni statyczną witrynę za pomocą nuxt generate, wdroży aplikację SSR na serwerze Node lub w środowisku brzegowym i skonfiguruje silnik Nuxt nitro.

Wdrażanie: statyczne a SSR to bezpłatna lekcja Frontend 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Nuxt renderuje w każdym środowisku

Nuxt 3 obsługuje cztery tryby wdrażania: statyczny (nuxt generate), SSR (serwer Node), Edge (Cloudflare Workers, Vercel Edge) oraz hybrydowy (dla poszczególnych tras).

Wdrażanie statyczne

nuxt generate wstępnie renderuje każdą trasę do plików HTML. Folder .output/public można wdrożyć na dowolnym hostingu statycznym (Netlify, Vercel, GitHub Pages, S3).

npm run generate
# .output/public/ contains:
# index.html, about/index.html, blog/post-1/index.html, ...

# Deploy:
npx wrangler pages deploy .output/public
# or
rsync -av .output/public/ user@host:/var/www/

Generowanie tras dynamicznych

W przypadku tras takich jak /blog/[slug] Nuxt musi znać wszystkie slugi. Należy przekazać je za pomocą nitro.prerender.routes w konfiguracji.

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/blog/post-1', '/blog/post-2', '/blog/post-3']
    }
  }
});

// Or auto-discover: Nitro follows links from /, generating any it finds.

Wdrażanie SSR na Node

nuxt build tworzy serwer Nitro. Należy wdrożyć go na dowolnym hoście Node (Render, Railway, Fly.io lub własny VPS), uruchamiając node .output/server/index.mjs.

npm run build
# .output/server/index.mjs is the Nitro server
# .output/public/ contains static assets

node .output/server/index.mjs # starts on PORT (default 3000)

Nitro — uniwersalny serwer

Serwer Nuxt 3 to Nitro — przenośny silnik obsługujący dowolne środowisko uruchomieniowe: Node, Bun, Deno, Cloudflare Workers, Vercel, Netlify i AWS Lambda. Środowisko docelowe można zmienić za pomocą nitro.preset.

Wdrażanie Edge (Cloudflare Workers)

Należy ustawić preset na cloudflare-pages lub cloudflare. Proces budowania wygeneruje Workera działającego na brzegu sieci Cloudflare.

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: { preset: 'cloudflare-pages' }
});

// Build, then:
npx wrangler pages deploy ./dist

Wdrażanie Edge (Vercel Edge)

Vercel automatycznie wykrywa Nuxt i używa odpowiedniego presetu. Aby wymusić Edge Runtime, należy ustawić: preset: 'vercel-edge'.

Renderowanie hybrydowe

Różne trasy mogą być renderowane w różny sposób. Konfigurację należy określić za pomocą routeRules.

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/':           { prerender: true },        // SSG
    '/blog/**':    { isr: 60 },                // ISR every 60s
    '/dashboard/**': { ssr: false },           // SPA (client-only)
    '/admin/**':   { ssr: true }               // SSR (per-request)
  }
});

Wybór między statycznym renderowaniem a SSR

Statyczne: treści rzadko się zmieniają, maksymalna szybkość i tani hosting CDN (blogi, strony marketingowe, dokumentacja). SSR: treści zależne od użytkownika, dane dynamiczne i wyniki wyszukiwania (panele, e-commerce). Hybrydowe renderowanie pozwala połączyć oba podejścia dla poszczególnych tras.

Zmienne środowiskowe

Należy użyć runtimeConfig w nuxt.config.ts. Wartości w public są dostępne po stronie klienta, a pozostałe pozostają wyłącznie po stronie serwera.

export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: '',         // server-only, set via NUXT_API_SECRET env
    public: {
      apiBase: 'https://api.example.com' // accessible client-side
    }
  }
});

// In a component:
const config = useRuntimeConfig();
console.log(config.public.apiBase);

Buforowanie procesu budowania w CI

Należy buforować foldery .nuxt/ i node_modules/ między uruchomieniami CI, aby przyspieszyć budowanie. W Vercel i Netlify odbywa się to automatycznie.

Testowanie wydajności

Po wdrożeniu należy uruchomić Lighthouse dla wdrożonego adresu URL, a nie dla localhost. Dzięki temu test obejmuje rzeczywisty CDN, rzeczywiste lokalizacje brzegowe i rzeczywiste ograniczenie wydajności procesora.

Szybkie sprawdzenie

Które polecenie Nuxt 3 wstępnie renderuje wszystkie trasy do statycznego HTML na potrzeby wdrożenia w CDN, takim jak Netlify lub Cloudflare Pages?

Podsumowanie: wdrażanie Nuxt

nuxt generate → statyczne renderowanie (wdrożenie .output/public). nuxt build → SSR (wdrożenie z użyciem Node). Presety Nitro obsługują Cloudflare, Vercel, Netlify, AWS itd. routeRules służy do renderowania hybrydowego (prerender, isr, ssr, spa dla poszczególnych tras). runtimeConfig służy do zmiennych środowiskowych (public jest dostępne po stronie klienta). Testy należy przeprowadzać za pomocą Lighthouse dla wdrożonego adresu URL.

Często zadawane pytania

Czy lekcja „Wdrażanie: statyczne a SSR” jest bezpłatna?

Tak — pełny tekst „Wdrażanie: statyczne a SSR” 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Wdrażanie: statyczne a SSR”?

Wygeneruje Pan/Pani w pełni statyczną witrynę za pomocą nuxt generate, wdroży aplikację SSR na serwerze Node lub w środowisku brzegowym i skonfiguruje silnik Nuxt nitro. Ćwiczysz Frontend 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ąć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend 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 „Wdrażanie: statyczne a SSR”?

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 Frontend Academy?

Tak. Każda lekcja Frontend 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

Routing oparty na plikach i automatyczny import
useFetch i useAsyncData
Moduły Nuxt: obrazy, uwierzytelnianie i i18n
Wdrażanie: statyczne a SSR

← Powrót do Frontend Academy