Nuxt Nedir? Vue Üstünde SSR, SEO ve Ne Zaman Gerekir

Nuxt nedir ve ne işe yarar?

Nuxt, Vue.js üzerine kurulu açık kaynaklı bir web uygulama çatısıdır. Vue'nun bileşen mantığına sunucuda render, dosya tabanlı yönlendirme, veri çekme ve meta etiket yönetimi gibi hazır parçalar ekler. Böylece hem hızlı açılan hem arama motorlarının rahat okuduğu siteler kurarsınız.

Biz dijital pazarlama ve web ekibiyiz, hosting firması değiliz. Bu yazıda Nuxt nedir sorusunu pazarlama, SEO ve proje karar tarafından cevaplıyoruz; teknik ayrıntıları resmi Nuxt ve Google dokümanlarına dayandırıyoruz.

Peki neden önemli? Çünkü saf bir Vue uygulaması tarayıcıda çalışır ve ilk HTML neredeyse boş gelir. Nuxt ise sayfayı sunucuda hazırlayıp dolu HTML gönderebilir. Ayrıca aynı projede bazı sayfaları önceden üretebilir, bazılarını önbelleğe alabilirsiniz.

Vue ile Nuxt arasındaki fark nedir?

Vue bir arayüz kütüphanesidir; Nuxt ise Vue'yu tam bir site iskeletine dönüştüren üst katmandır. Vue'yu baştan anlatmayacağız, çünkü bunu serideki Vue.js yazısında ele alıyoruz. Burada yalnızca iki katmanın iş bölümüne bakıyoruz. Nuxt nedir diye arayanların çoğu, aslında bu iş bölümünü merak eder.

Vue tek başına bileşenleri ve reaktif durumu yönetir. Yönlendirme, sunucuda render ve meta etiket gibi konuları ise ayrı kütüphanelerle çözersiniz. Nuxt bu seçimleri sizin yerinize paketler. Bu nedenle ekip içinde "hangi eklentiyi seçelim" tartışması kısalır.

Bir başka fark, proje yapısındadır. Nuxt'ta bileşenler, sayfalar, düzenler ve ortak fonksiyonlar için bilinen klasörler vardır. Böylece yeni bir yazılımcı projeye girdiğinde dosyaları nerede arayacağını hemen bilir. Büyüyen ekiplerde bu düzen, tek tek küçük kararların yarattığı dağınıklığı önler.

Yani Nuxt, Vue'nun rakibi değildir. Vue'yu kullanmaya devam edersiniz, ama etrafındaki altyapı kararlarını Nuxt'a bırakırsınız.

Nuxt nedir, SEO açısından neden önemlidir?

Nuxt'ın SEO değeri, tarayıcıya ve arama botuna içeriği hazır HTML olarak sunabilmesinden gelir. İlk yanıtta başlığı, açıklamayı, ana metni ve iç bağlantıları görürsünüz. Bot, sayfayı anlamak için JavaScript'in çalışmasını beklemek zorunda kalmaz.

Bu bir sıralama garantisi değildir. SEO'da içerik kalitesi, bağlantı yapısı ve teknik sağlık birlikte çalışır. Örneğin kötü yazılmış bir sayfa sunucuda render edildi diye üst sıraya çıkmaz. Ancak teknik zemin sağlamsa içeriğiniz daha az engelle karşılaşır.

Öte yandan arama motorları yalnızca Google değildir. Bazı botlar JavaScript çalıştırmakta sınırlıdır ve sosyal ağların paylaşım önizlemeleri de çoğunlukla ilk HTML'e bakar. Dolu HTML bu yüzden paylaşım görünümünü de olumlu etkiler.

Ayrıca Nuxt, her rota için ayrı title ve description tanımlamayı kolaylaştırır. Kurumsal sitelerde sık gördüğümüz sorun, tüm sayfalarda aynı başlığın kalmasıdır. Nuxt'ta bunu sayfa bazında çözmek birkaç satırlık iştir.

Google JavaScript ile üretilen sayfaları nasıl işler?

Google Search Central'a göre işlem üç aşamalıdır: tarama, render ve dizine ekleme. Googlebot önce URL'yi çeker, robots.txt kurallarına bakar ve HTML içindeki href bağlantılarını ayrıştırır. Ardından 200 durum koduyla dönen sayfalar render kuyruğuna girer.

