Frontend Framework Karşılaştırması: Hydration ve Rendering Tasarımı

Web Programlama Eğitimi İçin Önce Hydration Maliyetini Ölçün

SSR çıktısının ekranda görünmesi ile JavaScript'in etkileşimleri bağlaması aynı olay değildir. İlk ölçümde Chrome DevTools Performance panelinde sayfa yüklemesini kaydedin; ana iş parçacığındaki uzun görevleri, `Evaluate Script` ve framework'e ait commit/render çağrılarını ayırın. Buna ek olarak gerçek kullanıcı verisi için `web-vitals` paketini kullanın; özellikle INP ile long task zamanlarını aynı oturum kimliği altında gönderin. Bu yaklaşım, örneğin LCP'nin 1,8 saniye olmasına rağmen kullanıcının menü düğmesine 600 ms sonra yanıt almasının nedenini ortaya çıkarır.

import { onINP, onLCP, onLongAnimationFrame } from 'web-vitals';

const report = (metric) => {
  navigator.sendBeacon('/rum', JSON.stringify({
    name: metric.name,
    value: metric.value,
    id: metric.id,
    attribution: metric.attribution
  }));
};

onLCP(report);
onINP(report);
onLongAnimationFrame(report);

Bir web programlama eğitimi laboratuvarında karşılaştırmayı tekrarlanabilir yapmak için Playwright ile CPU'yu CDP üzerinden 4 kat yavaşlatın ve etkileşim gecikmesini ölçün. Değişiklikten önce ve sonra aynı URL, aynı viewport ve aynı throttling kullanılmalıdır; aksi hâlde CDN önbelleği ya da font indirme farkı sonucu geçersiz kılar. Chrome trace içindeki `RunTask` bloklarının toplamını ve RUM'daki p75 INP değerini birlikte kaydedin.

ReactJS Eğitimi: Deterministik Hydration ve Ada Sınırları

React SSR'de hydration uyarısının yaygın sebebi `Date.now()`, `Math.random()`, saat dilimi veya `localStorage` gibi sunucu ve tarayıcıda farklı değer üreten ifadelerin ilk render sırasında çalışmasıdır. `suppressHydrationWarning` yalnızca tek metin düğümündeki kaçınılmaz farklar için düşünülmelidir; farkı gizler, DOM'u deterministik yapmaz. Aşağıdaki örnekte tarayıcıya özgü tema ilk SSR render'ında sabit tutulur, değer hydration sonrasında `useEffect` ile okunur.

import { useEffect, useState } from 'react';

export function ThemeLabel() {
  const [theme, setTheme] = useState('system');

  useEffect(() => {
    setTheme(localStorage.getItem('theme') ?? 'system');
  }, []);

  return <span data-theme={theme}>{theme}</span>;
}

ReactJS eğitimi kapsamında ağır bir filtre panelini ana sayfanın hydration yolundan çıkarmak için `React.lazy` ve `Suspense` kullanın; ancak bunun yalnızca JavaScript indirme ve ilk render işini ertelediğini unutmayın. Filtre paneli sunucudan HTML olarak görünmeliyse SSR sınırını, yalnızca kullanıcı tıklayınca gerekliyse istemci sınırını ayrı tasarlayın. React DevTools Profiler'da aynı kullanıcı akışını kaydedip `Commit duration` toplamını karşılaştırın; örneğin paneli başlangıç ağacından ayırdıktan sonra ilk commit'teki bileşen sayısının düştüğünü doğrulayın.

import { lazy, Suspense, useState } from 'react';

const Filters = lazy(() => import('./Filters'));

export function SearchToolbar() {
  const [open, setOpen] = useState(false);
  return <>
    <button onClick={() => setOpen(true)}>Filtreler</button>
    {open && (
      <Suspense fallback={<div>Yükleniyor…</div>}>
        <Filters />
      </Suspense>
    )}
  </>;
}

Angular Eğitimi: Defer Blokları ve Zoneless Ölçüm Disiplini

