Modern Frontend Mimarisi: Vue, Nuxt ve Tooling

Sadece kod yazmak yetmez; ölçeklenebilir, güvenli ve performanslı bir mimari kurmak gerekir. Vue ekosisteminin derinlikleri, test stratejileri ve modern tooling kararları.

1. Vue & Nuxt Derinlikleri

Ref vs Reactive

ref(): Primitive tipler (string, number, boolean) ve nesneler için kullanılır. Değere .value ile erişilir. Nesnenin tamamını değiştirebilirsiniz (user.value = newUser).
reactive(): Sadece nesneler (Object, Array, Map) için kullanılır. .value gerektirmez. Ancak nesnenin referansını kaybederseniz (destructuring yaparsanız) reaktivite kopar (toRefs kullanmak gerekir).

<script setup> Nedir?

Composition API için "Syntactic Sugar"dır.

Daha az kod (Boilerplate azalır).
Değişkenleri ve fonksiyonları return etmeye gerek yoktur, template otomatik görür.
Runtime performansı daha iyidir (Template derleyicisi daha iyi optimizasyon yapar).

Nuxt: $fetch vs useAsyncData

$fetch

Sadece bir HTTP istemcisidir (fetch wrapper). Client-side interaction (buton tıklaması) için uygundur. SSR sırasında kullanılırsa veri hidrasyonu (hydration) sağlanamaz, veri iki kere çekilebilir.

useAsyncData / useFetch

Nuxt'ın veri çekme composable'ıdır. SSR uyumludur. Sunucuda çekilen veriyi payload içine koyar ve client'a gönderir (Hydration). Sayfa geçişlerinde (Navigation) otomatik olarak isteği iptal eder (deduplication).

2. Tooling & Testing

Jest: ShallowMount vs Mount

mount: Bileşeni ve tüm alt bileşenlerini (children) render eder. Entegrasyon testleri için iyidir ama yavaştır.
shallowMount: Sadece ana bileşeni render eder, alt bileşenleri "stub" (sahte etiket) olarak geçer. Unit testler için idealdir, hızlıdır ve izole test sağlar.

Tailwind & PostCSS

Tailwind CSS tek başına çalışmaz, bir PostCSS plugin'idir. PostCSS, CSS'i işleyen ve dönüştüren bir araçtır (JS için Babel neyse, CSS için PostCSS odur).

Neden PostCSS? Tailwind'in @apply, @tailwind gibi direktiflerini standart CSS'e çevirmek ve kullanılmayan class'ları (PurgeCSS) temizlemek için gereklidir.

3. Mimari ve Güvenlik

Auth & Interceptors

Güvenli bir Auth mimarisinde token (JWT) yönetimi kritik öneme sahiptir.

Interceptor: Her giden isteğe otomatik olarak Authorization: Bearer token başlığını eklemek ve gelen yanıtta 401 Unauthorized hatası varsa kullanıcıyı logout yapmak veya token yenilemek (refresh token flow) için kullanılır.
Şifreleme: Frontend tarafında şifreleme (password hashing) YAPILMAZ. Şifre HTTPS (SSL/TLS) tüneli üzerinden sunucuya plain-text (veya basit bir hash) olarak gider, sunucu bunu güvenli bir algoritma (Argon2, Bcrypt) ile hashleyip veritabanına yazar.

Landing Page Optimizasyonu

İlk açılış hızını (LCP - Largest Contentful Paint) artırmak için:

Görseller: WebP/AVIF formatı kullanın, lazy-load yapın ama "Above the Fold" (ekranın görünen ilk kısmı) görsellerini eager yükleyin.
Fontlar: font-display: swap kullanın.
SSG (Static Site Generation): Landing page dinamik veri içermiyorsa, build zamanında HTML olarak üretip CDN'den sunun.