BAY logo
August 29, 2025
4 min read
10 views

Angular 2025 Roadmap: Performans, DX ve Kademeli Benimseme (v21'e Doğru)

Angular ekibi 2025’te performans (SSR/Hydration) ve geliştirici deneyimini (DX) öne çıkarıyor. Bu yazı; bugün üretimde güvenle kullanabileceklerinizi (Signals, yeni Control Flow @if/@for, SSR/Hydration & Incremental Hydration, rota düzeyi render modları), deneysel alanları (Resource API), aktif çalışmaları ve ekibinizin hemen uygulayabileceği kademeli benimseme planını içerir. Her bölüm sonunda mini POC’ler, kontrol listeleri ve resmî bağlantılar var.

Not — HttpClient & v21: Toplulukta “Angular 21 ile HttpClient’ın temel kullanım için varsayılan olarak sağlanacağı” yönünde paylaşımlar var. Ancak resmî dokümantasyonda bugün itibarıyla “sağlayıcı gereksizdir” garantisi bulunmuyor; gelişmiş yapılandırmalar (SSR için withFetch, fonksiyonel interceptor’lar, XSRF vb.) zaten provideHttpClient() üzerinden yapılmaya devam ediyor. Bu nedenle yazıda HttpClient’ı “özelleştirme gerektiğinde sağlayıcıyla yapılandır” ilkesinde ele alıyoruz.


Neden “Roadmap” önemli?

Angular’ın yol haritası, hazır olma ilkesine dayanır; tarihler değişebilir, kademeli benimseme teşvik edilir. Resmî roadmap’i buradan takip edebilirsin. angular.dev/roadmap

Bugün üretimde kullanabilecekler (Stable)

1) Signals — Stable

Signals; durumun nerede/nasıl kullanıldığını izleyerek yeniden işleme maliyetini azaltır, daha kestirilebilir bir reaktivite modeli sunar. Kapsamlı rehber ve “essentials” girişleri:

// counter.signal.ts
import { signal, computed } from '@angular/core';
export const count = signal(0);
export const doubled = computed(() => count() * 2);
// bir yerde:
count.update(n => n + 1);

Hızlı fayda: Bileşen içi local state’i signals’a taşıyın; derived state için computed kullanın. RxJS ile köprü gerekiyorsa toSignal/toObservable yardımcılarını kullanın.

2) Yeni Control Flow — @if, @for, @switch (Stable)

Yeni kontrol akışı şablona gömülü; CommonModule importu gerekmiyor. Mevcut projeleri otomatik dönüştürmek için şematik:

ng generate @angular/core:control-flow

<!-- inventory.component.html -->
@if (items().length === 0) {
  <p>Stok boş.</p>
} @else {
  <ul>
    @for (p of items(); track p.id) {
      <li>{{ p.name }} - {{ p.price | currency }}</li>
    }
  </ul>
}

İpucu: @for içinde track zorunlu; DOM yeniden oluşturmayı azaltır ve stabilite sağlar.

3) SSR + Hydration + Incremental Hydration — Stable

Angular 20 ile rota düzeyi render modu ve incremental hydration kararlı hâle getirildi. Incremental Hydration; sayfanın kritik bölgelerini önce canlandırarak TTI’yi iyileştirir.

// main.ts (istemci)
import { bootstrapApplication, provideClientHydration, withIncrementalHydration } 
  from '@angular/platform-browser';
bootstrapApplication(AppComponent, {
  providers: [ provideClientHydration(withIncrementalHydration()) ],
});

Kılavuzlar: Hydration ve Incremental Hydration.

4) Rota düzeyi render modları — Stable

Her route için Client (CSR), Prerender (SSG) veya Server (SSR) seçebilirsin. Konfigürasyon @angular/ssr ile yapılır.

// app.routes.server.ts
import { provideServerRendering, withRoutes, ServerRoute, RenderMode } from '@angular/ssr';
const serverRoutes: ServerRoute[] = [
  { path: '',            renderMode: RenderMode.Prerender }, // ana sayfa
  { path: 'product/:id', renderMode: RenderMode.Server },    // dinamik, kritik rota
  { path: '**',          renderMode: RenderMode.Server }
];
export const serverProviders = [
  provideServerRendering(withRoutes(serverRoutes)),
];

“Bugün projeye alırken risk/ödül oranını değerlendir.”