Render aşamasında başsız bir Chromium JavaScript'i çalıştırır. Google, görünen son HTML'yi dizine ekler. Dokümana göre sayfa bu kuyrukta birkaç saniye bekleyebilir, ama daha uzun da sürebilir.

Aynı dokümanda şu görüş yer alır: sunucuda render veya önceden render, hem kullanıcılar hem tarayıcı botlar için sitenizi hızlandırdığı için hâlâ iyi bir fikirdir. Üstelik her bot JavaScript çalıştıramaz. Dolayısıyla içeriğin kritik kısmını ilk HTML'e koymak güvenli yoldur.

Kaynak olarak Google'ın JavaScript SEO temelleri sayfasını okumanızı öneririz.

Nuxt hangi render modlarını sunar?

Resmi dokümanda dört ana yaklaşım yer alır. Nuxt nedir sorusunun teknik cevabı büyük ölçüde bu modlarda saklıdır. Her biri farklı bir ihtiyaca cevap verir. Bu yüzden önce sitenizin içeriğinin ne sıklıkla değiştiğine bakmanız gerekir.

• Evrensel render (SSR): Varsayılan moddur. Sunucu Vue kodunu çalıştırır, dolu HTML döner, tarayıcıda hydration ile sayfa etkileşimli hâle gelir.
• İstemci tarafı render (SPA): nuxt.config içinde ssr: false yazarsınız. İçerik tarayıcıda oluşur.
• Hibrit render: routeRules ile rota bazında farklı kural verirsiniz.
• Önceden üretim: nuxt generate veya nuxt build --prerender ile statik HTML dosyaları üretirsiniz.

Dokümandaki önemli bir uyarı şudur: nuxt generate kullanırken hibrit render mevcut değildir. Ayrıca uç sunucuda (edge) render seçeneği de vardır, ancak bunun için Cloudflare Pages, Vercel veya Netlify gibi uyumlu bir platform gerekir.

Seçimi kolaylaştıran basit bir yaklaşım şudur. İçeriği nadiren değişen sayfalar için önceden üretimi, sık güncellenen sayfalar için SSR veya önbellekli yanıtı, girişli alanlar için ise istemci tarafı render'ı düşünün. Böylece her rota kendi ihtiyacına göre çalışır.

Ayrıntı için Nuxt render modları sayfasına bakabilirsiniz.

Hydration nedir ve SEO ile performansı nasıl etkiler?

Nuxt nedir sorusunu anlamak için hydration kavramını bilmek gerekir. Hydration, sunucudan gelen statik HTML'in tarayıcıda Vue tarafından devralınması sürecidir. Nuxt dokümanı bunu, JavaScript'in belgenin kontrolünü alması diye anlatır. Kullanıcı sayfayı hemen görür, ama bileşenler etkileşimli hâle gelmek için JavaScript'in inmesini ve çalışmasını bekler.

Bu iki adımlı yapı bir fırsat ve bir risk taşır. Fırsat, içeriğin erken görünmesidir. Risk ise sunucuda üretilen çıktı ile tarayıcıda üretilen çıktının birbirinden farklı olmasıdır. Örneğin sayfaya rastgele bir sayı ya da anlık saat yazarsanız iki çıktı uyuşmaz ve Vue bir uyuşmazlık uyarısı verir.

Pratik sonuç şudur: sunucuda ve tarayıcıda aynı sonucu üretmeyen bölümleri ayırın. Bunun için Nuxt'ta ClientOnly bileşenini kullanırsınız. Ancak bu bileşenin içindeki metin ilk HTML'de yer almaz. Dolayısıyla arama motorunun görmesini istediğiniz hiçbir önemli metni oraya koymayın.

Ayrıca hydration yükünü azaltmanın en güvenli yolu, sayfadaki gereksiz bileşenleri ve paketleri azaltmaktır. Bu nedenle önce neyi gerçekten etkileşimli yapmanız gerektiğini listeleyin.

Hibrit render ve routeRules nasıl çalışır?

Hibrit render, tek bir projede rota bazında farklı davranış tanımlamanızı sağlar. Örneğin kampanya sayfasını build sırasında üretir, blog listesini önbellekten sunar, müşteri panelini yalnızca tarayıcıda çalıştırırsınız.

