NuxtJS v2.13 ile Statik Site Oluşturma

Jul 21, 2020

Makaledeki bazı bilgiler güncelliğini yitirmiş olabilir. NuxtJS v2.14 için bu makaleye bakabilirsiniz.

Giriş

nuxt generate ile zaten statik siteler oluşturabiliyorduk. Bu özellik esas olarak saylafarı önceden render ederek çalışıyordu. Biz istemci tarafında sayfaları gezerken asyncData ve fetch hook'ları çağırılır, API'mize bir istekte bulunulur. Fakat sonraki sayfa zaten önceden render edildiği için her sayfa değişiminde bu hook'ların tekrar çağırılmasına ihtiyacımız yok. Bunun yerine sayfanın önceden render edilmiş DOM verisini bir payload dosyası içerisine koyup bununla asyncData ve fetch metodlarını mock edebiliriz. Yeni nuxt export özelliği bunu yaparak tamamen statik web sayfaları oluşturabiliyor.

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'
}

Yeni Komutlar

target: 'static' için kullanabileceğimiz yeni komutlar mevcut: nuxt export ve nuxt serve.

nuxt export (v2.14'te kaldırıldı)

nuxt export komutu her bir route için /dist dizininde bir HTML dosyası oluşturur.

nuxt export komutunun, nuxt generate komutundan farklı olarak nuxt build komutunu çağırmadığını belirtmekte fayda var. Dolayısıyla nuxt export komutunu kullanırken proje hali hazırda nuxt build ile build edilmiş olmalıdır. Bu ayrım sayesinde eğer değişsan sadece içerik ise yalnızca sayfaları render edebiliriz. Bu noktada Webpack build aşamasının olmaması daha hızlı redeploy sağlıyor. 😎

nuxt serve (v2.14'te kaldırıldı)

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.

Smart Prefetching

v2.4'den beri Nuxt <nuxt-link> ile linklenmiş code-splitted sayfa verilerini ilgili link ekranda göründüğü anda sunucudan çekebiliyordu. v2.13 ile birlikte bu işlev artık nuxt export tarafından oluşturulan payload dosyalarını da getirebiliyor.

Anında açılan sayfalar kullanıcı deneyimini iyileştirse de, tüm makaleler sayfası gibi içeriklerin listelendiği sayfalarda bu özelliği devre dışı bırakmak sunucuya gereğinden fazla istek gönderilmesini engellemek için faydalı olabilir.

Specifik bir link için prefetching'i devre dışı bırakmak için no-prefetch property'sini kullanabiliriz.

<nuxt-link to="/about" no-prefetch>About page not pre-fetched</nuxt-link>

Ayrıca nuxt.config.js içerisinde router.prefetchLinks: false ile tüm linkler için prefetching'i devre dışı bırakabiliriz.

export default {
  router: {
    prefetchLinks: false // default: 'true'
  }
}

Ve prefetch property'si ile spesifik bir link için prefetching'i etkinleştirebiliriz.

<nuxt-link to="/about" prefetch>About page pre-fetched</nuxt-link>

Integrated Crawler

Sayfalardaki bütün realtive linkleri tespit edip bunları routes'a ekleyen entegre bir crawler'ımız da var. Eğer bir grup route'u hariç tutmak istiyorsak generate.exclude özelliğini kullanabiliriz. Crawler'ın tespit edemeyeceği linkler için generate.routes property'sini kullanmaya devam edebiliriz.

export default {
  generate: {
    exclude: ['/my-secret-page'],
    routes: ['/dynamic-link-which-is-not-referenced-in-any-page']
  }
}

nuxt.config.js içine eklenen export property'si şu anda generate ile aynı işi yapıyor ve Nuxt 3 ile birlikte bu işi tek başına devralacak v2.14'te tekrar kaldırıldı. 😜

Eğer dinamik sayfa sayınız çok fazla ise performans için crawler'ı generate.crawler: false ile devre dışı bırakabilirsiniz ve dinamik route'ları siz ekleyebilirsiniz.

export default {
  generate: {
    crawler: false // default: 'true'
    routes: async () => {
      // return routes array
    }  
  }
}

Hooks

Ayrıca generate hook'larından küçük farklarla ayrılan yeni export hooks da mevcut. export hook'ları v2.14'te kaldırıldı. generate hook'larını kullanmya devam edebilirsiniz.