Vue Academy · Ders

SSR ve SSG ile SPA Modu

ssr:true/false, Nitro ön oluşturma, generate komutu ve route başına hibrit işleme.

4. ders / 413 adım

SSR ve SSG ile SPA Modu, CoddyKit'te ücretsiz bir Vue 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, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Oluşturma Modlarına Genel Bakış

Nuxt, uygulamanızı üç şekilde oluşturabilir: SSR (sunucu her isteği oluşturur), SSG (sayfalar derleme zamanında önceden oluşturulur) ve SPA (her şey tarayıcıda oluşturulur). Bunları rota bazında birbirine de karıştırabilirsiniz.

SSR: Varsayılan Mod

ssr: true ile (varsayılan değer), sunucu her istek için HTML oluşturur ve istemci bu HTML'yi etkileşimli hâle getirir. Bu yaklaşım, hızlı bir ilk görüntüleme ve iyi SEO sağlar; çünkü tarayıcılar tüm işaretlemeyi görür.

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

SSR'nin Öne Çıktığı Durumlar

SSR, sık değişen veya kişiselleştirilmiş içerikler için uygundur — gösterge panoları, akışlar ve canlı fiyatlı e-ticaret sayfaları gibi. Bu tür içeriklerde her istekte güncel HTML istersiniz.

SPA Modu

ssr: false ayarı, Nuxt'ı tek sayfalı bir uygulamaya dönüştürür: sunucu boş bir kabuk gönderir ve tarayıcı her şeyi oluşturur. Barındırması daha basittir; ancak SEO daha zayıf, ilk görüntüleme daha yavaştır.

export default defineNuxtConfig({
  ssr: false
})

SPA'nın Uygun Olduğu Durumlar

SPA modu, SEO'nun önemli olmadığı ve uygulamayı herhangi bir CDN'ye statik dosyalar olarak dağıtmak istediğiniz dahili araçlar ile oturum açma arkasındaki uygulamalar için uygundur.

SSG: Statik Site Oluşturma

nuxt generate çalıştırıldığında her sayfa derleme zamanında statik HTML olarak önceden oluşturulur. Sonuç, Node sunucusu olmadan herhangi bir yerde barındırabileceğiniz bir dosya klasörüdür.

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

SSG'nin Uygun Olduğu Durumlar

SSG, nadiren değişen içerikler için idealdir — bloglar, belgeler ve tanıtım siteleri gibi. Sayfalar son derece hızlıdır ve bir CDN'den sunulmaları düşük maliyetlidir.

routeRules ile Rota Bazında Oluşturma

routeRules yapılandırması, yol kalıbına göre oluşturma modunu ayarlar. Buna karma oluşturma denir: tek bir uygulamanın farklı bölümleri farklı stratejiler kullanır.

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

Yaygın routeRules Seçenekleri

prerender: true sayfayı derleme zamanında hazırlar; ssr: false sayfayı SPA'ya dönüştürür; swr: n, SSR sonucunu n saniye boyunca önbelleğe alır (bayat içeriği sunarken yeniden doğrulama); redirect kullanıcıları başka bir yere gönderir.

Artımlı Statik Yeniden Oluşturma

isr seçeneği, ilk istekte sayfayı önceden oluşturur ve çıktıyı önbelleğe alarak belirli aralıklarla yeniden oluşturur. Bu yöntem, popüler sayfalar için SSG hızını SSR'nin güncelliğiyle birleştirir.

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

Bir Strateji Seçme

SEO ve etkileşimin en iyi birleşimini sağlayan varsayılan seçenek olarak SSR ile başlayın. Statik içerikler için SSG, özel uygulamalar için SPA kullanın; performans gereksinimleri ortaya çıktıkça tek tek rotaları hassas biçimde ayarlamak için routeRules'tan yararlanın.

Hızlı Kontrol

Oluşturma modları konusundaki bilginizi sınayın.

İnteraktif derste cevapla

Özet

Oluşturma modlarını öğrendiniz:

SSR (varsayılan), istek başına oluşturma yapar: iyi SEO ve hızlı ilk görüntüleme sağlar.
ssr:false, özel uygulamalar için bir SPA sağlar.
nuxt generate, statik bir SSG sitesi oluşturur.
routeRules, karma oluşturmayı etkinleştirir: rota başına prerender, swr, isr ve ssr:false kullanılabilir.

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: 42
Dersler: 156

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

Sıkça Sorulan Sorular

“SSR ve SSG ile SPA Modu” dersi ücretsiz mi?

Evet — “SSR ve SSG ile SPA Modu” 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 Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“SSR ve SSG ile SPA Modu” dersinde ne öğreneceğim?

ssr:true/false, Nitro ön oluşturma, generate komutu ve route başına hibrit işleme. Vue 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.

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

Önceden deneyim gerekmez. CoddyKit'te Vue 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.

“SSR ve SSG ile SPA Modu” 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 Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue 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

Nuxt 3 Proje Yapısı ve Dosya Tabanlı Yönlendirme
Veri Çekme: useFetch ve useAsyncData
Nuxt Sunucu Route'ları ve API Uç Noktaları
SSR ve SSG ile SPA Modu

← Vue Academy Sayfasına Dön