Dokümanda şu seçenekler geçer: prerender build sırasında rotayı üretir, swr yanıta önbellek başlıkları ekler, isr benzer mantığı CDN önbelleği için uygular, ssr: false ise rotayı yalnızca istemcide çalıştırır.

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

Bu örnek, mantığı göstermek için hazırlanmış kurgusal bir yapılandırmadır. Süre değerini ve rota adlarını kendi projenize göre ayarlayın; swr sayısını önbellek süresi olarak kullanırken Nitro dokümanını da kontrol edin.

Öte yandan hibrit kural arttıkça test yükü de artar. Bu nedenle her rotaya ayrı kural yazmak yerine, önce üç grup tanımlayın: sabit sayfalar, sık değişen sayfalar ve girişli alan.

Nuxt'ta dosya tabanlı yönlendirme nasıl çalışır?

Nuxt'ta pages klasörüne koyduğunuz her Vue dosyası bir rota olur. Ayrı bir rota tablosu yazmazsınız. Sayfalar isteğe bağlıdır; app.vue kullanıyorsanız mevcut sayfayı göstermek için NuxtPage bileşenini eklemeniz gerekir.

Köşeli parantezler dinamik parametre üretir. Dokümandaki örnek pages/users-[group]/[id].vue yapısıdır ve parametrelere $route.params ile ulaşırsınız. Çift parantez, parametreyi isteğe bağlı yapar. [...slug].vue ise tüm alt yolları yakalar.

• pages/index.vue: Ana sayfa rotasını üretir.
• pages/blog/[slug].vue: Her yazı için dinamik bir rota açar.
• pages/[...slug].vue: Tanımsız yolları tek yerde karşılar.

Bu yapı, SEO tarafında okunabilir URL üretmeyi kolaylaştırır. Dosya adlarını Türkçe karakter içermeyen, küçük harfli ve tireli seçerseniz adresler de temiz olur. Ayrıca rota yapısını başta planlarsanız sonradan yönlendirme (redirect) yükünü azaltırsınız.

Gezinme için NuxtLink bileşeni ve navigateTo fonksiyonu vardır. SEO açısından önemli nokta şudur: NuxtLink gerçek bir bağlantı üretir, bu yüzden botlar href değerini izleyebilir.

Nuxt'ta veri çekmek: useFetch ve useAsyncData ne işe yarar?

Sunucuda render eden bir sitede veriyi doğru yöntemle çekmezseniz aynı istek iki kez gider. Nuxt dokümanı bunu açıkça anlatır: bileşende doğrudan $fetch kullanırsanız veri bir kez sunucuda, bir kez tarayıcıda çekilir.

useFetch bu sorunu çözer. Sunucuda yapılan isteğin sonucunu payload içinde istemciye taşır, böylece hydration sırasında yeniden istek atılmaz. useAsyncData ise daha ince kontrol sunar ve herhangi bir asenkron mantığı sarmalayabilir.

const { data: urunler } = await useFetch('/api/urunler')

Dokümana göre useFetch(url), useAsyncData(url, () => event.$fetch(url)) çağrısına yakındır. Yani çoğu durumda useFetch yeter. Üçüncü taraf bir sorgu katmanı kullanıyorsanız useAsyncData'ya geçersiniz.

Bir de önbellek ve hata durumları vardır. API yanıtı gecikirse sayfa da gecikir; çünkü sunucu HTML'i üretmek için veriyi bekler. Bu nedenle veri kaynağının hızını ve hata davranışını önceden test edin. Yavaş bir arka uç, en iyi render modunu bile yavaşlatır.

Bu bilgi yazılımcılar için pratiktir, yönetici için ise şu anlama gelir: veri çekme biçimi hem hız hem sunucu maliyeti üzerinde etki yapar.

Nuxt'ta title, description ve Open Graph nasıl yönetirsiniz?

Nuxt'ta head etiketlerini yönetmenin üç yolu vardır. İlki nuxt.config içindeki app.head ayarıdır. Bu yöntem sabit varsayılanlar için uygundur, ancak reaktif veri kabul etmez.