Angular uygulamasında bütün bileşen ağacını ilk etkileşimden önce kurmak yerine görünür olmayan modülleri `@defer` ile tetikleyiciye bağlayın. `@defer (on viewport)` içindeki kod ayrı bir chunk'a dönüştürülebilir; kritik ayrıntı, placeholder'ın sabit yükseklikte olmasıdır. Aksi hâlde bileşen geç geldiğinde layout shift üretir ve CLS yükselir. Chrome Coverage paneliyle ilk yüklemede yürütülmeyen JavaScript miktarını, Network paneliyle de oluşan chunk'ın gerçekten etkileşimden sonra istendiğini kontrol edin.

@defer (on viewport) {
  <app-recommendations [productId]="productId" />
} @placeholder (minimum 300ms) {
  <div class="recommendations-skeleton" aria-busy="true"></div>
} @error {
  <button (click)="reloadRecommendations()">Tekrar dene</button>
}

Angular eğitimi sırasında sık görülen hata, `OnPush` kullanılan bir bileşende mutable diziye `push` yapıp görünümün güncellenmesini beklemektir. Referans değişmediği için ilgili kontrol yolu çalışmayabilir; immutable güncelleme veya signal kullanın. Angular DevTools Profiler ile değişiklik öncesi ve sonrası aynı liste filtreleme eyleminde change detection süresini kaydedin. Zoneless yapı değerlendiriliyorsa üçüncü taraf bir callback'in görünümü güncellediğini varsaymayın; state güncellemesini signal, `markForCheck` veya framework'ün tanıdığı bir akış üzerinden açıkça modelleyin.

readonly products = signal<Product[]>([]);

addProduct(product: Product) {
  this.products.update(items => [...items, product]);
}

VueJS Eğitimi: Async Bileşenler, SSR ve Reaktif Veri Tuzakları

Vue tarafında `defineAsyncComponent`, nadiren kullanılan bir modal veya harita panelinin kodunu ana bundle'dan ayırmak için uygundur. Ancak async bileşeni her yerde kullanmak otomatik olarak daha düşük INP anlamına gelmez: kullanıcı ilk tıklamada ağ gecikmesiyle karşılaşabilir. Kritik olmayan panel için `prefetch` veya route-level preload stratejisini, gerçek Network waterfall ve p75 INP verisine göre seçin.

<script setup>
import { defineAsyncComponent, ref } from 'vue';

const showMap = ref(false);
const StoreMap = defineAsyncComponent(() => import('./StoreMap.vue'));
</script>

<template>
  <button @click="showMap = true">Mağazada bul</button>
  <StoreMap v-if="showMap" />
</template>

VueJS eğitimi projelerinde SSR uyuşmazlığı için `window.innerWidth` değerini doğrudan template'te kullanmak yerine sunucuda kabul edilmiş bir varsayılan üretin ve istemci değerini `onMounted` içinde güncelleyin. Sunucu HTML'i mobil, istemci HTML'i masaüstü dalını üretirse Vue DOM'u yamalamaya çalışırken uyarı verebilir ve kullanıcı kısa süre yanlış düzeni görür. Vue Devtools timeline ile mount anındaki component update sayısını, Lighthouse'tan bağımsız olarak Chrome Performance trace'teki scripting süresini karşılaştırın.

Frontend Framework Karşılaştırması: Kararı Bundle Değil Etkileşim Sınırı Verir

Frontend framework karşılaştırması yaparken yalnızca üretim bundle boyutunu tabloya koymak yetersizdir. Aynı ürün ayrıntı ekranında üç sınırı ölçün: ilk HTML baytı, LCP öğesinin boyanması ve sepete ekle düğmesinin INP'si. `webpack-bundle-analyzer`, `source-map-explorer` veya Vite'ın `rollup-plugin-visualizer` aracı bağımlılık grafiğini gösterir; fakat hangi modülün ana iş parçacığında ne kadar çalıştığını Chrome Performance trace gösterir. Bu nedenle karar kaydına hem gzip/brotli çıktı boyutunu hem de CPU throttling altındaki p75 etkileşim sonucunu ekleyin.

