Frontend’de MCP Kullanımı

“AI Sonrası Frontend Ekosistemindeki Gelişmeler” yazısında MCP’yi tek paragrafla geçmiştim. Bu yazıda bir frontend uygulamasının MCP ile LLM araçlarına nasıl bağlanacağını ve Ocak 2026’da resmileşen MCP Apps ile UI’ın protokole nasıl girdiğini adım adım anlatıyorum.

1. MCP Nedir?

Model Context Protocol (MCP), LLM’lerin harici araçlar ve veri kaynakları ile standart, güvenli ve genişletilebilir şekilde konuşmasını sağlayan açık bir protokol. Her servis için ayrı entegrasyon yazmak yerine, servis bir kere MCP Server olarak yazılıyor ve tüm AI uygulamaları (Host) bunu kullanabiliyor.

• Host: Kullanıcının etkileşime girdiği AI uygulaması (bizim frontend uygulamamız)
• Client: Host içinde MCP Server ile bağlantıyı yöneten katman
• Server: Tool, Resource ve Prompt sunan servis (Jira, GitHub, veritabanı vb.)

2. Frontend Nerede Duruyor?

En sık yapılan hata MCP Server’a doğrudan tarayıcıdan bağlanmaya çalışmak. Önerilen mimari şöyle:

Tarayıcı (React UI)
  → Backend / BFF (LLM + MCP Client)
    → MCP Server’lar (GitHub, DB, CRM…)

• API anahtarları ve OAuth token’ları tarayıcıda değil backend’de kalır.
• LLM’in hangi tool’u çağırabileceği backend’de kontrol edilir.
• Frontend’in işi: sohbeti, tool çağrılarını, onayları ve sonuçları göstermek.

3. Backend’de MCP Client Oluşturmak

Resmi TypeScript SDK ile bir MCP Server’a Streamable HTTP üzerinden bağlanmak birkaç satır:

import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';
const client = new Client({ name: 'my-app', version: '1.0.0' });
await client.connect(
  new StreamableHTTPClientTransport(new URL('https://mcp.example.com/mcp'))
);
// Server’ın sunduğu araçları listele
const { tools } = await client.listTools();
// Bir aracı çağır
const result = await client.callTool({
  name: 'search_orders',
  arguments: { status: 'open' },
});

listTools ile gelen araçlar LLM’e tool olarak verilir. LLM bir aracı çağırmak istediğinde backend callTool ile MCP Server’a iletir, sonucu tekrar LLM’e ve stream ile UI’a gönderir.

4. Frontend’de Tool Çağrılarını Göstermek

Kullanıcı arka planda ne olduğunu görmek ister. Her tool çağrısı için UI’da şu durumlar olmalı:

• Çağrılıyor: Hangi araç, hangi parametrelerle (ör. search_orders — status: open)
• Onay bekliyor: Veri değiştiren araçlarda (create, update, delete) kullanıcıdan onay alınmalı
• Tamamlandı / Hata: Sonuç özeti veya hata mesajı

5. MCP Apps: UI Artık Protokolün Parçası

