NuxtJS v2.14 Static Generation Geliştirmeleri

Aug 2, 2020

Giriş

Statik site oluşturma hakkında bir makale yayınlamamın üzerinden bir hafta geçmişti ki Nuxt'ın yeni bir versiyonu yayınlandı. v2.13 öncesinden v2.14 sürümüne geçmek artık çok daha kolay.

Yapılandırma

Yeni Property

Uygulamamızı statik hosting amacıyla dışa aktarmak istediğimizi Nuxt'a belirtebilmemiz için yeni bir target property'miz mevcut. nuxt.config.js içerisinde bu property'e statik hosting için static değerini, sunucu tarafı rendering için de server değerini atayabiliriz.

export default {
  target: 'static' // default: 'server'
}

Statik Uyumlu Komutlar

Şimdi dört komutumuz var ve bu komutların işlevi target property'sinin değerine göre farklılaşıyor.

nuxt dev

Developmet server'ı başlatır. Bu komutu hem server hem de statik target'lar için kullanabiliriz.

nuxt generate

Eğer gerekliyse webpack build yapar ve uygulamayı statik HTML dosyaları şeklinde dışarı aktarır.

nuxt generate artık Webpack build gerekip gerekmediğini algılayacak kadar akıllı olduğundan, HTML dosyaları oluşturmak ve Webpack build için farklı komutlara artık ihtiyacımız yok. Bu sebepten nuxt export kullanımdan kaldırıldı.

nuxt build

Nuxt uygulamamızı production için derler. nuxt generate gerekli olduğunda projeji derleyebildiğinden target: 'static' için bu komuta ihtiyacımız yok.

nuxt start

Projemizi dist/ dizini içerisine statik olarak oluşturduktan sonra nuxt serve ile production HTTP sunucumuzu başlatıp statik uygulamamızı SPA Fallback desteği ile sunabiliriz.

SPA Fallback işlevi kısaca statik sitemiz içerisinde SPA uygulaması bulundurabilmemizi sağlıyor. Örneğin /admin veya /login gibi sayfaların statik olarak render edilmesini engellemek isteyebiliriz. SPA Fallback ile bu sayfalar istemci tarafında render edilip yine erişilebilir olacaktır.