Not: Signal-based Forms üzerine toplulukta deneysel çalışmalar var; resmi dokümantasyonda formlar şimdilik klasik iki yaklaşımda (reactive/template-driven) anlatılır.
Kaynak: Forms — overview

Yakından takip et (Deneysel)

Resource API — Experimental

Asenkron veriyi (ör. HTTP sonucu) sinyallerle yönetmek için tek tip model. resource/Resource hâlen experimental; API yüzeyi değişebilir.

import { resource, computed, Signal } from '@angular/core';
const userId: Signal<string> = getUserId();
export const userRes = resource({
  params: () => ({ id: userId() }),
  loader: ({ params }) => fetch(`/api/users/${params.id}`).then(r => r.json()),
});
export const firstName = computed(() => userRes.hasValue() ? userRes.value().firstName : undefined);

Zoneless — Stable (v20.2)

v20.0’da Developer Preview olan Zoneless; v20.2 ile stable. Artık zone.js’siz uygulamalar üretimde daha rahat ele alınabiliyor. (Yeni uygulamalar hâlen “varsayılan olarak zoneless” değil; provider ile opt-in.)
Kanıtlar: Angular ekibinin v20 duyurusu (DP) ve v20.2’de “promote to stable” commit/kayıtları ve güvenilir özetler.

Başlangıç adımı: zone.js polyfill’lerini kaldırın, ardından provideZonelessChangeDetection() ile etkinleştirin. Uygulamada zone kirliliğini (gereksiz CD tetikleri) azaltmak için de best-practices dokümanına göz atın.
Kaynaklar: Zoneless guide · 20.2’de “Zoneless stable” özeti

Kademeli benimseme planı (3 adım)

1) Envanter çıkar
Kritik rotalar (SEO/dönüşüm), ağır bileşenler, büyük listeler; ölçümler: TTFB, LCP, INP, CLS.

2) Mikro-POC yap

  • Bir bileşende local state’i Signals ile yeniden yaz.

  • Büyük listede @for + track dene.

  • Tek rota için RenderMode.Server ve istemcide Incremental Hydration’ı devreye al.

3) Aşamalı yayılım

  • Şablonlar: *ngIf/*ngFor → @if/@for (şematikle). Angular

  • Rotalar: kritik sayfaları SSR/Prerender, kalanını CSR. Angular

  • İstemci: withIncrementalHydration() ile “kullanıcıya yakın” bölgeler önce.

Sık düşülen noktalar

  • @for içinde track atlanmamalı; aksi halde gereksiz DOM değişimleri olur.

  • SSR kurulumunda tüm rotaları server’a almak yerine rota bazlı strateji uygulayın.

  • Resource API experimental; geniş mimari kararları bağlamadan önce küçük POC ile doğrulayın.

HttpClient ve v21’e dair not

Topluluk videosu “Angular 21 ile HttpClient’ın varsayılan sağlanacağı” mesajını veriyor; ancak resmî http setup hâlâ “özelleştirme gerektiğinde provideHttpClient() kullanın” şeklinde. SSR’de withFetch() tavsiye ediliyor; interceptors için fonksiyonel yaklaşım (withInterceptors). Bu başlık için resmî rehber ve referansları izleyin.
Resmî rehberler: Http setup (provideHttpClient) · Interceptors (fonksiyonel) · withFetch

Mini POC’ler (kopyala-yapıştır)

Incremental Hydration — hızlı başlangıç

import { bootstrapApplication, provideClientHydration, withIncrementalHydration } 
  from '@angular/platform-browser';
bootstrapApplication(AppComponent, {
  providers: [ provideClientHydration(withIncrementalHydration()) ],
});

Rota düzeyi render modları — örnek kurulum

import { provideServerRendering, withRoutes, ServerRoute, RenderMode } from '@angular/ssr';
const serverRoutes: ServerRoute[] = [
  { path: '',            renderMode: RenderMode.Prerender },
  { path: 'product/:id', renderMode: RenderMode.Server },
  { path: '**',          renderMode: RenderMode.Server },
];
export const serverProviders = [ provideServerRendering(withRoutes(serverRoutes)) ];

Control Flow şematiği — tüm projeyi dönüştür

ng generate @angular/core:control-flow


Kaynaklar (resmî dokümanlar & duyurular)

10 views
4 likes

Keywords

AngularAngular 2025PerformansGeliştirici DeneyimiDXKademeli BenimsemeSignalsControl FlowSSRHydrationIncremental HydrationZonelessResource APIAngular roadmapAngular v21