26 Ocak 2026’da resmi extension olarak yayınlanan MCP Apps ile MCP Server’lar sadece veri değil, interaktif UI da döndürebiliyor. Server bir tool’u bir UI resource (ui://) ile ilişkilendiriyor, Host bu UI’ı güvenli bir sandbox iframe içinde render ediyor. UI ile Host arasındaki iletişim ise MCP üzerinden (JSON-RPC) yapılıyor.

Frontend geliştirici için anlamı büyük: Yazdığınız bir form, chart veya dashboard artık sadece kendi uygulamanızda değil, MCP Apps destekleyen her AI istemcisinde (ör. VS Code) çalışabiliyor.

Yani “Your UI, Their Chat”: Bileşenlerinizi başkalarının sohbet ekranlarına taşıyabiliyorsunuz.

6. Güvenlik İçin Kontrol Listesi

• Token’ları tarayıcıya asla göndermeyin.
• Kullanıcı başına yetki verin; MCP Server’a herkes için tek bir admin token ile bağlanmayın.
• Veri değiştiren araçlarda human-in-the-loop onayı kullanın.
• Tool sonuçlarını “veri” olarak görün; içindeki talimatlara (prompt injection) karşı dikkatli olun.
• MCP Apps UI’larını mutlaka sandbox iframe içinde çalıştırın.

Sonuç

MCP ile frontend uygulamaları, her servis için ayrı entegrasyon yazmadan yüzlerce araca erişebilir hale geliyor. MCP Apps ile de frontend bileşenleri protokolün birinci sınıf vatandaşı oldu. Frontend’in yeni sorumluluğu; tool çağrılarını şeffaf, onaylanabilir ve güvenli şekilde kullanıcıya sunmak.

Kaynaklar

• MCP Apps — Model Context Protocol Blog
• MCP Apps Support in VS Code
• modelcontextprotocol/ext-apps

Connector was originally published in Frontend Development With JS on Medium, where people are continuing the conversation by highlighting and responding to this story.

İlk yazıda React 19.3, Next.js 16.4 ve TanStack tarafındaki büyük haberleri paylaşmıştım. Bu yazıda ise son bir haftada karşıma çıkan haberleri Güvenlik, Next.js, Components, TypeScript, Tooling ve Community şeklinde gruplara ayırdım.

Güvenlik

Next.js → 14 Ekim’de out-of-band güvenlik güncellemesi

Next.js ekibi 8 Ekim’de bir ön duyuru yayınladı. 14 Ekim 2026 Çarşamba günü, upstream bağımlılıklardaki üç açığı kapatan bir güvenlik güncellemesi çıkacak. Bunlardan ikisi Critical, biri High seviyesinde. İkisi aslında Eylül güvenlik sürümüne yetişecekti, ama upstream tarafla koordinasyon gerektiği için ertelenmiş.

Etkilenen sürümler, CVE numaraları ve upgrade adımları güncellemeyle birlikte paylaşılacak. Burada dikkat edilmesi gereken nokta şu, Critical seviyede iki açık var. Aralık’taki React2Shell sürecini hatırlayanlar bu tür duyuruların ne kadar hızlı aksiyon gerektirdiğini biliyor. O dönemi RSC ve React2Shell yazımda anlatmıştım.

Bu yüzden şimdiden yapılabilecekler şöyle:

• Takvim → 14 Ekim’i ekibinizle birlikte not edin.
• Pipeline → Next.js sürümünü hızlıca yükseltip deploy edebileceğiniz bir yolunuz olsun.
• Lockfile → Sadece package.json değil, deploy edilen uygulamanın gerçekten patch'li sürümü kullandığını kontrol edin.

Next.js 16.4 ile gelen experimental.agentUpgrade: 'security' ayarı da tam bu senaryo için var. next dev sırasında güvenlik açığı içeren sürümde olduğunuzu size (ya da agent'ınıza) hatırlatıyor.

Next.js

Parametre eşleştirme için yeni bir API önerisi

Next.js reposunda açık bir PR var: experimental.paramMatching. Cache Components açıkken, build sırasında generateStaticParams ile üretilmemiş yeni bir parametre değeri geldiğinde ne olacağını segment bazında belirlememizi sağlıyor. Dört mod var: not-found, blocking, fallback ve dynamic.

// app/[dil]/urunler/[kategori]/page.tsx
export const experimental_paramMatching = {
  dil: 'not-found',     // bilinmeyen dil → 404
  kategori: 'fallback', // yeni kategori → hemen fallback UI
};

Bu şu açıdan önemli, Pages Router’daki fallback: true | 'blocking' davranışını hatırlayanlar için App Router'da eksik kalan bir parça buydu. PR henüz merge'e hazır değil, ekibin kendisi de bunu belirtiyor. Ama Cache Components'ın Next.js 17'de default olacağını düşünürsek, bu API'nin yakında şekilleneceğini tahmin ediyorum.

Components

Base UI v1.9.0

9 Ekim’de Base UI v1.9.0 yayınlandı. Hoşuma giden değişiklikler şunlar:

• Menu → Yeni filtreleme davranışının preview’ı geldi.
• Performans → Combobox, Menu ve Select’te büyük listelerin mount süresi hızlanmış.
• Drawer → Swipe gesture’lar ve mobilde virtual keyboard yönetimi iyileştirilmiş.
• Accessibility → Focus ve etkileşimle ilgili çok sayıda düzeltme var.

Base UI 1.0'dan bu yana neredeyse her ay bir minor sürüm çıkarıyor ve her sürümde accessibility düzeltmeleri öne çıkıyor. shadcn/ui’ın Radix’in yanında Base UI ve React Aria’yı da desteklemesiyle birlikte headless kütüphane seçimi artık tek bir seçeneğe bağlı değil. Bu rekabet oldukça sevindirici, çünkü kalite çıtası her sürümde biraz daha yükseliyor.

TypeScript

TypeScript 7.1 beta ertelendi

TypeScript 7.1 Iteration Plan’a göre beta 6 Ekim’de çıkacaktı. Daniel Rosenwasser, API’leri daha fazla test edip beta sonrası değişiklikleri azaltmak için betayı yaklaşık iki hafta ertelediklerini duyurdu. RC ve stable tarihleri daha sonra açıklanacak.

7.1'in odağında Content Mapper, Emit ve Language Service API’lerinin stabilize edilmesi var. Buda bize, Go ile yeniden yazılan TypeScript’i typescript-eslint gibi araçların da kullanabilmesi olanağını sağlayacak. Yani TS7'nin hız avantajını sadece tsc tarafında değil, lint ve editör tarafında da görmeye başlayacağız. Bunun dışında es2026 target'ı ve Node 26 package maps desteği de planda.

Tooling

pnpm 12.11 → Bağımlılıklardan gelen agent skill’leri

9 Ekim’de çıkan pnpm 12.11.0 ilginç bir özellik getirdi. Direct dependency’lerin paketlerinde skills/<isim>/SKILL.md olarak gelen agent skill'leri, pnpm install sırasında projenizdeki .claude/skills gibi agent klasörlerine link'leniyor. Burada dikkat edilmesi gereken nokta şu, bu link'leme ancak pnpm approve ile onay verdiğinizde yapılıyor. Build script'leri ve agent skill'leri aynı onay ekranında inceleniyor.

Aynı sürümde gelen permissions ayarı da her bağımlılığın neye izinli olduğunu tek bir yerde tutuyor. pnpm permissions komutu verilen, reddedilen ve onay bekleyen izinleri listeliyor.

Bu şu açıdan önemli, kütüphaneler artık sadece kod değil, “bu kütüphane nasıl kullanılır” bilgisini de agent’lar için paketin içinde dağıtmaya başladı. Next.js’in Skills’leri, Video.js 10'un agent skill’i ve şimdi pnpm’in bunu install akışına bağlaması aynı trendin parçaları. Supply chain saldırılarının arttığı bir dönemde bunun onay mekanizmasıyla gelmesi de hoşuma gitti. Daha önce Agentic UI Bileşenleri yazımda bu dönüşümün UI tarafına değinmiştim, şimdi paket yöneticisi tarafına da ulaştı..

• Ink 8.0: React ile CLI uygulaması yazmamızı sağlayan Ink artık React 19.3 ve üstünü gerektiriyor. stdin/stdout artık generic Node stream olarak tiplendiği için TTY'ye özel property'ler yerine useWindowSize() öneriliyor.
• Medula: Coding agent’ların çalışan uygulamanın component’lerini MCP üzerinden inceleyip hook state’ini ve prop’larını değiştirebilmesini sağlayan headless bir devtools. React ve Next.js desteği var. DevTools mimarisini merak edenler için TanStack DevTools Mimarisi yazıma göz atabilirsiniz.
• Shaders → 190'dan fazla WebGPU efekt component’i MIT lisansıyla açık kaynak oldu, React binding’i de var

Community

• Why Don’t More Developers ‘Use the Platform’?: Nolan Lawson, geliştiricilerin neden native bir özellik varken npm’de React component’i aradığını sorguluyor. Örneğin dialog, popover ya da anchor positioning gibi özelliklerin artık tarayıcıda olduğunu düşününce, oldukça faydalı bir yazı olmuş.
• A Sustainable Web Career for When All This Blows Over: David Bushell’ın web kariyerinde hangi becerilere yatırım yapmak, hangi trendlerden uzak durmak gerektiğine dair kişisel görüşleri.

Ekim 2026 React Ekosistem Haberleri — 2 was originally published in Frontend Development With JS on Medium, where people are continuing the conversation by highlighting and responding to this story.

Her dönem olduğu gibi email ve diğer ortamlarda React konularında karşıma çıkan, hoşuma giden haberleri sizler ile paylaşıyor olacağım.

Eylül sonu ve Ekim’in ilk haftasında React konularında karşıma çıkan haberleri React, Next.js, Güvenlik, TanStack, React Compiler, Community ve CSS şeklinde gruplara ayırdım.

React

React 19.3

• React 19.3 → https://react.dev/blog/2026/09/09/react-19-3

React 19.3 ile birlikte uzun süredir Canary kanalında olan <ViewTransition> ve Fragment Refs API’leri artık stabil olarak kullanılabilir. Bu API’leri daha önce React Lab <Activity>, <ViewTransition> APIleri ve Ekim 2025 React Ekosistem Haberleri yazılarımda Canary olarak anlatmıştım, tam bir yıl sonra production’a hazır hale geldiler.

<ViewTransition>

Arkaplanda tarayıcının View Transition API’sini kullanıyor. Bileşen eklendiğinde (enter), silindiğinde (exit), güncellendiğinde (update) veya bir yerden başka bir yere taşındığında (share) animasyon uygulayabiliyorsunuz. Varsayılan animasyon cross-fade.

Burada dikkat edilmesi gereken nokta şu, sadece Transition olarak işaretlenen güncellemeler animasyonlu oluyor. Yani startTransition, useDeferredValue veya Suspense ile tetiklenen güncellemeler animate ediliyor, input'a yazmak gibi urgent güncellemeler ise animate edilmiyor. Bu şu açıdan önemli, kullanıcının yazdığı her harfin FadeIn ile gelmesini kimse istemez 😃

Bu sürümde hoşuma giden yenilik ise addTransitionType. Aynı state değişikliğine, değişikliğin nedenine göre farklı animasyon verebiliyorsunuz. Örneğin bir Carousel'de ileri ve geri geçişler..

startTransition(() => {
  addTransitionType('ileri');
  setIndex(i => i + 1);
});

<ViewTransition
  enter={{ ileri: 'sagdan-gir', geri: 'soldan-gir' }}
  exit={{ ileri: 'sola-cik', geri: 'saga-cik' }}
>
  <Slide />
</ViewTransition>

Animasyonların kendisi tamamen CSS tarafında tanımlanıyor. Buda bize Framer Motion gibi bir animasyon kütüphanesi kullanmadan, doğal React API’leri ile geçişleri yönetebilmemize olanak sağlıyor.

Bir de Suspense ile birlikte kullanımı var. Suspense’i <ViewTransition update="auto" default="none"> ile sardığınızda sadece Fallback → İçerik geçişi animate ediliyor. Ayrıca <img> etiketleri ViewTransition içerisindeyken yüklenene kadar Suspense'i tetikliyor, böylece resimlerin sayfaya aniden düşmesi engelleniyor.

Fragment Refs

Küçük ama geliştirici deneyimini ciddi şekilde iyileştiren bir değişiklik. Artık <Fragment>'a direkt ref verebiliyorsunuz. Önceden sadece ref alabilmek için ekstra <div> sarmaları kullanmak zorundaydık, bu da çoğu zaman layout'u bozuyordu.

Dönen FragmentInstance ile:

• Event → addEventListener, removeEventListener ile alt elemanlara event bağlayabiliyorsunuz.
• Focus → focus, focusLast, blur ile odak yönetimi yapabiliyorsunuz.
• Observer → observeUsing ile IntersectionObserver veya ResizeObserver bağlayabiliyorsunuz.

Özellikle analytics, lazy-load ve “bileşen ekranda görünüyor mu?” gibi senaryolar için daha önce Custom Hook’lar ile çözmeye çalıştığımız işler artık çok daha temiz yazılabilecek.

browser()

react-dom içerisinden gelen yeni bir API. use(browser()) çağrıldığında ilgili bileşen sunucuda render edilmiyor, sunucuda en yakın Suspense fallback gösteriliyor, client tarafında ise hydration sonrası normal şekilde render ediliyor.

function YerelSaat({ sunucuDegeri }) {
  if (sunucuDegeri) return <span>{sunucuDegeri}</span>;
  use(browser()); // Bundan sonrası sadece tarayıcıda çalışır
  return <span>{new Date().toLocaleTimeString('tr-TR')}</span>;
}

Güzel tarafı koşullu çağrılabilmesi. localStorage, timezone gibi sadece tarayıcıda olan bilgiler için yazdığımız useEffect + isMounted hack'lerine artık gerek kalmayacak.

Diğer Değişiklikler

• RSC → Server Component içerisinde <Context> doğrudan render edilebiliyor. Context için ayrı bir Provider wrapper bileşeni yazmaya gerek kalmıyor.
• Güvenlik → Trusted Types desteği geldi. React artık değerleri string’e çevirmeden DOM’a veriyor.
• Dikkat → Strict Mode’da Effect’ler artık hydration sırasında da 2 kez çalışıyor. Effect’leriniz idempotent değilse versiyon geçişinde sorun yaşayabilirsiniz.
• Transitions → Transition’lar artık birbirinden bağımsız render ediliyor, yavaş bir Transition diğerlerini bloklamıyor.

Next.js

Next.js 16.4

• Next.js 16.4 → https://nextjs.org/blog/next-16-4

Bu sürümdeki ana mesaj şu, Cache Components artık her Next.js uygulaması için önerilen model ve Next.js 17 ile default hale gelecek. create-next-app ile oluşturulan yeni projelerde zaten açık geliyor.

Cache Components’ı kısaca 'use cache' direktifi ile bileşen ağacının belirli kısımlarını cache'lenebilir olarak işaretlemek diye özetleyebiliriz. Bileşen seviyesinde bir Cache-Control header'ı gibi düşünebilirsiniz. App Router'daki eski implicit cache davranışlarının yerini alıyor. use client ve use server direktiflerinden sonra artık use cache da hayatımıza girmiş oldu..

• ensureStatic → Bir route veya layout’a export const ensureStatic = 'navigation' eklediğinizde, o sayfaya yanlışlıkla dinamik bir bileşen eklenirse build hata veriyor. Blog, e-ticaret, landing page gibi statik kalması gereken sayfalar için güzel bir güvenlik ağı.
• navigation() → <Link prefetch> her görünen link için tüm veriyi önceden çekiyordu. Artık bir bileşenin başında await navigation() çağırdığınızda o bileşen prefetch sırasında atlanıyor, sadece gerçek navigasyonda yükleniyor. Örneğin yazının başlığı prefetch edilip yorumlar tıklamaya bırakılabiliyor.
• Agent → next upgrade --agent komutu ile AI agent'lara versiyona özel migration rehberi ve codemod'lar veriliyor. AI sonrası framework'lerin agent'lar için de araç üretmesi ilginç bir trend.
• Turbopack → Disk cache %20–25 daha küçük, server HMR lazy hale geldi ve production bundle boyutları küçüldü.
• Rust React Compiler (Deneysel) → Bellek kullanımı %30, derleme süresi %15 azalmış.

Güvenlik

TanStack Start kullananlar için önemli bir uyarı.

• TanStack Start Security Update (CVE-2026–102989)

TanStack Start’ın server function response’larında kritik bir reflected XSS açığı bulundu ve 10 üzerinden 9.3 ile derecelendirildi. Saldırgan, kimlik doğrulama olmadan hazırladığı bir URL ile uygulamanızın origin’inde kendi JavaScript kodunu çalıştırabiliyordu. Aralık ayındaki RSC ve React2Shell olayından sonra server tarafına kayan React framework’lerinde güvenliğin ne kadar kritik olduğunu bir kez daha görmüş olduk.

Yapılması gerekenler:

• @tanstack/react-start → 1.168.60 veya üstüne yükseltin.
• Lockfile içerisinde @tanstack/start-server-core versiyonunun 1.169.39 veya üstü olduğunu kontrol edin.
• Mutlaka yeniden build alıp deploy edin, sadece lokalde güncellemek canlıdaki uygulamayı korumuyor.

TanStack

• TanStack Charts 1.0: TanStack’in chart kütüphanesi stabil versiyona ulaştı. Mark (line, point, bar) ve Scale kavramları üzerine kurulu, framework agnostic bir core ve React adapter’ı bulunuyor. Default SVG kullanıyor, Canvas ayrı import olarak geliyor, D3 scale’leri ile de uyumlu. Daha önceki yazılarımda grafikler için Recharts kullanmıştım, yeni projelerde denemek istediğim bir kütüphane oldu.
• TanStack Markdown + Highlight 1.0: Dokümantasyon ve AI stream’leri için küçük ve hızlı bir Markdown renderer ve syntax highlighter. Agentic UI’larda LLM cevaplarının stream edilerek gösterilmesi düşünüldüğünde oldukça işe yarayacak bir araç. (Agentic UI konusunda yazdığım yazıya buradan erişebilirsiniz.)
• Reliable Query Prefetching with TanStack Router: TkDodo’nun bu yazısı TanStack Router + Query kullanan herkesin karşılaştığı bir probleme değiniyor. Loader’da prefetch edilen query ile bileşende kullanılan query zamanla birbirinden ayrışıyor. Örneğin bileşene yeni bir search param eklenip loader’a eklenmesi unutulduğunda yanlış veri prefetch ediliyor, bileşen tekrar fetch ediyor ve waterfall oluşuyor. Önerdiği çözüm query options’ı route’un context fonksiyonunda tek bir yerde oluşturup hem loader hem de bileşen içerisinde aynısını kullanmak.

export const Route = createFileRoute('/projeler/$id')({
  loaderDeps: ({ search }) => ({ sekme: search.sekme }),
  context: ({ params, deps }) => ({
    projeQuery: projeQueryOptions(params.id, deps.sekme),
  }),
  loader: ({ context }) =>
    context.queryClient.ensureQueryData(context.projeQuery),
});

// Bileşen içerisinde
const { projeQuery } = Route.useRouteContext();
const { data } = useSuspenseQuery(projeQuery);

React Compiler

• Making React Context Cheap with React Compiler: React’ta hala native context selector bulunmuyor, yani context değeri değiştiğinde onu kullanan tüm bileşenler re-render oluyor. Yazıda 5.000 radio input’u aynı state’e bağlayan bir benchmark yapılmış ve React Compiler’ın tek başına context selector’lara yakın bir performans kazancı sağladığı görülüyor. Yani Compiler kullanıyorsanız sırf performans için context’i parçalara bölmenize veya use-context-selector gibi kütüphanelere ihtiyacınız azalıyor.

Community

• React Foundation → Linux Foundation çatısı altındaki React Foundation, 4–5 Kasım’da Gana/Accra’da ilk resmi React konferansını düzenliyor. 10–12 Kasım’da Londra’da da Contributors Summit yapılacak.
• This Week in React → Sebastien Lorber’in hazırladığı newsletter 300. sayıya ulaştı. React haberlerini haftalık takip etmek için oldukça faydalı bir kaynak.

CSS

• Getting Started with Anchor Positioning: Josh W. Comeau’nun interaktif örnekler ile anlattığı yazı. Tooltip, Popover, Dropdown gibi bileşenleri konumlandırmak için kullandığımız Floating UI / Popper gibi kütüphanelerin yerini zamanla CSS Anchor Positioning alacak gibi görünüyor.React Ekosisteminde Ekim 2026: React 19.3, Next.js 16.4 ve TanStack’te Kritik Güncellemeler

Ekim 2026 React Ekosistem Haberleri was originally published in Frontend Development With JS on Medium, where people are continuing the conversation by highlighting and responding to this story.

News

Her dönem olduğu gibi email ve diğer ortamlarda React konularında karşıma çıkan, hoşuma giden haberleri sizler ile paylaşıyor olacağım.

• BaseUI V1 yayınlandı.
• Dan Abramov tarafından RSC çalışmasını inceleyebileceğiniz RSC Explorer yayınlandı.
• Chrome DevTools MCP sayesinde browser session debug edebiliyorsunuz.
• Spectrum ve React Aria kütüphanelerinde güncellemeler
• i’m gonna crash out (react2shell vulnerability)
• Redux connect as deprecated
• React 19.2: The async shift is finally here
• The State of TanStack, Two Years of Full-Time OSS
• Vite8 Beta
• JSDoc *is* TypeScript
• Introducing iceberg-js: A JavaScript Client for Apache Iceberg
• TanStack Start: New competitor to Next.js
• Fiber
• TanStack AI Alpha: Your AI, Your Way

Aralık 2025 React Ekosistem Haberleri was originally published in Frontend Development With JS on Medium, where people are continuing the conversation by highlighting and responding to this story.

React Ekosistemi

React Server Components daha önceki yazılarımda hep bazı problemli noktalarına değinmiştim. Vendor bağımlılık, Güvenlik, Debugging, Karmaşıklık vb birçok konu RSC konusunda kafama yatmamıştı. Bugün karşıma sıkça çıkan React2Shell Güvenlik problemine biraz değineceğim.

Zamanında 2023 Kasım ayında şu şekilde bir yazı paylaşmıştım → Next.js React’ın Geleceğine Mi Karar Veriyor ? veya Yerine mi deseydim :) çünkü burada bir Next.js sunumu olmuştu ve RSC konusunda ve React’ı ilgilendiren konularda bir takım duyurular React konferansından önce Next.JS de duyrulmuş ekosistemden çokça tepki almıştı. Burada yeni bir model sunuluyordu. İsteyenler o zamanlar için yukarıdaki yazımı okuyabilirler.

O zamanlar konu ile ilgili aklımdaki soru işaretlerine şu şekilde değinmiştim.

• Vendor bağımlılık zaten ekosistemde ciddi bir kırılım yaşattı. React Kütüphane mantığından → Framework geçişte alternatif 2,3 yöntem kaldı bunlardan en ağır basanıda Next.js dir, ardından ReactRouter ve TanStackStart geliyor.
• Güvenlik problemi CVE-2025–55182 şeklinde bir güvenlik açığı oluştu. Özetle burada CVE-2025–55182, React ekosistemi için çok kritik bir güvenlik açığı olduğundan bahsediyor. React Server Components’te Server Function endpoint’leri, HTTP üzerinden gelen payload’ları güvensiz şekilde deserialize ediyor.

Bu da şu anlama geliyor:

• Kimlik doğrulama gerekmeden
• Sadece bir HTTP isteğiyle
• Sunucu üzerinde keyfi kod çalıştırılabiliyor

Bu konuda Efe Karasakal türkçe güzel bir video hazırlamış ben olayın Next.js tarafında nasıl işletildi Chunkların sunucu ile istemci arasında giden gelen veriye nasıl bir kod enjekte edileceğini anlattı kısmın resmini ekledim. Aşağıdan da ilgili videoyu izleyebilirsiniz.

Tabi bunun sonrasında Next.JS 11 Aralık’da bu güvenlik açığı için bir patch yayınladı.

• Next.js Security Update: December 11, 2025

Tabiki bu süreçte bu açıktan faydalanmak isteyen ve sunuculara ataklar gerçekleştirdiler.

• React2Shell and related RSC vulnerabilities threat brief: early exploitation activity and threat actor techniques

Burada hatta Cloudflare bu güvenlik açığı için bir koruma devreye sokmaya çalışırken başka uyumsuzluklar yüzünden bir outage olayı yaşadı detayları aşağıda

• Cloudflare outage on December 5, 2025

Sonuç olarak RSC dediğimiz kavramın kullanılması hem çok karmaşık, hem de sizi belli frameworklere çok bağımlı hale getirip olayın arkaplanını takip etmeyi zorlaştırıyor.

RSC’nin arkaplanda nasıl işletildiğini Next.JS ve TanStack Router farklı yaklaşımlarını anlattıldığı aşağıdaki i’m gonna crash out (react2shell vulnerability) videosunu izlemenizi öneririm.

RSC ve React2Shell was originally published in Frontend Development With JS on Medium, where people are continuing the conversation by highlighting and responding to this story.

Kasım 2025 React Ekosistem Haberleri

Her dönem olduğu gibi email ve diğer ortamlarda React konularında karşıma çıkan, hoşuma giden haberleri sizler ile paylaşıyor olacağım.

Genel

• JS Algorithms: JS ile DataStructures ve Algoritma öğrenmek için oldukça iyi bir kaynak. Her bir konunun görselleştirilmesi ve JS kullanımı anlatılıyor .
• SourceMaps Kullanımı : Understanding Sourcemaps: From Development to Production
• JS Engine Karşılaştırmaları
• State Of Node.JS
• Electron vs. Tauri
• OWASP 10

TypeScript

• TypeScript’te Discriminated Union’lar için Omit Kullanımı
• Embedding TypeScript
• TypeScript’in AI Alanındaki Kullanımında Yükseliş
• A new developer joins GitHub every second as AI leads TS

React, Svelte

• React 19 Error Boundary Behaves Differently
• SveltePlot combines the concise API and concepts of Observable Plot with Svelte reactivity. It is not just a Svelte-wrapper, but re-implemented from scratch on top of D3. But what makes SveltePlot better than the existing visualization frameworks in Svelte?
• React and Remix Choose Different Futures

Components

• Ant Design 6.0 is Here! : Ant kütüphanesini beğenip uzun süredir uygulamarımda kullandığım için oldukça sevindirici bir haber.

TanStack

• The State of TanStack, Two Years of Full-Time OSS: TanStack açık kaynaklı kod alanında yaptıkları bu süreçte yaşadıklarını anlattığı blog postu..
• Tanstack Parcer Beta: Framework agnostic debouncing, throttling, rate limiting, queuing, and batching utilities gibi yetenekler sağlıyor.
• Tanstack Route Matching Improvements: TanStack Route matching de değiştirilen algoritma sayesinde 20K x hızlanmış durumda
• TanStack DB 0.5 — Query-Driven Sync
• Next.JS ve TanStack Start seçimi konusunda
• TanStack 4 Milyar download ulaştı
• Directives and the Platform Boundary

Redux

• Redux Toolkit 2.11.0: This feature release upgrades our Immer dependency to v11 to pick up the additional recent performance optimizations, adds a new refetchCachedPages option to allow only fetching the first cached page, and fixes an issue with regex ignore paths in the immutability middleware.

Kasım 2025 React Ekosistem Haberl was originally published in Frontend Development With JS on Medium, where people are continuing the conversation by highlighting and responding to this story.