Cansu Arı Logo
Blog
Haber

Nuxt 4 Neler Getirdi?

Yeni render motoru, hızlanan build süreçleri, RSC desteği ve hibrit edge-rendering yetenekleriyle Nuxt 4.

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

Vue ekosistemi hızla evriliyor.

Nuxt 3’ün modern mimarisi daha yeni oturmuşken, ekip Nuxt 4 ile yepyeni bir çağ başlatıyor.
Performans, edge rendering, React benzeri server component mimarisi (RSC) ve yeni geliştirici deneyimi odakta.

Bu yazıda, Nuxt 4’te gelen en önemli yenilikleri, geliştiricilere etkisini ve geçiş sürecinde bilmen gerekenleri detaylıca inceliyoruz.

1. Nitro 3 -- Yeni Nesil Render Motoru

Nuxt 4’ün kalbinde tamamen yeniden yazılmış bir Nitro 3 motoru var. Nitro artık yalnızca server framework değil, tam teşekküllü bir edge rendering platformu.

Yenilikler:

  • Incremental Streaming: Server yanıtı, bileşenler hazır oldukça tarayıcıya gönderiliyor (React 19 tarzı).
  • Isomorphic Handlers: API endpoint’leri artık hem edge hem node ortamında aynı kodla çalışıyor.
  • Persistent Cache API: Nitro artık disk ve KV cache arasında akıllı önceliklendirme yapabiliyor.
Kısaca: Nitro 3, SSR’yi CDN hızına getiriyor. Artık sunucu beklemiyor; içerik “akarken” yükleniyor.

2. Vue 3.5 + RSC (Remote Server Components) Desteği

Nuxt 4, Vue 3.5 ile tam uyumlu geliyor ve yepyeni bir konsepti destekliyor: Server Components (RSC). Artık bileşenlerin bir kısmı tarayıcıya hiç gönderilmeden sunucu tarafında işlenebiliyor.

Örnek:

<!-- server-only bileşen -->
<script setup>
// Sunucuda render edilir, client’a JS gönderilmez
const posts = await $fetch('/api/posts')
</script>
<template>
  <ul>
    <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
  </ul>
</template>

Bu özellik sayesinde:

  • Client bundle boyutu küçülür
  • Hydration süresi kısalır
  • SEO performansı artar

Kısaca: Vue bileşenleri artık hem “server” hem “client” doğasında yaşayabiliyor.

3. Hibrit Rendering Modeli

Nuxt 4, Universal Rendering Mode adıyla SSR, SSG, ISR ve Edge Rendering stratejilerini tek çatı altında topluyor.
// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/dashboard': { ssr: true },
    '/blog/**': { swr: 300 },
    '/api/**': { cache: { maxAge: 120 } }
  }
})
Artık her route’un render yöntemi bağımsız. Nuxt 4, build sırasında bu kuralları otomatik optimize eder -- ne statik, ne dinamik; “akıllı”.

4. Yeni Devtools 2.0

Nuxt Devtools baştan tasarlandı. Artık tarayıcı tabanlı değil, ayrı bir overlay arayüzü sunuyor.

Özellikler:

  • Route bazlı performance timeline
  • AsyncData ve Composables izleyici
  • SSR cache inspector
  • Lighthouse benzeri “Nuxt Score” metriği
npx nuxi devtools enable
Devtools artık framework seviyesinde debug sunuyor -- hata değil, görsel teşhis.

5. Yeni useFetch 2.0 API

useFetch artık composable değil, tam entegre runtime API haline geldi. Yeni sürümde fetch’ler daha akıllı: otomatik abort, deduplication ve cache kontrolü içeriyor.

Örnek:

const { data, refresh, pending } = await useFetch('/api/products', {
  key: 'products',
  dedupe: true,
  server: true
})
  • dedupe → aynı endpoint’e birden fazla istek yapılırsa tek fetch çalışır.
  • server → SSR aşamasında prefetch edilir.
  • refresh() → reactive cache invalidation sağlar.
💡 Artık useAsyncData ile useFetch arasındaki fark tamamen ortadan kalktı.

6. Config Layer & Module Ecosystem

Nuxt 4, config layering kavramını genişletiyor. Artık farklı modüller veya monorepo paketleri kendi nuxt.config yapılarını katman olarak ekleyebiliyor.

Örnek:

export default defineNuxtConfig({
  extends: ['@myorg/ui', '@myorg/docs'],
  modules: ['@nuxt/image', '@nuxt/seo']
})
Artık tasarım sistemleri, UI kitaplıkları ve projeler tek config altında birleşebilir.

7. Edge & Bun Desteği

Nitro 3, Bun, Deno, Cloudflare Workers ve Vercel Edge için native destek getiriyor. Artık Node bağımlılığı ortadan kalkıyor.
npx nuxi deploy --target=cloudflare
Nuxt artık gerçek anlamda evrensel: nerede çalıştığını umursamıyor.

8. Geçiş Süreci -- Nuxt 3’ten Nuxt 4’e

İyi haber: Nuxt 4 tamamen backward-compatible. 🎉 Ancak bazı minor değişiklikler mevcut:
  • useFetch ve useAsyncData birleştirildi.
  • nuxt.config’teki nitro yapılandırması yeniden adlandırıldı.
  • #imports dizini genişletildi, özel composable’lar global hale getirildi.
npx nuxi upgrade
Komutuyla otomatik migration aracı çalıştırılabiliyor.

💡 Tavsiye: Nuxt 3 projeni önce 3.11 sürümüne güncelle, sonra geçiş yap.

9. Performans Testleri

Nuxt ekibi kendi benchmark sonuçlarını da paylaştı:
  • Cold start: %45 daha hızlı
  • Memory usage: %30 daha az
  • Render latency: Ortalama 25ms düşüş
Yani sadece yeni özellikler değil, hissedilir hız farkı da geliyor.

10. Geliştirici Deneyimi (DX) Yenilikleri

  • nuxi new component komutu artık otomatik prop tipleri oluşturuyor.
  • Hata mesajları geliştirici dostu hale getirildi (Stackblitz benzeri).
  • Typescript strict mod varsayılan hale getirildi.
  • Yeni Hot Reload sistemi, daha kararlı.
Nuxt 4, sadece framework değil; adeta bir geliştirici platformu.

Sonuç

Nuxt 4, sadece bir sürüm güncellemesi değil -- tam bir mimari evrim. SSR ve Edge Rendering dünyalarını birleştiriyor, Vue’yu sunucu tarafında bile “component-first” hale getiriyor.

Kısaca:

  • Nitro 3 → Daha hızlı render motoru.
  • RSC → Server Components desteği.
  • Hybrid Rendering → Her route için ayrı strateji.
  • Devtools 2.0 → Akıllı hata izleme.

All tags
  • Nuxt
  • Nuxt 4
  • Vue.js
Prev
Next