Frontend Academy · Ders

Dağıtım: Statik ve SSR Karşılaştırması

nuxt generate ile tamamen statik bir site oluşturmayı, bir SSR uygulamasını Node sunucusuna veya kenar çalışma zamanına dağıtmayı ve Nuxt nitro altyapısını yapılandırmayı öğrenin.

4. ders / 414 adım

Dağıtım: Statik ve SSR Karşılaştırması, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Nuxt Her Yerde Oluşturulabilir

Nuxt 3 dört dağıtım modunu destekler: Statik (nuxt generate), SSR (Node sunucusu), Uç (Cloudflare Workers, Vercel Edge) ve Hibrit (rota bazında).

Statik Dağıtım

nuxt generate, her rotayı HTML dosyaları olarak önceden oluşturur. .output/public klasörünü herhangi bir statik barındırma hizmetine (Netlify, Vercel, GitHub Pages, S3) dağıtın.

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/

Dinamik Rotalar Oluşturma

/blog/[slug] gibi rotalar için Nuxt'ın tüm slug değerlerini bilmesi gerekir. Bunları yapılandırmadaki nitro.prerender.routes aracılığıyla sağlayın.

// 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.

Node'a SSR Dağıtımı

nuxt build bir Nitro sunucusu oluşturur. node .output/server/index.mjs komutunu çalıştırarak herhangi bir Node barındırıcısına (Render, Railway, Fly.io veya VPS'iniz) dağıtın.

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 — Evrensel Sunucu

Nuxt 3'ün sunucusu Nitro'dur; Node, Bun, Deno, Cloudflare Workers, Vercel, Netlify ve AWS Lambda gibi her çalışma zamanını hedefleyebilen taşınabilir bir motordur. Hedefleri nitro.preset ile değiştirin.

Uç Dağıtımı (Cloudflare Workers)

Ön ayarı cloudflare-pages veya cloudflare olarak ayarlayın. Derleme, Cloudflare'ın uç noktalarında çalışan bir Worker oluşturur.

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

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

Uç Dağıtımı (Vercel Edge)

Vercel, Nuxt'ı otomatik olarak algılar ve doğru ön ayarı kullanır. Uç çalışma zamanını zorunlu kılmak için preset: 'vercel-edge' kullanın.

Hibrit Oluşturma

Farklı rotalar farklı biçimlerde oluşturulabilir. Yapılandırmayı routeRules ile yapın.

// 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)
  }
});

Statik ve SSR Arasında Seçim Yapma

Statik: içerik nadiren değişir, en yüksek hız sağlanır ve CDN barındırması ucuzdur (bloglar, pazarlama, belgeler). SSR: kullanıcıya özel içerik, dinamik veriler ve arama sonuçları için uygundur (panolar, e-ticaret). Hibrit yapı, rota bazında bu yaklaşımları birleştirmenizi sağlar.

Ortam Değişkenleri

nuxt.config.ts içindeki runtimeConfig özelliğini kullanın. public istemciye açıktır; geri kalan bölüm yalnızca sunucuda kalır.

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);

Sürekli Entegrasyonda Derleme Önbelleği

Derlemeleri hızlandırmak için sürekli entegrasyon çalıştırmaları arasında .nuxt/ ve node_modules/ klasörlerini önbelleğe alın. Vercel ve Netlify'da bu işlem otomatiktir.

Performans Sınaması

Dağıtımdan sonra Lighthouse'u localhost yerine dağıtılmış URL üzerinde çalıştırın. Gerçek CDN, gerçek uç konumları ve gerçek CPU kısıtlaması kullanın.

Hızlı Kontrol

Netlify veya Cloudflare Pages gibi bir CDN'e dağıtılmak üzere tüm rotaları statik HTML olarak önceden oluşturan Nuxt 3 komutu hangisidir?

İnteraktif derste cevapla

Özet: Nuxt Dağıtımı

nuxt generate → statik ( .output/public dağıtılır). nuxt build → SSR (Node ile dağıtılır). Nitro ön ayarları Cloudflare, Vercel, Netlify, AWS ve diğerlerini hedefler. Hibrit oluşturma için routeRules (rota bazında prerender, isr, ssr, spa). Ortam değişkenleri için runtimeConfig (public istemciye açıktır). Lighthouse ile dağıtılmış URL üzerinde sınama yapın.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 41
Dersler: 163

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Dağıtım: Statik ve SSR Karşılaştırması” dersi ücretsiz mi?

Evet — “Dağıtım: Statik ve SSR Karşılaştırması” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Dağıtım: Statik ve SSR Karşılaştırması” dersinde ne öğreneceğim?

nuxt generate ile tamamen statik bir site oluşturmayı, bir SSR uygulamasını Node sunucusuna veya kenar çalışma zamanına dağıtmayı ve Nuxt nitro altyapısını yapılandırmayı öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Dağıtım: Statik ve SSR Karşılaştırması” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Dosya Tabanlı Yönlendirme ve Otomatik İçe Aktarmalar
useFetch ve useAsyncData
Nuxt Modülleri: Görsel, Kimlik Doğrulama ve i18n
Dağıtım: Statik ve SSR Karşılaştırması

← Frontend Academy Sayfasına Dön