25 Ekim 2016’da zeit.co’nun arkasındaki ekip, server tarafından oluşturulan React uygulamaları için bir kütüphane olan Next.js’i duyurdu. Nuxt.js geliştiricileri ise bundan ilham alıp, Vue.js için Next.js kullanarak Nuxt.js adında yeni bir framework duyurdular.

Nuxt.js Nedir?

Nuxt.js, Universal Vue.js uygulamaları oluşturmak için kullanılan bir framework’tür. Universal Javascript uygulamalarının, ne olduğu konusuna bir sonraki başlıkta değineceğiz.

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şadığımız 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.

Tabi bunun Universal App geliştirme dışarında, başka çözümleri de var. headless browser , pre-rendering gibi terimleri aratırsanız ne tür yöntemler olduğunu öğrenebilirsiniz.

Nuxt.js’in olayı, yazdığımız kullanıcı arayüzünün server tarafında oluşturmaktır.

Nuxt.js, daha keyifli bir Vue.js Uygulama Sunucusu geliştirmenizi sağlamak için gereken tüm ayarları önceden ayarlamakta.

Ek olarak, başka bir dağıtım seçeneği de sunuyor: nuxt generate.

Bu özellik, Statik üretilmiş bir Vue.js Uygulaması oluşturuyor.

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 paketi şunları iç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 ederim. Vue her major versiyon değişimlerinde, ona uyumlu Nuxt.js dağıtımı çıkartılacak.

Universal JavaScript Nedir?

Universal terimi, aynı kodu server, tarayıcılar, mobil cihazlar ve başka herhangi bir platformda çalıştırma kabiliyeti anlamına gelir.

En basit haliyle, Client tarafında yazdığımız kodun, Sunucu tarafında işlenerek sunulması diyebiliriz. Başlı başına bir blog yazısı olacağı için, burada çok fazla detayına girmeyeceğim. Belki bununla ilgili bir yazı yazabilirim.

Client’ın istek yapmasıyla birlikte, arkada çalışan bir node server’ın, uygulamanızın router ve state’lerini takip edip aldıktan sonra, template’i server’da render edip, browser’a göndermesinden ibaret bir işlem. Nuxt.js ise bunu normalden, daha kolay yapmamızı sağlayan iyi bir framework.

Mehmetcan Gayberi, bu konuda çok güzel bir yazı yazmış. Kesinlikle okumanızı tavsiye ediyorum.

Çalışma Mantığı

Client tarafından request’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 🙂 Buna aşağıda da değindiğimi belirtmek isterim.

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ştim. Ö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. Bunların farklarına bir sonraki yazımda, uygulamalı olarak değineceğim için, şimdilik detaylı olarak değinmiyorum.

Not: Şerafettin Yarar, bu konuya değinmem gerektiği konusunda, geri bildirimde bulundu. Yazıyı güncelleyip, data ve fetch metodlarının ne amaçla kullandıklarını anlattım.

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 tavsiyem, 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 ederim. 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 etmekte fayda görüyorum.

Proje bence Production’a hazır bir durumda. Hiçbir sıkıntı yaşamadım. Yaşadıklarımda da komüniteden hızlıca destek alabildim. Dökümantasyonu iyice okursanız ona bile gerek kalmaz. Özellikle satır aralarına dikkat edin. Önemli şeyler olabiliyor.

Son derece hızlı çalışıyor. Şu an Laravel Php Framework, MySQL ve Redis kullanarak hazırladığım bir RESTful servisten data çekerek Production’da çalıştırıyorum. Server’a biraz yük binmesine rağmen, 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ım.

Kaynaklar

http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/
https://auth0.com/blog/building-universal-apps-with-nextjs/
http://buytaert.net/a-history-of-javascript-across-the-stack
https://medium.freecodecamp.com/what-exactly-is-client-side-rendering-and-hows-it-different-from-server-side-rendering-bd5c786b340d#.1ln569tlk