İkincisi useHead fonksiyonudur. Reaktif girdi alır, başlık şablonu ve gövde etiketi tanımlamanıza izin verir. Üçüncüsü useSeoMeta fonksiyonudur. SEO etiketleri için tip güvenliği sağlar; örneğin name ile property karıştırma hatasını azaltır.

useSeoMeta({
  title: 'Örnek Ürün Sayfası',
  description: 'Bu sayfanın kısa ve benzersiz açıklaması.',
  ogTitle: 'Örnek Ürün Sayfası',
  ogImage: 'https://example.com/ornek.png',
})

Üç yöntem de Unhead altyapısını kullanır. Bu arada yazdığınız başlık ve açıklamanın arama sonucunda nasıl görüneceğini önceden denemek için SERP önizleme aracımızı kullanabilirsiniz. Etiketleri elle yazmadan taslak üretmek isterseniz meta tag oluşturucuya bakın.

Başlık ve açıklama dışında kanonik adres, robots yönergesi ve yapılandırılmış veri de aynı mantıkla yönetirsiniz. Örneğin kanonik etiketi her rotada dinamik üretmezseniz, parametreli adresler kopya içerik riski doğurur. Yapılandırılmış veri için schema oluşturucumuzu kullanabilirsiniz.

Resmi anlatım için Nuxt SEO ve meta sayfası yeterlidir.

Nuxt nedir, performans ve Core Web Vitals'a ne katar?

Dolu HTML gelmesi, kullanıcının içeriği görme süresini kısaltabilir. Bu özellikle ana içeriğin büyük görsel veya başlık olduğu sayfalarda fark yaratır. Ancak Nuxt otomatik olarak hızlı site garantisi vermez.

Çünkü sunucuda render edilen sayfa tarayıcıda yine JavaScript indirir ve hydration yapar. Ağır bir bileşen kütüphanesi, kontrolsüz üçüncü taraf script veya devasa görseller sonucu bozar. Bu nedenle ölçüm şarttır.

• Önce gerçek kullanıcı verisine bakın; laboratuvar sonucu tek başına yeterli değildir.
• Ardından en büyük içerik öğesini ve etkileşim gecikmesini inceleyin.
• Son olarak üçüncü taraf scriptleri tek tek devre dışı bırakıp farkı ölçün.

Bir de görsellerden söz etmek gerekir. Büyük bir kapak görseli çoğu sayfada en büyük içerik öğesidir. Doğru boyutta, modern formatta ve gecikmeli yükleme olmadan sunmak, sunucuda render etmekten daha büyük kazanç getirebilir.

Ölçüt ve eşikler için Core Web Vitals yazımıza, JavaScript yükünün etkisi için JavaScript ve site hızı rehberimize göz atın.

Nuxt ile çok dilli site kurarken nelere dikkat edersiniz?

Çok dilli bir sitede her dilin kendi adresi olmalıdır. Aynı URL'de dil değiştiren bir yapı, arama motorlarının doğru sürümü dizine eklemesini zorlaştırır. Nuxt'ın dosya tabanlı rotaları bu düzeni kurmayı kolaylaştırır; örneğin her dil için ayrı bir klasör açabilirsiniz.

Ancak asıl iş rota üretmek değildir. Her dil sürümü için çeviri değil, o dilin arama alışkanlığına uygun başlık ve açıklama yazmanız gerekir. Ayrıca sürümleri birbirine hreflang ile bağlamak, Google'ın uluslararası sitelerde önerdiği yaklaşımdır.

• Her dil için ayrı, kalıcı ve okunabilir bir URL kullanın.
• Dil sürümlerini karşılıklı olarak hreflang ile işaretleyin.
• Başlık ve açıklamayı otomatik çeviriyle bırakmayın, elle uyarlayın.
• Site haritasında tüm dil sürümlerinin yer aldığını kontrol edin.

Konunun SEO tarafını çok dilli web sitesi SEO rehberimizde ayrıntılı anlatıyoruz. Eklenti seçimi ise proje ihtiyacına göre değişir; seçimden önce eklentinin güncel dokümanını okuyun.

Nuxt projesine nasıl başlarsınız?

Nuxt nedir öğrendikten sonra denemek için küçük bir proje açmak en iyi yoldur. Resmi kurulum sayfası başlangıç komutunu verir. Önce bilgisayarınızda Node.js'in dokümanın istediği sürümü olmalı; kesin sürüm gereksinimi zamanla değiştiği için güncel kararlı sürümü ve dokümandaki notu kontrol edin.

