Merhabalar sevgili Labters takipçileri, bu yazıda son zamanlarda oldukça revaçta olan Vue frameworku ve ondan bazı eksikliklerini gidermek için türeyen Nuxt’a değineceğiz 🙂
Vue gibi JavaScript frameworkleri sitenizde gezen misafirlerinize harika bir kullanıcı deneyimi sunabilir. Özellikle sunucuya her seferinde bir istek göndermek zorunda kalmadan sayfa içeriğini dinamik olarak değiştirmesi tercih etmek için gayet başlı başına yeterli bir sebep zaten.
Örneğin, Hakkımızda sayfası gibi nadiren değişen bir sayfanın, kullanıcının her istediği zaman yeniden oluşturulması gerekmez. Sunucu bir kez oluşturabilir ve sonra önbelleğe alıp ileride kullanmak üzere bir yerde saklayabilir. Bu tür hız iyileştirmeleri önemsiz görünebilir, ancak sitelerin yanıt sürelerinin milisaniye (veya daha az) olarak ölçüldüğü bir ortamda her salise önemlidir.
Nuxt.js Nedir ?
Nuxt.js geliştiricileri React için oluşturulan Next frameworkünden ilham alıp, Vue.js için Next.js kullanarak Nuxt.js adında yeni bir framework duyurdular. React + Next kombinasyonunu bilenler, yapısında ve düzeninde bir dizi benzerlik tespit edecekler. Nuxt.js’in olayı, yazdığımız kullanıcı arayüzünün server tarafında oluşturmaktır. Daha keyifli bir Vue.js projesi geliştirmenizi sağlamak için gereken tüm ayarları önceden ayarlamakta.
Neden Nuxt.js ?
Bildiğiniz üzere React, Angular, Vue gibi çatıları kullanarak geliştirdiğimiz uygulamalar, client tarafında render ediliyor. Bunun bir takım avantajları ve dezavantajları bulunuyor. Bunlardan en önemlisi arama motorlarının kaynak kodumuzu, okuyamadığı durumlar oluyor.
Google her ne kadar bu konuda detaylı bir makale yayınlamış olsa da, geçmişte yaşanılan deneyimler, indexlenme konusunda sıkıntılar olduğunu ortaya koydu. Aynı zamanda geleneksel metodlarda olduğu gibi server’da render yapmanın, ilk açılış hızına artısı büyük.
Nuxt.js, bir framework olarak, client tarafı ile server tarafı arasındaki Asynchronous Data, Middleware, Layouts vb. gibi gelişmelerinizde, size yardımcı olacak bir çok özellik ile birlikte geliyor. Bu özellikler Vue.js framework’ünde hazır bulunmazken, Nuxt sayesinde gelmektedir.
Nuxt.js Neler İçeriyor ?
- Vue 2
- Vue-Router
- Vuex (included only when using the store option)
- Vue-Meta
Vue Core ve Vue-Router versiyonlarını değiştirmemenizi tavsiye ederiz. Vue her major versiyon değişimlerinde, ona uyumlu Nuxt.js dağıtımı çıkartılacak.
Çalışma Mantığı
Client tarafından isteğin gelmesiyle, görselde gözüken aşamalar çalışıyor. Aynı zamanda <nuxt-link>
üzerinden sayfalar arası geçiş olduğunda da, bu yöntem çalışıyor. Vue.js’in kendisinden bildiğimiz, <router-link>
etiketinden farkı yok. Vue-router eklentisinde bulunan metodları kullanıyoruz.
Server Rendering nuxt dökümanında okuyacağınız üzere pages klasöründe bulunan template dosyalarında çalıştırılıyor. Burada en önemli konu router path’leriniz otomatik olarak oluşturuluyor. Sizin pages klasör yapınızın içerisinde ki dizilime göre router linkleri oluşturuluyor. İlgili dökümantasyon bağlantısını okuduğunuzda ne kadar kolay ve iş görür olduğunu anlayacaksınız 🙂
Deployment işlemleri ise çok kolay. npm run build
komutu ile uygulamanızı hazır ettikten sonra, npm start
komutu ile uygulamanızı ayağa kaldırabiliyorsunuz. Node uygulamasını forever veya alternatifi bir modülü kullanarak ayağa kaldırmanız çalışması açısından daha sağlıklı olacaktır. forever start -c "npm start" ./
komutunu dizininizde çalıştırdıktan sonra uygulamanız production ortamında hazır olacaktır.
Uygulama da güncelleme yaptıysanız, tekrar build etmelisiniz. Ardından çalışan node servisine restart atmanız gerekecek. ps aux | grep node
diyerek çalışan processi bulup, kill ettikten sonra, tekrar uygulamayı başlatabilirsiniz.
Nuxt.config.js?
Geliştireceğimiz uygulamanın Environment Configuration dediğimiz ayarlarını bu dosyadan yapıyoruz. Global olarak yükleyeceğiniz css dosyalarını, extend edeceğiniz router ayarlarını, plugin ayarlarını, Vue-Meta eklentisi ile meta kodlarının ayarlanmasını hep buradan yapmaktayız.
Routing
Yukarıda router endpointlerinin otomatik oluştuğundan bahsetmiştik. Örneklerine bakarsanız, ne kadar kolay olduğunu anlayacaksınız.
Burada anlamayacağınız bir husus olabilir. Sizin bu sayfada görmüş olduğunuz routing konfigrasyonu, pages klasöründe oluşturduğunuz dizin yapısına göre otomatik olarak oluşturuluyor. Sizin router endpointleri için, kod yazmanıza gerek kalmıyor.
View
/pages klasörü içerisinde view katmanımız bulunuyor. data
ve fetch
metodları ile tüm işinizi görüyorsunuz, ama farklarına dikkat etmekte fayda var.
data
metodu, component’i yüklemeden önce, her zaman veriyi çağırır (yalnızca pages componentleri için). Sunucu tarafında veya ilgili rotaya gitmeden önce kulanılabilir. Bu yöntem, verileri getirip, component verilerini, döndürmek için kullanabilirsiniz.
fetch
metodu, eğer kullanıldıysa, component’i yüklemeden önce her defasında datayı çağırır (yalnızca pages componentleri için). Sunucu tarafında veya ilgili rotaya gitmeden önce çağırılabilir. Verilerinizi getirip, state’lerinizi barındırdığınız, store katmanını doldurmak için bunu kullanabilirsiniz. Dispatch, Commit işlemlerini burada yapıyoruz. Fetch yöntemini eşzamansız yapmak için, Promise kullanmalısınız. Component’i sunmadan önce, datanın çözülmesini bekleyecektir.
Assets
Nuxt, tahmin ettiğiniz üzere Webpack ile çalışıyor. vue-loader, file-loader ve url-loader modülleri bulunuyormuş içerisinde. Siz herhangi bir webpack modülü kullanmak isterseniz, bu sayfadan yardım alabilirsiniz. Bu işlemler yine nuxt.config
dosyası üzerinden yapılıyor.
Plugins
Plugins özelliği ise Vue.js eklentilerini veya harici kütüphaneleri kullanabilmek için geliştirilmiş bir özellik.
Sayfasında, axios’un vendor olarak nasıl ekleneceğini anlatmışlar. Vue eklentilerinin nasıl yüklendiğine dair bir açıklama da var. Fakat buradaki Client-side only kısmında dikkat etmenizde fayda var. Kullanacağınız eklenti/kütüphane sadece client tarafında çalışıyor olabilir. Sonra window is not defined
diye sık sık error alabilirsiniz.
Bu konuda tavsiyemiz, 3.parti kütüphaneleri vendor olarak eklemenizdir. Eğer jQuery eklentisi kullanmak gibi bir hataya düşüyorsanız (dom işlemlerini vue ile halletmeniz daha iyi olur), vendor olarak ekledikten sonra, plugini Directive haline getirip kullanmanızı tavsiye ederiz. Ama yine de kullanmak pek mantıklı değil.
UI Frameworkleri ile gelen, modal, tab gibi temel UI elemanlarının class ekleyip çıkartan basit eventlerini, metod yazarak çalıştırabilirsiniz.
Kapanış
Projenin, Roadmap sayfasını takip etmenizde fayda görüyoruz.
Google herşeyi indexlemiş durumda. Daha önce karşılaştığımız, index alıp içeriklerin görünmemesi gibi problemlerle karşılaşmadık.
Bir projemizde WordPress apilerinden çektiğimiz verilere yoast seo eklentisinin değerlerini de dahil ederek head içine entegre edip gayet güzel çalıştığını da deneyimledik. Özellikle SEO konusunda gönlünüz rahat bir şekilde kullanabilirsiniz 🙂
Kaynaklar;
https://www.toptal.com/vue-js/server-side-rendered-vue-js-using-nuxt-js