Cansu Arı Logo
Blog
Nedir?

Layout ve Page Lifecycle: Hook’lar Hangi Sırayla Çalışır?

Nuxt 3’te layout, page ve component lifecycle’ları birbiriyle iç içedir. onMounted, onBeforeRouteUpdate, onRenderTracked...

  • #Nuxt 3
  • #Vue.js
Skip to content

Hangi hook ne zaman çalışır?

Vue ve Nuxt uygulamaları reaktif yapısıyla oldukça sezgisel olsa da, lifecycle’lar (yaşam döngüleri) devreye girdiğinde işler karışabiliyor.
Bir sayfadan diğerine geçerken hangi hook ne zaman çalışıyor, layout ne zaman mount ediliyor, useAsyncData çağrısı tam olarak nerede devreye giriyor?

Temel Mantık

Nuxt 3’te üç ana katman vardır:
  1. Layout → Sayfa iskeleti (örneğin navbar, footer).
  2. Page → Route’a özel içerik.
  3. Component → Page içinde kullanılan alt bileşenler.
Her biri kendi lifecycle’ına sahiptir. Ancak Nuxt, bu katmanları optimize edilmiş bir sırayla çalıştırır. SSR, CSR ve route değişimlerinde bu sırayı anlamak çok önemlidir.

Sayfa Yüklenme Akışı (SSR Aşaması)

SSR modunda bir sayfa ilk kez yüklendiğinde olaylar şu sırayla gelişir:
  1. Server-side setup → useAsyncData, useFetch çağrıları başlatılır.
  2. Server render → HTML oluşturulur ve istemciye gönderilir.
  3. Hydration → Client tarafında Vue instance yeniden başlatılır.
  4. onBeforeMount → Vue bileşeni DOM’a eklenmeden hemen önce çalışır.
  5. onMounted → DOM artık hazır. Tarayıcı odaklı işlemler yapılabilir.
SSR aşamasında yalnızca setup() ve useAsyncData() aktif olur. Diğer lifecycle hook’lar (örneğin onMounted) yalnızca client tarafında çalışır.

Route Değişimi Akışı (CSR Aşaması)

Kullanıcı yeni bir sayfaya yönlendiğinde, SSR devre dışıdır. Bu kez olaylar şöyle ilerler:
  1. onBeforeRouteLeave (eski sayfa) → Sayfa değişmeden önce çalışır. Cleanup veya uyarı işlemleri için idealdir.
  2. onBeforeRouteUpdate (layout/page) → Aynı layout içinde route parametresi değiştiyse tetiklenir.
  3. Page setup() → Yeni sayfanın setup aşaması çalışır. useAsyncData çağrıları burada yapılır.
  4. onBeforeMount (yeni sayfa) → Bileşen DOM’a eklenmeden önce.
  5. onMounted (yeni sayfa) → Görsel render tamamlandı.
  6. onUpdated (page/component) → Reaktif değişiklikler sonrası DOM güncellenirse çalışır.
Eğer layout değişmiyorsa, sadece sayfa bileşeni yeniden mount edilir. Layout yeniden render edilmez.

Layout ve Page Hook’larının Hiyerarşisi

AşamaLayout HookPage Hook
Server Rendersetup()setup()
HydrationonBeforeMountonBeforeMount
MountonMountedonMounted
Route UpdateonBeforeRouteUpdateonBeforeRouteUpdate
UnmountonUnmountedonUnmounted
Önemli: Layout sadece değiştiğinde yeniden render edilir. Aynı layout altında sayfa geçişlerinde layout yaşam döngüsü değişmez.

Örnek Akış: Blog Sayfası → Blog Detay

Varsayalım /blog sayfasından /blog/123 detayına geçiyorsun.
  1. Layout (örneğin default.vue) değişmez, yalnızca sayfa güncellenir.
  2. onBeforeRouteUpdate → Layout ve Page seviyesinde tetiklenir.
  3. Page setup yeniden çalışır (useAsyncData yeniden fetch eder).
  4. onMounted → Yeni içerik DOM’a eklendiğinde devreye girer.
Bu geçiş sürecinde layout sabit kalır, böylece nav-bar veya footer yeniden yüklenmez -- performans büyük ölçüde artar. ⚡

onBeforeRouteLeave ve onBeforeRouteUpdate Kullanımı

Sayfadan çıkmadan önce uyarı:
onBeforeRouteLeave((to, from) => {
  if (formChanged.value) {
    const confirmLeave = confirm('Değişiklikler kaydedilmedi. Çıkmak istiyor musun?')
    if (!confirmLeave) return false
  }
})

Parametre değişiminde API’yi yeniden çağır:

onBeforeRouteUpdate((to) => {
  fetchPost(to.params.id)
})

Bu hook, sayfa yeniden oluşturulmadan parametre değişimlerinde bile veri güncellenmesini sağlar.

Pro Tip: Global Hook Yönetimi

Nuxt’ta app.vue veya layouts/default.vue içine global hook’lar ekleyebilirsin. Örneğin route geçişlerinde loading animasyonu göstermek:
onBeforeRouteUpdate(() => startLoading())
onBeforeRouteLeave(() => stopLoading())
Ayrıca defineNuxtPlugin içinde global router guard tanımlayabilirsin:
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('page:start', () => console.log('Yeni sayfa yükleniyor...'))
  nuxtApp.hook('page:finish', () => console.log('Sayfa yüklendi!'))
})

Lifecycle Sırası Özet Akışı

SSR aşaması: setup() → render → hydration
CSR aşaması: onBeforeRouteLeave → setup() → onMounted → onUpdated → onUnmounted
Layout yalnızca değiştiğinde yeniden mount edilir. Page component her route değişiminde yeniden çalışır.

Sık Yapılan Hatalar

  1. useAsyncData’yı onMounted içinde çağırmak → SSR’de veri kaçırılır.
  2. onMounted içinde useRoute parametresiyle veri çekmek → Route değişimlerinde güncellenmez.
  3. Layout’u keep-alive gibi davranacağını varsaymak → Layout yeniden mount olabilir, state kaybolur.
  4. Route geçişlerinde reactive state’leri sıfırlamayı unutmak → Eski veriler yeni sayfaya taşınır.

Sonuç

Nuxt 3, Lifecycle akışını hem SSR hem CSR arasında dengeli bir şekilde yönetir. Bunu anlamak, veri çekme, animasyon, cache veya auth gibi sistemlerde doğru zamanda işlem yapmanı sağlar.

Kısaca:

  • SSR → setup & useAsyncData
  • CSR → onBeforeRouteUpdate & onMounted
  • Layout → yalnızca değişirse yenilenir

Doğru hook’u doğru anda kullanmak, Nuxt uygulamanın akışını kusursuz hale getirir.

All tags
  • Nuxt 3
  • Vue.js
Prev
Next