# Vite üretim grafiği için
npm i -D rollup-plugin-visualizer

# CI'da bütçe denetimi örneği
npx bundlesize --config bundlesize.json

# bundlesize.json
[{ "path": "dist/assets/*.js", "maxSize": "180 kB" }]

Legacy bir AngularJS ekranını taşırken AngularJS eğitimi materyalindeki `$scope` ve iki yönlü binding kalıplarını yeni framework'e satır satır çevirmeyin. Önce ağ sözleşmesini sözleşme testiyle kilitleyin; Pact veya MSW ile `/api/cart` yanıtı için fixture üretin. Sonra ekranı route sınırından strangler yaklaşımıyla değiştirin. AngularJS'nin digest döngüsünde çalışan bir watcher'ın React effect'ine veya Vue watcher'ına aynen aktarılması, bağımlılık döngüsü ve çift istek üretebilir; yan etkileri kullanıcı olayı ya da açık bir veri sorgusu katmanına taşıyın.

JavaScript eğitimi açısından ortak temel, framework API'lerinden önce event loop, closure ve referans eşitliğidir. React Native eğitimi alan ekipler de iş kurallarını TypeScript paketi olarak paylaşabilir; fakat DOM hydration, CSS layout ve tarayıcı Performance API'leri React Native'de aynı şekilde yoktur. Paylaşılan paketi `@acme/domain` gibi framework'süz tutun, `window`, `document` ve native modül importlarını adapter katmanına alın; böylece web bundle'ına mobil bağımlılık sızmasını `eslint-plugin-import` kurallarıyla engelleyebilirsiniz.

Sık Sorulan Sorular

ReactJS eğitimi sırasında hydration mismatch nasıl bulunur?

Önce üretim benzeri SSR çıktısını `curl` ile kaydedin, ardından tarayıcıdaki Elements panelinden hydration sonrası DOM ile karşılaştırın. `Date.now()`, rastgele kimlik, locale formatlama ve `window` erişimlerini arayın. React DevTools Profiler kaydında beklenmeyen ikinci render varsa ilgili bileşeni deterministik prop ile SSR etmek veya istemciye özel okumayı `useEffect` içine taşımak gerekir.

Angular eğitimi için @defer kullanırken hangi metrikler izlenmeli?

Chrome DevTools Network panelinde deferred chunk'ın tetikleyiciden önce yüklenmediğini, Performance panelinde ilk yüklemedeki scripting süresinin düştüğünü doğrulayın. RUM tarafında `web-vitals` ile p75 INP ve CLS gönderin; placeholder sabit yükseklikte değilse @defer sonrası CLS artabilir. Angular DevTools Profiler, ilgili bileşenin başlangıç değişiklik tespit maliyetinden çıktığını göstermelidir.

VueJS eğitimi projesinde defineAsyncComponent her bileşende kullanılmalı mı?

Hayır. Kullanıcının ilk ekranda kesin göreceği header, ödeme özeti veya ana ürün görseli çevresindeki bileşenleri async yapmak ek ağ isteği ve fallback süresi ekler. DevTools Coverage ile başlangıçta kullanılmayan modülleri bulun, yalnızca düşük olasılıklı veya kullanıcı eylemiyle açılan modalları `defineAsyncComponent` ile bölün; aynı akışta ilk tıklama gecikmesini Performance trace ile önce-sonra ölçün.

Frontend framework karşılaştırması yaparken React Native eğitimi neden ayrı değerlendirilmelidir?

React Native, JavaScript ve bazı iş kurallarını web ekibiyle paylaşabilse de tarayıcı DOM'u, SSR hydration ve Core Web Vitals ölçüm modeli üzerinde çalışmaz. Ortak kodu saf TypeScript fonksiyonları ve şema doğrulama katmanında tutun; web adaptöründe `fetch` ve DOM, mobil adaptöründe native storage gibi platform API'lerini ayrı paketlere koyun.