1. Terminalde proje oluşturun: npm create nuxt@latest ornek-site
2. Proje klasörüne girin ve bağımlılıkların kurulduğundan emin olun.
3. Geliştirme sunucusunu başlatın: npm run dev
4. Tarayıcıda localhost üzerindeki yerel adresi açın ve pages klasörüne ilk dosyanızı ekleyin.

Kurulum sayfasındaki komutta ek bir şablon bayrağı da yer alabilir. Bu bayrağı kopyalamadan önce güncel dokümana bakın, çünkü varsayılan şablon sürüm değiştikçe farklılaşabilir.

İlk günden üretim ayarlarını düşünmek de faydalıdır. Ortam değişkenlerini, gizli anahtarları ve API adreslerini koddan ayırın. Gerçek anahtarları depoya koymayın; örnek dosyalarda yalnızca example.com gibi örnek değerler kullanın.

Eski bir projeniz varsa sıfırdan başlamak yerine yalnızca yeni ve SEO değeri yüksek sayfaları Nuxt'a taşımayı da düşünebilirsiniz.

Nuxt ile e-ticaret sitesi kurmak mantıklı mı?

Bazı durumlarda mantıklıdır, ama her mağaza için doğru seçim değildir. Ürün listeleri, filtreler ve kampanya sayfaları arama trafiği getirir; bu sayfaların hızlı açılması ve ilk HTML'de dolu gelmesi değerlidir. Hibrit render tam burada işe yarar.

Ancak e-ticaret yalnızca ön yüzden ibaret değildir. Sepet, ödeme, stok, fatura ve iade akışları için sağlam bir arka uç gerekir. Hazır bir e-ticaret platformu bu parçaları size verir; Nuxt ile giderseniz bunları ya bir servisle bağlarsınız ya da kendiniz geliştirirsiniz.

Bu yüzden önce ürün sayısını, kampanya sıklığını ve ekip kapasitesini değerlendirin. Küçük bir mağazada hazır platform çoğu zaman daha az risk taşır. Büyük, özel akışlı bir katalogda ise ayrık ön yüz yaklaşımı esneklik kazandırabilir.

Sayfa hızının satışa etkisini e-ticarette sayfa hızı yazımızda, kategori ve ürün sayfası SEO'sunu e-ticaret SEO rehberimizde bulabilirsiniz.

Nuxt sitesini nasıl yayına alırsınız?

İki ana yol vardır: statik dosyalar veya çalışan bir Node sunucusu. Hangisini seçeceğiniz, hibrit render ihtiyacınıza bağlıdır. Dokümana göre nuxt generate statik üretim için, Node sunucu ön ayarı ise çalışır bir sunucu için kullanılır.

Node sunucu ön ayarıyla build aldığınızda hazır bir giriş noktası oluşur. Dokümandaki komut aşağıda; sunucu varsayılan olarak 3000 portunu dinler.

npx nuxt build
NODE_ENV=production node .output/server/index.mjs

Statik yöntemde çıktıyı ucuz bir statik hosting'e koyabilirsiniz. Sunucu yöntemi ise süreç yönetimi, sürüm güncelleme ve izleme gerektirir. Aynı serideki Node.js kurulumu ve PM2 yazılarında bu tarafı ayrıntılı anlatıyoruz.

Statik çıktının bir sınırı da vardır: içerik her değiştiğinde yeniden üretim gerekir. Sık güncellenen bir katalogda bu, bir yayın akışı kurmayı gerektirir. Sunucu tarafı render ise bu yükü ortadan kaldırır, ama çalışan bir sürecin sorumluluğunu getirir.

Seçim yaparken hosting seçim rehberimizi da okuyun. Ayrıca resmi Nuxt dağıtım sayfasında ön ayarların tam listesi yer alır.

Nuxt'ı ne zaman seçmelisiniz?

Nuxt, içerik ve etkileşimi bir arada isteyen projelerde anlamlıdır. Özellikle Vue bilen bir ekibiniz varsa geçiş maliyeti düşer. Ancak karar yalnızca teknolojiden değil, işten de gelmelidir.

• Organik trafik hedefleyen ve çok sayıda dinamik sayfası olan bir katalog ya da içerik sitesi kuruyorsanız.
• Aynı projede hem herkese açık sayfalar hem girişli bir panel gerekiyorsa.
• Headless CMS ile içerik yönetimini ayırıp ön yüzü özgürce tasarlamak istiyorsanız.
• Ekibiniz zaten Vue ile çalışıyorsa ve ortak bir proje yapısı arıyorsanız.

Bir başka ölçüt de içerik ekibinin çalışma biçimidir. Editörler görsel bir panelde çalışmayı seviyorsa, Nuxt'ı bir headless CMS ile eşleştirmeniz gerekir. Aksi hâlde her metin değişikliği yazılımcıya gider ve süreç yavaşlar.

Headless yaklaşımın artı ve eksilerini headless CMS yazımızda ele alıyoruz. Özel geliştirme ihtiyacınız varsa özel yazılım geliştirme hizmetimiz bu tür projeleri kapsar.

Nuxt sitesinde bakım yükünü nasıl planlarsınız?

Bir Nuxt sitesi yayına çıktığında iş bitmez. Paketler yeni sürüm alır, Node sürümü eskir, güvenlik yaması gelir. Bu döngüyü yönetecek kişiyi proje başında belirlemezseniz site zamanla kırılgan hâle gelir.

Biz hosting işletmediğimiz için sunucu tarafındaki ayrıntıları sağlayıcınızın ve resmi dokümanların kılavuzuna bırakıyoruz. Yine de proje sahibi olarak şu soruların cevabını bilmelisiniz.

• Güncellemeleri kim, hangi sıklıkla ve hangi test sürecinden geçirerek yapacak?
• Bir hata olduğunda sitenin önceki sürümüne nasıl döneceksiniz?
• Yedekleriniz nerede duruyor ve geri yüklemeyi denediniz mi?
• Kesinti olursa kime, hangi kanaldan ulaşacaksınız?

Bu soruların cevabı yoksa statik çıktı veya yönetilen bir platform daha güvenli bir başlangıçtır. Çünkü bakmanız gereken parça sayısı düşer.

Nuxt nedir, ne zaman gereksiz olur?

Nuxt nedir sorusunun dürüst cevabı, aynı zamanda bir sınır da çizer: her site Nuxt gerektirmez. Beş sayfalık bir tanıtım sitesi, standart bir blog veya basit bir kurumsal vitrin için olgun bir CMS çoğu zaman daha ucuz ve daha az bakım isteyen çözümdür.

Üstelik Nuxt'ı sürdürmek için Node tabanlı bir yapıya, sürüm güncellemelerini takip edecek birine ve dağıtım disiplinine ihtiyaç duyarsınız. Bu emek, sitenizin getirisiyle dengelenmiyorsa gereksiz karmaşıklık yaratır.

• İçeriği haftada bir değişen küçük bir vitrin sitesi.
• Ekibinde JavaScript bilen kimsenin olmadığı bir proje.
• Yalnızca bir blog ve birkaç form gerektiren bir kurulum.
• Bütçesi bakım ve güncelleme için ayrılmamış bir iş.

Küçük işletmeler için asıl risk, teknolojinin kendisi değil, onu sürdürecek kişinin yokluğudur. Bir yazılımcı projeden ayrıldığında Nuxt sitesi sahipsiz kalabilir. Hazır bir CMS ise daha geniş bir kullanıcı ve hizmet havuzuna sahiptir; dolayısıyla devir teslim daha kolay olur.

Karar verirken WordPress mi, özel kodlama mı yazımızdaki ölçütleri de kullanabilirsiniz.

Nuxt mu, Next.js mi, WordPress mi seçmelisiniz?

Üç seçenek farklı ekiplere hitap eder. Nuxt Vue ile, Next.js React ile çalışır; WordPress ise hazır bir içerik yönetim sistemidir. Next.js'in sunucuya nasıl kurulacağını seride ayrı bir yazıda anlatıyoruz, burada tekrar etmiyoruz.

Karar verirken şu soruyu sorun: içerik ekibim yazılımcıya bağımlı kalmadan yayın yapabilecek mi? Cevap hayırsa, tablodaki bakım yükü satırı sizin için en önemli satırdır.

Tablo genel bir çerçevedir, mutlak bir sıralama değildir. React tarafını kıyaslamak için React ile Angular karşılaştırmamıza bakabilirsiniz.

Nuxt sitelerinde en sık görülen SEO hataları nelerdir?

Teknik altyapı doğru olsa bile uygulama hataları sonucu bozar. Aşağıdaki liste, JavaScript tabanlı sitelerde genel olarak sık karşılaşılan sorunları özetler; bunlar Nuxt'a özgü değildir ama Nuxt projelerinde de kolayca oluşur.

• Tüm rotalarda aynı title ve description kalması.
• Önemli içeriğin yalnızca tıklamayla ya da kaydırmayla yüklenen bileşenlerde olması.
• Bağlantıların href içermeyen tıklama olaylarıyla kurulması.
• Girişli alanın yanlışlıkla taranabilir bırakılması veya tarama kurallarının fazla geniş yazılması.
• Site haritasının yeni rotalarla güncellenmemesi.

Bu listedeki maddeler basit görünür, ama canlıya çıkmadan önce kontrol etmezseniz aylarca fark etmeyebilirsiniz. Örneğin yeni bir kategori ekleyip rotayı çalıştırırsınız, ama site haritasına eklemeyi unutursunuz. Sonuçta sayfa dizine geç girer veya hiç girmez.

Bu hataları yakalamak için önce site haritası aracımızla rota listesini çıkarın, ardından robots.txt oluşturucuyla kuralları sade tutun. Kapsamlı bir kontrol listesi için teknik SEO yazımızı okuyun.

Kendiniz mi kurmalısınız, hosting sağlayıcısına mı bırakmalısınız?

Burada net bir sınır koyuyoruz. Kendi VPS'inizi yönetmek istiyorsanız ve temel Linux, Node ve güvenlik bilginiz varsa komutları adım adım uygulayabilirsiniz. Ancak bu bilgiye sahip değilseniz sunucu işini hosting sağlayıcısına bırakın.

Çünkü açık bir port, güncellenmemiş bir paket veya yanlış izinler sitenizi riske atar. Biz hosting işletmiyoruz; sunucu güvenliği, yedekleme ve izleme konusunda yetkili kaynak sağlayıcınızın kendi dokümanıdır.

• Yönetilen bir platform veya statik hosting, işletme yükünü azaltır.
• Kendi VPS'iniz size kontrol verir, ama sorumluluğu da size yükler.
• Şüphede kalırsanız sağlayıcının destek ekibine sorun, tahmin yürütmeyin.

Yedekleme tarafını yedekleme stratejisi yazımızda bulabilirsiniz.

Nuxt projesine başlamadan önce kontrol listesi nedir?

Nuxt nedir sorusuna cevap verdikten sonra sıra karar vermeye gelir. Teknoloji seçmeden önce işin hedefini yazıya dökün. Aşağıdaki sıra, kararı sağlamlaştırmak için kullandığımız basit bir çerçevedir ve herhangi bir garanti sunmaz.

1. Sitenin ana hedefini ve hedef sayfa türlerini belirleyin.
2. İçeriğin ne sıklıkla değiştiğini yazın; buna göre render modunu seçin.
3. İçerik yönetimini kimin yapacağını netleştirin.
4. Dağıtım yöntemini ve bakım sorumlusunu seçin.
5. Her rota için benzersiz title, description ve kanonik adres planlayın.
6. Canlıya almadan önce hız, tarama ve dizine ekleme kontrollerini çalıştırın.

Bu sürece ihtiyaç duyuyorsanız web tasarım hizmetimiz ve SEO danışmanlığı hizmetimiz teknik karar, içerik ve ölçümü birlikte ele alır.

Bu listeyi proje başında bir toplantıda birlikte doldurmanızı öneririz. Çünkü teknoloji kararlarının çoğu, cevapsız kalan iş sorularının gecikmeli sonucudur. Hedef netleşince render modunu, dağıtım yöntemini ve ekip ihtiyacını rahatça görürsünüz.

Özetle Nuxt güçlü bir araçtır, ama her sitenin ihtiyacı değildir. Önce hedefinizi, ekibinizi ve bakım bütçenizi netleştirin; ardından render modunu seçin.