26:I[11710,["/_next/static/immutable/chunks/44y6fgnry5ap9.js","/_next/static/immutable/chunks/0t-su5g1z5lkv.js","/_next/static/immutable/chunks/3p8077oyaqvw5.js","/_next/static/immutable/chunks/25wxj7yewaz6b.js","/_next/static/immutable/chunks/366pl3cxrg8gm.js","/_next/static/immutable/chunks/1_yk54qm8rooz.js","/_next/static/immutable/chunks/20zcbpwn81stk.js"],"PostsGrid"] 27:T514,'use client'; import { useState } from 'react'; import { updateUsername } from './actions'; export default function ProfileForm({ currentName }: { currentName: string }) { const [name, setName] = useState(currentName); const [isPending, setIsPending] = useState(false); async function handleSubmit(formData: FormData) { const newName = formData.get('name') as string; // 1. Start loading state (Pessimistic) setIsPending(true); try { // 2. Wait for server response const result = await updateUsername(newName); // 3. Only update UI if server succeeds setName(result.newName); alert('Profile updated successfully!'); } catch (error) { alert('Failed to update profile.'); } finally { // 4. Stop loading state setIsPending(false); } } return ( ); }28:T691,'use client'; import { useOptimistic } from 'react'; import { addCommentAction } from './actions'; type Comment = { id: number; text: string; sending?: boolean }; export default function CommentSection({ initialComments }: { initialComments: Comment[] }) { // 1. Define optimistic state and the update logic const [optimisticComments, addOptimisticComment] = useOptimistic( initialComments, (state, newCommentText: string) => [ ...state, { id: Date.now(), text: newCommentText, sending: true } // Temporary state ] ); async function handleAction(formData: FormData) { const text = formData.get('comment') as string; // 2. Update UI immediately addOptimisticComment(text); // 3. Perform the actual server operation try { await addCommentAction(text); // When server action finishes, the 'real' data will replace this state } catch (e) { console.error("Rolling back due to error"); } } return (

{comment.text} {comment.sending && (Sending...)}

); }29:T542,'use client'; import { useState } from 'react'; import { updateUsername } from './actions'; export default function ProfileForm({ currentName }: { currentName: string }) { const [name, setName] = useState(currentName); const [isPending, setIsPending] = useState(false); async function handleSubmit(formData: FormData) { const newName = formData.get('name') as string; // 1. Yükleme durumunu başlat (Pessimistic) setIsPending(true); try { // 2. Sunucu yanıtını bekle const result = await updateUsername(newName); // 3. Sadece sunucu başarılıysa UI'ı güncelle setName(result.newName); alert('Profil başarıyla güncellendi!'); } catch (error) { alert('Güncelleme başarısız oldu.'); } finally { // 4. Yükleme durumunu kapat setIsPending(false); } } return ( ); }2a:T6ab,'use client'; import { useOptimistic } from 'react'; import { addCommentAction } from './actions'; type Comment = { id: number; text: string; sending?: boolean }; export default function CommentSection({ initialComments }: { initialComments: Comment[] }) { // 1. İyimser state'i ve güncelleme mantığını tanımlayın const [optimisticComments, addOptimisticComment] = useOptimistic( initialComments, (state, newCommentText: string) => [ ...state, { id: Date.now(), text: newCommentText, sending: true } // Geçici durum ] ); async function handleAction(formData: FormData) { const text = formData.get('comment') as string; // 2. UI'ı anında güncelleyin addOptimisticComment(text); // 3. Gerçek sunucu işlemini başlatın try { await addCommentAction(text); // Sunucu işlemi bittiğinde gerçek veri bu state'in yerini alacaktır } catch (e) { console.error("Hata nedeniyle geri alınıyor"); } } return (

{comment.text} {comment.sending && (Gönderiliyor...)}

); }2b:T4f0,import { Suspense } from 'react'; import { cacheLife } from 'next/cache'; import { cookies } from 'next/headers'; import { Navbar } from './components/Navbar'; // 1. STATIC CONTENT // The Navbar and layout are part of the Static Shell. export default function ProductPage({ params }) { return (

{/* 2. CACHED CONTENT */} {/* Loads with the shell, data is cached. */} {/* 3. DYNAMIC CONTENT */} {/* Streams in later using Suspense. */} Loading your cart...}>

); } // Component: ProductDetails (Cached) async function ProductDetails({ id }) { 'use cache'; // Cache directive cacheLife('hours'); // Profile: Keep fresh for hours const product = await db.getProduct(id); return (

{product.title}

{product.description}

); } // Component: UserCart (Dynamic) async function UserCart() { const cookieStore = await cookies(); // Opts into dynamic rendering const cartId = cookieStore.get('cartId')?.value; const cart = await db.getCart(cartId); return

Items in Cart: {cart.totalItems}

; }2c:T52d,import { Suspense } from 'react'; import { cacheLife } from 'next/cache'; import { cookies } from 'next/headers'; import { Navbar } from './components/Navbar'; // 1. STATIC CONTENT // Navbar ve sayfa düzeni Static Shell'in parçasıdır. export default function ProductPage({ params }) { return (

{/* 2. CACHED CONTENT */} {/* Shell ile birlikte yüklenir, veri önbellekten gelir. */} {/* 3. DYNAMIC CONTENT */} {/* Suspense sayesinde sonradan stream edilir. */} Sepet yükleniyor...}>

); } // Bileşen: Ürün Detayı (Cached) async function ProductDetails({ id }) { 'use cache'; // Önbellekleme direktifi cacheLife('hours'); // Profil: Veriyi saatlerce taze tut const product = await db.getProduct(id); return (

{product.title}

{product.description}

); } // Bileşen: Kullanıcı Sepeti (Dynamic) async function UserCart() { const cookieStore = await cookies(); // Dinamik render'ı tetikler const cartId = cookieStore.get('cartId')?.value; const cart = await db.getCart(cartId); return

Sepetteki ürün sayısı: {cart.totalItems}

; }6:["$","section",null,{"className":"mx-auto w-full max-w-[68rem] px-6 pt-10 pb-20","children":[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"ItemList\",\"name\":\"Bloglar\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"url\":\"https://hamzadogan.dev/tr/blogs/redis-persistence-sentinel-cluster-and-hash-slots\",\"name\":\"Redis Nedir? Sentinel, Cluster, Hash Slots ve Redis Mimarisi\"},{\"@type\":\"ListItem\",\"position\":2,\"url\":\"https://hamzadogan.dev/tr/blogs/optimistic-vs-pessimistic-ui-nextjs-guide\",\"name\":\"Optimistic vs. Pessimistic UI: Next.js Server Actions Rehberi\"},{\"@type\":\"ListItem\",\"position\":3,\"url\":\"https://hamzadogan.dev/tr/blogs/nextjs-ppr-cache-components\",\"name\":\"Next.js Partial Prerendering ve Cache Components\"},{\"@type\":\"ListItem\",\"position\":4,\"url\":\"https://hamzadogan.dev/tr/blogs/react-19-performance-revolution\",\"name\":\"React 19 Performansına Derinlemesine Bir Bakış\"}]}"}}],["$","div",null,{"className":"border-b-2 border-border pb-6","children":[["$","h1",null,{"className":"text-2xl font-medium tracking-tight","children":"Bloglar"}],["$","p",null,{"className":"mt-2 text-muted-foreground","children":"Geliştirdiğim ve öğrendiğim şeyler üzerine notlar — yazılım, tasarım ve aradaki kararlar."}]]}],["$","div",null,{"className":"mt-8","children":["$","$L26",null,{"posts":[{"id":"8e66f54a-a75c-44b5-8b9e-61a6fdc1cdd2","slug":"redis-persistence-sentinel-cluster-and-hash-slots","status":"published","title_en":"What is Redis? Understanding Sentinel, Cluster, Hash Slots, and Redis Architecture","title_tr":"Redis Nedir? Sentinel, Cluster, Hash Slots ve Redis Mimarisi","excerpt_en":"Master Redis architecture. From RDB/AOF persistence to Sentinel failover, and deep dive into Redis Cluster's 16,384 Hash Slots, Resharding, and Gossip Protocol.","excerpt_tr":"Redis mimarisinde uzmanlaşın. RDB/AOF kalıcılığından Sentinel'e; Redis Cluster'ın 16.384 Hash Slot mantığı, Resharding ve Gossip protokolüne derin bir bakış.","content_en":{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"The Problem: Why is Your Application Slowing Down?","type":"text"}]},{"type":"paragraph","content":[{"text":"As your application grows, your primary database (like PostgreSQL or MySQL) starts to struggle. Every time a user requests data, the system has to search through millions of rows on a physical disk. This creates a bottleneck. Have you ever wondered why your dashboard takes seconds to load or why your API starts failing under heavy traffic? The problem is 'Disk I/O' and the solution requires a faster layer.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"The Solution: Redis","type":"text"}]},{"type":"paragraph","content":[{"text":"This is where Redis comes into play. Redis acts as a high-speed lane for your data. Instead of waiting for slow disk operations, Redis stores data in the system's RAM, allowing you to serve requests in sub-milliseconds. It's not just a database; it's a performance powerhouse.","type":"text"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"What is Redis?","type":"text"}]},{"type":"paragraph","content":[{"text":"Redis (Remote Dictionary Server) is an open-source, in-memory data structure store. It is used as a database, cache, message broker, and streaming engine. Unlike traditional databases that store data on disk, Redis keeps everything in memory, which is why it is incredibly fast.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Key Benefits of Redis:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Cache:","type":"text","marks":[{"type":"bold"}]},{"text":" Stores frequently accessed data in memory to reduce database load and speed up response times.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Rate Limiting:","type":"text","marks":[{"type":"bold"}]},{"text":" Prevents API abuse by counting and limiting the number of requests from a specific user or IP.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Queue (Message Broker):","type":"text","marks":[{"type":"bold"}]},{"text":" Manages background tasks effectively using lists or Pub/Sub mechanisms.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Session Management:","type":"text","marks":[{"type":"bold"}]},{"text":" Keeps user session data (like login info) persistent and extremely fast to access.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Real-time Analytics:","type":"text","marks":[{"type":"bold"}]},{"text":" Perfect for counting page views, likes, or active users in real-time with atomic increments.","type":"text"}]}]}]},{"type":"horizontalRule"},{"type":"postImage","attrs":{"alt":"how-it-works-redis","src":"https://res.cloudinary.com/dsotvo4bj/image/upload/v1772443335/RedisDiagram_qjnz0g.webp","width":1461,"height":735,"layout":"inline","caption":"","publicId":"RedisDiagram_qjnz0g"}},{"type":"heading","attrs":{"level":3},"content":[{"text":"Redis Basic Logic (System Flow)","type":"text"}]},{"type":"paragraph","content":[{"text":"The most important feature of Redis is its ","type":"text"},{"text":"In-Memory","type":"text","marks":[{"type":"bold"}]},{"text":" nature. While a standard DB works as 'Application → Disk', the Redis flow works as 'Application → RAM'.","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"The Volatility Problem:","type":"text","marks":[{"type":"bold"}]},{"text":" Since RAM is volatile, if the server shuts down or crashes, all data stored in memory is lost instantly. To prevent this, Redis offers ","type":"text"},{"text":"Persistence","type":"text","marks":[{"type":"bold"}]},{"text":" mechanisms to save data to the disk.","type":"text"}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Redis Persistence (Saving Data to Disk)","type":"text"}]},{"type":"paragraph","content":[{"text":"Redis provides two primary methods to ensure your data survives a restart: ","type":"text"},{"text":"RDB","type":"text","marks":[{"type":"bold"}]},{"text":" and ","type":"text"},{"text":"AOF","type":"text","marks":[{"type":"bold"}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"1. RDB (Redis Database Snapshot)","type":"text"}]},{"type":"paragraph","content":[{"text":"The logic behind RDB is taking a 'photograph' of your data at specific intervals. It captures the entire state of the RAM and writes it to a compact file on the disk.","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"Flow:","type":"text","marks":[{"type":"bold"}]},{"text":" Redis Memory → Snapshot Process → ","type":"text"},{"text":"dump.rdb","type":"text","marks":[{"type":"code"}]},{"text":" file","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Example Timeline:","type":"text","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"10:00 → Snapshot taken","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"10:05 → Snapshot taken","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"10:10 → Snapshot taken","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"The Risk:","type":"text","marks":[{"type":"bold"}]},{"text":" If the 10:05 snapshot completes and the server crashes at 10:06, all data between 10:05 and 10:06 is ","type":"text"},{"text":"permanently lost","type":"text","marks":[{"type":"bold"}]},{"text":" because it wasn't captured in a snapshot yet.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Advantages:","type":"text","marks":[{"type":"bold"}]},{"text":" Very small disk footprint, lightning-fast restoration during startup, and minimal CPU usage.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Disadvantages:","type":"text","marks":[{"type":"bold"}]},{"text":" Significant risk of data loss between snapshots.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"2. AOF (Append Only File)","type":"text"}]},{"type":"paragraph","content":[{"text":"Instead of taking snapshots, AOF keeps a continuous log. Every single 'write' command sent to Redis is appended to a log file in real-time.","type":"text"}]},{"type":"codeBlock","content":[{"text":"// Example Commands Logged:\nSET user:1 \"Ali\"\nINCR views\nLPUSH messages \"hello\"","type":"text"}]},{"type":"paragraph","content":[{"text":"When the server restarts, Redis simply 'replays' this diary of commands to rebuild the memory state from scratch.","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"Flow:","type":"text","marks":[{"type":"bold"}]},{"text":" Redis Restart → Read AOF File → Re-run Commands → Memory Rebuilt","type":"text"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Advantages:","type":"text","marks":[{"type":"bold"}]},{"text":" Maximum durability with almost zero data loss.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Disadvantages:","type":"text","marks":[{"type":"bold"}]},{"text":" The log file can become very large over time, and restoring data is slower compared to RDB since every command must be re-executed.","type":"text"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Comparison: RDB vs AOF","type":"text"}]},{"type":"paragraph","content":[{"text":"Choosing the right persistence method depends on your needs. Here is a quick comparison table:","type":"text"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","content":[{"type":"paragraph","content":[{"text":"Feature","type":"text"}]}]},{"type":"tableHeader","content":[{"type":"paragraph","content":[{"text":"RDB","type":"text"}]}]},{"type":"tableHeader","content":[{"type":"paragraph","content":[{"text":"AOF","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"text":"Method","type":"text"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"text":"Snapshot","type":"text"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"text":"Command Log","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"text":"Performance","type":"text"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"text":"Very Fast","type":"text"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"text":"Slightly Slower","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"text":"Data Loss","type":"text"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"text":"Possible","type":"text"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"text":"Minimal","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"text":"Restore Speed","type":"text"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"text":"Fast","type":"text"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"text":"Slower","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"Best Practice for Production:","type":"text","marks":[{"type":"bold"}]},{"text":" In most real-world scenarios, developers use ","type":"text"},{"text":"RDB and AOF together","type":"text","marks":[{"type":"bold"}]},{"text":". RDB handles fast backups and disaster recovery, while AOF ensures data safety and durability.","type":"text"}]},{"type":"horizontalRule"},{"type":"postImage","attrs":{"alt":"","src":"https://res.cloudinary.com/dsotvo4bj/image/upload/v1772443335/ClusterAndSentinel_d2bdri.webp","width":1029,"height":549,"layout":"inline","caption":"","publicId":"ClusterAndSentinel_d2bdri"}},{"type":"heading","attrs":{"level":3},"content":[{"text":"Redis Sentinel: The Failover Manager","type":"text"}]},{"type":"paragraph","content":[{"text":"High availability is crucial for modern apps. If you only have one Redis instance (Primary) and it crashes, your entire system goes down. This is where ","type":"text"},{"text":"Redis Sentinel","type":"text","marks":[{"type":"bold"}]},{"text":" acts as a guardian for your cluster.","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"The Goal:","type":"text","marks":[{"type":"bold"}]},{"text":" To monitor your Redis instances and automatically handle the recovery process (failover) if something goes wrong.","type":"text"}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"How Sentinel Works (The Flow)","type":"text"}]},{"type":"paragraph","content":[{"text":"Sentinel nodes constantly monitor the ","type":"text"},{"text":"Primary","type":"text","marks":[{"type":"bold"}]},{"text":" node. If the Primary becomes unresponsive, the following automated flow begins:","type":"text"}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Detection:","type":"text","marks":[{"type":"bold"}]},{"text":" A Sentinel node notices the Primary is down.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Quorum Decision:","type":"text","marks":[{"type":"bold"}]},{"text":" Sentinels talk to each other. If a majority (the Quorum) agrees that the Primary is indeed dead, the failover process starts.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Promotion:","type":"text","marks":[{"type":"bold"}]},{"text":" Sentinel picks one of the healthy ","type":"text"},{"text":"Replica","type":"text","marks":[{"type":"bold"}]},{"text":" nodes and 'promotes' it to be the ","type":"text"},{"text":"New Primary","type":"text","marks":[{"type":"bold"}]},{"text":".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Reconfiguration:","type":"text","marks":[{"type":"bold"}]},{"text":" The remaining replicas are told to follow the new Primary, and the Client (your app) is notified of the new address.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Core Tasks of Sentinel:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"1. Monitoring:","type":"text","marks":[{"type":"bold"}]},{"text":" Continuously checking if your Primary and Replica instances are working as expected.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"2. Automatic Failover:","type":"text","marks":[{"type":"bold"}]},{"text":" If the Primary fails, Sentinel promotes a Replica to Primary without human intervention.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"3. Service Discovery:","type":"text","marks":[{"type":"bold"}]},{"text":" Sentinel acts as a source of truth for your application. Your app asks Sentinel: \"Who is the current Primary?\" and Sentinel provides the correct IP address.","type":"text"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Redis Cluster: Scaling to Infinity","type":"text"}]},{"type":"paragraph","content":[{"text":"When one server's RAM isn't enough (e.g., you have 1TB of data), we use ","type":"text"},{"text":"Redis Cluster","type":"text","marks":[{"type":"bold"}]},{"text":". This allows you to split your data across multiple servers (Nodes).","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"1. The Magic of Hash Slots","type":"text"}]},{"type":"paragraph","content":[{"text":"How does Redis know which server has which data? It uses ","type":"text"},{"text":"16,384 Hash Slots","type":"text","marks":[{"type":"bold"}]},{"text":". Think of these as numbered drawers in a giant filing cabinet. Every key you save is assigned to one of these drawers using a simple math formula:","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"Formula:","type":"text","marks":[{"type":"bold"}]},{"text":" ","type":"text"},{"text":"hash(key) % 16384","type":"text","marks":[{"type":"code"}]}]}]},{"type":"paragraph","content":[{"text":"Example:","type":"text","marks":[{"type":"bold"}]},{"text":" If you save ","type":"text"},{"text":"user:1","type":"text","marks":[{"type":"code"}]},{"text":", Redis calculates its hash, and if the result is ","type":"text"},{"text":"9000","type":"text","marks":[{"type":"code"}]},{"text":", it goes to whichever server is responsible for slot 9000 (e.g., Node 2).","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"2. Resharding (Adding New Nodes)","type":"text"}]},{"type":"paragraph","content":[{"text":"When your cluster grows, you can add ","type":"text"},{"text":"Node 4","type":"text","marks":[{"type":"bold"}]},{"text":". Redis then performs ","type":"text"},{"text":"Resharding","type":"text","marks":[{"type":"bold"}]},{"text":", which means it re-distributes the slots. Instead of 3 servers sharing the 16,384 slots, now 4 servers share them. This is true ","type":"text"},{"text":"Horizontal Scaling","type":"text","marks":[{"type":"bold"}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"3. Gossip Protocol: The Social Network of Nodes","type":"text"}]},{"type":"paragraph","content":[{"text":"Nodes in a cluster are constantly 'talking' to each other. This is called the ","type":"text"},{"text":"Gossip Protocol","type":"text","marks":[{"type":"bold"}]},{"text":". They ask each other: \"Are you alive? Is Node 3 still responding?\"","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Health Checks:","type":"text","marks":[{"type":"bold"}]},{"text":" If the majority of nodes agree that Node 1 is down, they automatically trigger a failover.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Self-Healing:","type":"text","marks":[{"type":"bold"}]},{"text":" A Replica is promoted to Primary instantly, ensuring the cluster stays online.","type":"text"}]}]}]},{"type":"postImage","attrs":{"alt":"","src":"https://res.cloudinary.com/dsotvo4bj/image/upload/v1772443335/RedisDataTypes_c0qsig.webp","width":810,"height":310,"layout":"inline","caption":"","publicId":"RedisDataTypes_c0qsig"}},{"type":"heading","attrs":{"level":3},"content":[{"text":"Redis Data Types: When to Use Which?","type":"text"}]},{"type":"paragraph","content":[{"text":"Redis is not just a simple key–value store. Here are the flexible data structures it provides:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Strings:","type":"text","marks":[{"type":"bold"}]},{"text":" The most basic type. Stores text, numbers, or binary data. Ideal for counters.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Hashes:","type":"text","marks":[{"type":"bold"}]},{"text":" Consist of field–value pairs. Perfect for storing objects such as user profiles.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Lists:","type":"text","marks":[{"type":"bold"}]},{"text":" Ordered collections of strings. Commonly used for queue systems.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Sets:","type":"text","marks":[{"type":"bold"}]},{"text":" Unordered collections of unique elements. Useful for tracking unique visitors or tagging.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Sorted Sets (ZSets):","type":"text","marks":[{"type":"bold"}]},{"text":" Each element has a score. Provides automatic ranking, ideal for leaderboards.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Bitmaps:","type":"text","marks":[{"type":"bold"}]},{"text":" Allows bit-level operations. Enables tracking daily user activity with very low memory usage.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"HyperLogLog:","type":"text","marks":[{"type":"bold"}]},{"text":" Used to estimate the number of unique elements in very large datasets.","type":"text"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Summary and Conclusion","type":"text"}]},{"type":"paragraph","content":[{"text":"Redis is much more than a simple caching solution. With its millisecond-level speed, the reliability provided by ","type":"text"},{"text":"Persistence","type":"text","marks":[{"type":"bold"}]},{"text":" options, high availability through ","type":"text"},{"text":"Sentinel","type":"text","marks":[{"type":"bold"}]},{"text":", and near-infinite scalability with ","type":"text"},{"text":"Cluster","type":"text","marks":[{"type":"bold"}]},{"text":", Redis sits at the heart of modern architectures. Whether you're managing a real-time game leaderboard or limiting API traffic, Redis can eliminate performance bottlenecks when used with the right data type and architecture. Understanding the core concepts in this guide will help you build faster and more resilient applications.","type":"text"}]}]},"content_tr":{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"Problem Durumu: Uygulamanız Neden Yavaşlıyor?","type":"text"}]},{"type":"paragraph","content":[{"text":"Uygulamanız büyüdükçe, ana veritabanınız (PostgreSQL veya MySQL gibi) zorlanmaya başlar. Bir kullanıcı her veri istediğinde, sistem fiziksel bir disk üzerindeki milyonlarca satır arasında arama yapmak zorunda kalır. Bu bir darboğaz yaratır. Panelinizin neden saniyeler içinde yüklendiğini veya API'nizin yoğun trafik altında neden hata vermeye başladığını hiç merak ettiniz mi? Sorun 'Disk I/O' (Giriş/Çıkış) hızıdır ve çözüm daha hızlı bir katman gerektirir.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Çözüm: Redis","type":"text"}]},{"type":"paragraph","content":[{"text":"İşte bu noktada Redis devreye girer. Redis, verileriniz için yüksek hızlı bir şerit görevi görür. Yavaş disk işlemlerini beklemek yerine, Redis verileri sistemin RAM'inde (belleğinde) tutarak isteklere milisaniyenin altında yanıt vermenizi sağlar. O sadece bir veritabanı değil, bir performans motorudur.","type":"text"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Redis Nedir?","type":"text"}]},{"type":"paragraph","content":[{"text":"Redis (Remote Dictionary Server), açık kaynaklı, bellek içi (in-memory) bir veri yapısı deposudur. Veritabanı, önbellek (cache), mesaj kuyruğu (message broker) ve akış motoru olarak kullanılır. Verileri diskte saklayan geleneksel veritabanlarının aksine Redis, her şeyi bellekte tutar; bu yüzden inanılmaz derecede hızlıdır.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Redis'in Başlıca Faydaları:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Cache (Önbellekleme):","type":"text","marks":[{"type":"bold"}]},{"text":" Veritabanı yükünü azaltmak ve yanıt sürelerini hızlandırmak için sık erişilen verileri bellekte saklar.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Rate Limiting (Hız Sınırlama):","type":"text","marks":[{"type":"bold"}]},{"text":" Belirli bir kullanıcı veya IP'den gelen istek sayısını sayarak ve sınırlayarak API kötüye kullanımını önler.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Queue (Kuyruk Yönetimi):","type":"text","marks":[{"type":"bold"}]},{"text":" Listeleri veya Pub/Sub mekanizmalarını kullanarak arka plan işlemlerini etkili bir şekilde yönetir.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Session Management (Oturum Yönetimi):","type":"text","marks":[{"type":"bold"}]},{"text":" Kullanıcı oturum verilerini (giriş bilgileri gibi) kalıcı ve erişimi son derece hızlı tutar.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Gerçek Zamanlı Analiz:","type":"text","marks":[{"type":"bold"}]},{"text":" Sayfa görüntülemelerini, beğenileri veya aktif kullanıcıları atomik artırımlarla gerçek zamanlı saymak için mükemmeldir.","type":"text"}]}]}]},{"type":"horizontalRule"},{"type":"postImage","attrs":{"alt":"how-it-works-redis","src":"https://res.cloudinary.com/dsotvo4bj/image/upload/v1772443335/RedisDiagram_qjnz0g.webp","width":1461,"height":735,"layout":"inline","caption":"","publicId":"RedisDiagram_qjnz0g"}},{"type":"heading","attrs":{"level":3},"content":[{"text":"Redis Temel Mantık (System Flow)","type":"text"}]},{"type":"paragraph","content":[{"text":"Redis'in en önemli özelliği ","type":"text"},{"text":"Bellek İçi (In-Memory)","type":"text","marks":[{"type":"bold"}]},{"text":" yapısıdır. Standart bir veritabanı 'Uygulama → Disk' şeklinde çalışırken, Redis akışı 'Uygulama → RAM' şeklinde çalışır.","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"Uçuculuk Sorunu:","type":"text","marks":[{"type":"bold"}]},{"text":" RAM doğası gereği uçucudur (volatile). Yani sunucu kapandığında veya çöktüğünde bellek içindeki tüm veriler anında silinir. Bunu engellemek için Redis, verileri diskte saklamamızı sağlayan ","type":"text"},{"text":"Persistence (Kalıcılık)","type":"text","marks":[{"type":"bold"}]},{"text":" mekanizmaları sunar.","type":"text"}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Redis Persistence (Veriyi Diskte Saklama)","type":"text"}]},{"type":"paragraph","content":[{"text":"Redis, verilerinizin bir yeniden başlatma sonrası hayatta kalması için iki ana yöntem sunar: ","type":"text"},{"text":"RDB","type":"text","marks":[{"type":"bold"}]},{"text":" ve ","type":"text"},{"text":"AOF","type":"text","marks":[{"type":"bold"}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"1. RDB (Redis Database Snapshot)","type":"text"}]},{"type":"paragraph","content":[{"text":"RDB'nin mantığı, belirli zaman aralıklarıyla verilerinizin bir 'fotoğrafını' çekmektir. RAM'deki tüm verinin o anki halini alır ve diske sıkıştırılmış bir dosya olarak yazar.","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"Akış (Flow):","type":"text","marks":[{"type":"bold"}]},{"text":" Redis Memory → Snapshot Alınması → ","type":"text"},{"text":"dump.rdb","type":"text","marks":[{"type":"code"}]},{"text":" dosyası","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Örnek Zaman Çizelgesi:","type":"text","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"10:00 → Snapshot alındı","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"10:05 → Snapshot alındı","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"10:10 → Snapshot alındı","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Problem Senaryosu:","type":"text","marks":[{"type":"bold"}]},{"text":" Eğer 10:05'te snapshot alındıysa ve sunucu 10:06'da çökerse, 10:05 ile 10:06 arasındaki tüm veriler ","type":"text"},{"text":"kaybolur","type":"text","marks":[{"type":"bold"}]},{"text":"; çünkü henüz yeni bir snapshot çekilmemiştir.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Avantajları:","type":"text","marks":[{"type":"bold"}]},{"text":" Disk dosyası küçüktür, veriyi geri yüklemek (restore) çok hızlıdır ve işlemciyi (CPU) yormaz.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Dezavantajları:","type":"text","marks":[{"type":"bold"}]},{"text":" Snapshot aralıklarında veri kaybı yaşanma riski yüksektir.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"2. AOF (Append Only File)","type":"text"}]},{"type":"paragraph","content":[{"text":"Snapshot almak yerine, AOF her şeyi bir günlüğe kaydeder. Redis'e gelen her 'yazma' (write) komutu, anlık olarak bir log dosyasına eklenir.","type":"text"}]},{"type":"codeBlock","content":[{"text":"// Günlüğe Kaydedilen Örnek Komutlar:\nSET user:1 \"Ali\"\nINCR views\nLPUSH messages \"hello\"","type":"text"}]},{"type":"paragraph","content":[{"text":"Sunucu yeniden başlatıldığında Redis bu günlüğü en baştan okur ve komutları sırayla tekrar çalıştırır.","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"Akış (Flow):","type":"text","marks":[{"type":"bold"}]},{"text":" Redis Restart → AOF Dosyası Okunur → Komutlar Tekrar Çalıştırılır → Memory Yeniden İnşa Edilir","type":"text"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Avantajları:","type":"text","marks":[{"type":"bold"}]},{"text":" Veri kaybı neredeyse sıfırdır, çok daha güvenlidir.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Dezavantajları:","type":"text","marks":[{"type":"bold"}]},{"text":" Log dosyası zamanla çok büyüyebilir ve her komut tek tek tekrar çalıştırıldığı için geri yükleme süreci RDB'ye göre daha yavaştır.","type":"text"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Kıyaslama: RDB vs AOF","type":"text"}]},{"type":"paragraph","content":[{"text":"Doğru yöntemi seçmek ihtiyaçlarınıza bağlıdır. İşte hızlı bir karşılaştırma tablosu:","type":"text"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","content":[{"type":"paragraph","content":[{"text":"Özellik","type":"text"}]}]},{"type":"tableHeader","content":[{"type":"paragraph","content":[{"text":"RDB","type":"text"}]}]},{"type":"tableHeader","content":[{"type":"paragraph","content":[{"text":"AOF","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"text":"Yöntem","type":"text"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"text":"Snapshot (Anlık Görüntü)","type":"text"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"text":"Command Log (Komut Günlüğü)","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"text":"Performans","type":"text"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"text":"Çok Hızlı","type":"text"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"text":"Biraz Daha Yavaş","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"text":"Veri Kaybı","type":"text"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"text":"Olabilir","type":"text"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"text":"Çok Az","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"text":"Geri Yükleme","type":"text"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"text":"Hızlı","type":"text"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"text":"Daha Yavaş","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"Production Tavsiyesi:","type":"text","marks":[{"type":"bold"}]},{"text":" Gerçek hayat senaryolarında (Production ortamı) genellikle ","type":"text"},{"text":"RDB + AOF birlikte","type":"text","marks":[{"type":"bold"}]},{"text":" kullanılır. RDB hızlı geri yükleme ve felaket kurtarma için kullanılırken, AOF veri güvenliğini sağlar.","type":"text"}]},{"type":"horizontalRule"},{"type":"postImage","attrs":{"alt":"","src":"https://res.cloudinary.com/dsotvo4bj/image/upload/v1772443335/ClusterAndSentinel_d2bdri.webp","width":1029,"height":549,"layout":"inline","caption":"","publicId":"ClusterAndSentinel_d2bdri"}},{"type":"heading","attrs":{"level":3},"content":[{"text":"Redis Sentinel: Failover Yöneticisi","type":"text"}]},{"type":"paragraph","content":[{"text":"Modern uygulamalarda yüksek erişilebilirlik (High Availability) esastır. Eğer tek bir Redis sunucunuz (Primary) varsa ve o çökerse, tüm sisteminiz durur. İşte ","type":"text"},{"text":"Redis Sentinel","type":"text","marks":[{"type":"bold"}]},{"text":", bu noktada cluster yapınızın nöbetçisi olarak devreye girer.","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"Sentinel'in Amacı:","type":"text","marks":[{"type":"bold"}]},{"text":" Redis sunucularınızı sürekli izlemek ve bir sorun oluştuğunda kurtarma sürecini (failover) otomatik olarak yönetmektir.","type":"text"}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Sentinel Nasıl Çalışır? (Sistem Akışı)","type":"text"}]},{"type":"paragraph","content":[{"text":"Sentinel düğümleri sürekli olarak ","type":"text"},{"text":"Primary","type":"text","marks":[{"type":"bold"}]},{"text":" düğümü izler. Eğer Primary yanıt vermeyi keserse, şu otomatik akış başlar:","type":"text"}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Tespit:","type":"text","marks":[{"type":"bold"}]},{"text":" Bir Sentinel düğümü Primary'nin çöktüğünü fark eder.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Quorum (Çoğunluk) Kararı:","type":"text","marks":[{"type":"bold"}]},{"text":" Sentinel'ler kendi aralarında haberleşir. Eğer belirlenen çoğunluk (Quorum) sunucunun gerçekten çöktüğüne karar verirse failover süreci başlar.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Promote (Yükseltme):","type":"text","marks":[{"type":"bold"}]},{"text":" Sentinel, sağlıklı olan ","type":"text"},{"text":"Replica","type":"text","marks":[{"type":"bold"}]},{"text":" (yedek) düğümlerden birini seçer ve onu ","type":"text"},{"text":"Yeni Primary","type":"text","marks":[{"type":"bold"}]},{"text":" olarak ilan eder.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Yapılandırma:","type":"text","marks":[{"type":"bold"}]},{"text":" Diğer yedek düğümlere yeni Primary'yi takip etmeleri söylenir ve uygulama (Client) yeni adrese yönlendirilir.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Sentinel'in 3 Temel Görevi:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"1. Monitoring (İzleme):","type":"text","marks":[{"type":"bold"}]},{"text":" Primary ve Replica sunucularınızın beklenen şekilde çalışıp çalışmadığını sürekli kontrol eder.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"2. Automatic Failover (Otomatik Kurtarma):","type":"text","marks":[{"type":"bold"}]},{"text":" Primary çöktüğünde, insan müdahalesi olmadan bir Replica'yı Primary yapar.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"3. Service Discovery (Hizmet Keşfi):","type":"text","marks":[{"type":"bold"}]},{"text":" Uygulamanız için tek doğru kaynaktır. Uygulamanız Sentinel'e sorar: \"Şu anki Primary kim?\" Sentinel de ona güncel IP adresini verir.","type":"text"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Redis Cluster: Hash Slot ve Sharding Mantığı","type":"text"}]},{"type":"paragraph","content":[{"text":"Tek bir sunucunun RAM kapasitesi yetmediğinde (örneğin 1TB veriniz olduğunda) devreye giren ","type":"text"},{"text":"Redis Cluster","type":"text","marks":[{"type":"bold"}]},{"text":", veriyi sunucular (Node'lar) arasında nasıl paylaştıracağını harika bir sistemle yönetir.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"1. Hash Slots (Çekmece Mantığı)","type":"text"}]},{"type":"paragraph","content":[{"text":"Redis, verinin hangi sunucuda olduğunu bilmek için ","type":"text"},{"text":"16.384 adet Hash Slot","type":"text","marks":[{"type":"bold"}]},{"text":" (parça) kullanır. Bunu 16.384 çekmeceli dev bir dolap gibi düşünebilirsiniz. Kaydettiğiniz her anahtar (key), matematiksel bir formülle bu çekmecelerden birine yerleşir:","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"Formül:","type":"text","marks":[{"type":"bold"}]},{"text":" ","type":"text"},{"text":"hash(key) % 16384","type":"text","marks":[{"type":"code"}]}]}]},{"type":"paragraph","content":[{"text":"Örnek:","type":"text","marks":[{"type":"bold"}]},{"text":" ","type":"text"},{"text":"user:1","type":"text","marks":[{"type":"code"}]},{"text":" anahtarını kaydettiğinizde Redis bunun hash değerini hesaplar; sonuç 9000 çıkarsa, bu anahtar 9000 numaralı slotu barındıran sunucuya (örneğin Node 2) gider.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"2. Resharding (Yeni Sunucu Ekleme)","type":"text"}]},{"type":"paragraph","content":[{"text":"Sisteminiz büyüdüğünde ","type":"text"},{"text":"Node 4","type":"text","marks":[{"type":"bold"}]},{"text":"'ü cluster'a ekleyebilirsiniz. Redis, 16.384 slotu sunucular arasında yeniden dağıtır (Resharding). Eskiden 3 sunucu bu slotları paylaşırken, artık 4 sunucu paylaşır. Bu sayede sonsuz bir ","type":"text"},{"text":"Yatay Ölçekleme","type":"text","marks":[{"type":"bold"}]},{"text":" sağlanır.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"3. Gossip Protocol: Sunucuların Dedikodusu","type":"text"}]},{"type":"paragraph","content":[{"text":"Cluster içindeki sunucular sürekli birbirleriyle konuşurlar. Buna ","type":"text"},{"text":"Gossip Protocol","type":"text","marks":[{"type":"bold"}]},{"text":" denir. Birbirlerine \"Sen hayatta mısın? Node 3'ten haberin var mı?\" diye sorarlar.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Sağlık Kontrolü:","type":"text","marks":[{"type":"bold"}]},{"text":" Eğer düğümlerin çoğunluğu bir sunucunun öldüğüne karar verirse, sistem otomatik olarak müdahale eder.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Kendi Kendini Onarma:","type":"text","marks":[{"type":"bold"}]},{"text":" Ölen Primary yerine bir Replica (yedek) anında Primary ilan edilir ve sistem hiç durmadan çalışmaya devam eder.","type":"text"}]}]}]},{"type":"horizontalRule"},{"type":"postImage","attrs":{"alt":"","src":"https://res.cloudinary.com/dsotvo4bj/image/upload/v1772443335/RedisDataTypes_c0qsig.webp","width":810,"height":310,"layout":"inline","caption":"","publicId":"RedisDataTypes_c0qsig"}},{"type":"heading","attrs":{"level":3},"content":[{"text":"Redis Veri Tipleri: Ne Zaman Hangisini Kullanmalı?","type":"text"}]},{"type":"paragraph","content":[{"text":"Redis sadece basit bir anahtar-değer deposu değildir. İşte sunduğu esnek veri yapıları:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Strings:","type":"text","marks":[{"type":"bold"}]},{"text":" En temel tip. Metin, sayı veya binary veri saklar. Sayaçlar için idealdir.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Hashes:","type":"text","marks":[{"type":"bold"}]},{"text":" Alan-değer çiftlerinden oluşur. Kullanıcı profilleri gibi nesneleri saklamak için mükemmeldir.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Lists:","type":"text","marks":[{"type":"bold"}]},{"text":" Sıralı metin koleksiyonları. Kuyruk (Queue) sistemleri için kullanılır.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Sets:","type":"text","marks":[{"type":"bold"}]},{"text":" Benzersiz ve sırasız öğeler. Tekil ziyaretçileri takip etmek veya etiketleme (tagging) için kullanılır.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Sorted Sets (ZSets):","type":"text","marks":[{"type":"bold"}]},{"text":" Her öğenin bir 'skoru' vardır. Liderlik tabloları (Leaderboards) için otomatik sıralama sağlar.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Bitmaps:","type":"text","marks":[{"type":"bold"}]},{"text":" Bit düzeyinde işlemler yapar. Kullanıcıların günlük aktifliğini çok az bellekle takip etmenizi sağlar.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"HyperLogLog:","type":"text","marks":[{"type":"bold"}]},{"text":" Çok büyük verilerde benzersiz öğe sayısını tahmin etmek için kullanılır.","type":"text"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Özet ve Sonuç","type":"text"}]},{"type":"paragraph","content":[{"text":"Redis, basit bir önbellek çözümünden çok daha fazlasıdır. Milisaniyelik hızı, ","type":"text"},{"text":"Persistence","type":"text","marks":[{"type":"bold"}]},{"text":" seçenekleriyle sunduğu güvenliği, ","type":"text"},{"text":"Sentinel","type":"text","marks":[{"type":"bold"}]},{"text":" ile sağladığı yüksek erişilebilirliği ve ","type":"text"},{"text":"Cluster","type":"text","marks":[{"type":"bold"}]},{"text":" yapısıyla sunduğu sonsuz ölçeklenebilirliği sayesinde modern mimarilerin kalbinde yer alır. İster gerçek zamanlı bir oyunun skor tablosunu yönetin, ister API trafiğinizi sınırlayın; Redis doğru veri tipi ve doğru mimari kurguyla performans darboğazlarını ortadan kaldırır. Bu rehberdeki temel kavramları anlamak, hem daha hızlı hem de daha dayanıklı uygulamalar geliştirmenize yardımcı olacaktır.","type":"text"}]}]},"cover":{"url":"https://res.cloudinary.com/dsotvo4bj/image/upload/v1772443701/Frame_3_1_czizpd.webp","width":4966,"height":3042,"public_id":"Frame_3_1_czizpd"},"tags":["Redis","Backend","Caching","Databases"],"reading_minutes_en":6,"reading_minutes_tr":6,"seo_title_en":null,"seo_title_tr":null,"seo_description_en":null,"seo_description_tr":null,"published_at":"2026-02-21T16:00:00+00:00","created_at":"2026-09-20T10:36:25.928782+00:00","updated_at":"2026-09-20T14:27:58.11+00:00","like_count":10},{"id":"35fb1b61-2c9f-4e6a-9a49-d9bc8634eddf","slug":"optimistic-vs-pessimistic-ui-nextjs-guide","status":"published","title_en":"Optimistic vs. Pessimistic UI: Mastering Next.js Server Actions","title_tr":"Optimistic vs. Pessimistic UI: Next.js Server Actions Rehberi","excerpt_en":"A comprehensive guide on Optimistic vs. Pessimistic UI patterns in Next.js. Learn how to use the useOptimistic hook and Server Actions for a lightning-fast UX.","excerpt_tr":"Next.js'de Optimistic ve Pessimistic UI desenleri üzerine kapsamlı bir rehber. Şimşek hızında bir UX için useOptimistic hook'u ve Server Actions kullanımını öğrenin.","content_en":{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"The Psychology of Speed: Optimistic vs. Pessimistic UI","type":"text"}]},{"type":"paragraph","content":[{"text":"In the world of modern web development, creating a smooth and responsive user experience is crucial. No one likes waiting for a page to reload or for feedback after an action, especially when interacting with modern web applications. Speed is no longer just about how fast your server responds; it’s about how fast your user ","type":"text"},{"text":"feels","type":"text","marks":[{"type":"bold"}]},{"text":" the application is. This is where the concepts of Optimistic and Pessimistic UI come into play.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"A Real-World Analogy: The Instant Message vs. The Bank Transfer","type":"text"}]},{"type":"paragraph","content":[{"text":"To understand the difference, let’s look at two everyday scenarios:","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"Optimistic UI (The WhatsApp Way):","type":"text","marks":[{"type":"bold"}]},{"text":" Imagine you are sending a message on WhatsApp. The moment you hit 'Send', the message bubble appears in your chat history immediately with a single gray checkmark. You don't wait for the server to confirm receipt before you can see your own text. You assume the message will be delivered. If the internet cuts out, only then does a small 'fail' icon appear and the state is reverted.","type":"text"}]}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"Pessimistic UI (The Bank Way):","type":"text","marks":[{"type":"bold"}]},{"text":" Imagine a traditional bank transfer. You click 'Send Money', a loading spinner appears, and you are blocked from doing anything else. You must wait for the bank's server to confirm the transaction is valid, the funds exist, and the recipient is correct before you see any change in your balance. In this case, accuracy is more important than the feeling of speed.","type":"text"}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"What is Pessimistic UI?","type":"text"}]},{"type":"paragraph","content":[{"text":"Pessimistic UI is the 'Safety First' approach. It follows a strict sequence: Action → Loading State → Server Confirmation → UI Update. The UI waits for the server's 'Green Light' before making any changes to the display. This is essential for sensitive data where being wrong, even for a second, is not an option.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Next.js Pessimistic Implementation Example:","type":"text"}]},{"type":"paragraph","content":[{"text":"In this example, we use standard React state to manage a loading spinner and wait for the Server Action to complete before updating the view.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"$27","type":"text"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"What is Optimistic UI?","type":"text"}]},{"type":"paragraph","content":[{"text":"Optimistic UI is a pattern where the UI updates instantly in anticipation of a successful server response. Instead of showing a loading spinner, the front-end assumes success and shows the result right away. If something goes wrong, the UI can roll back to the previous state. This significantly reduces 'perceived latency'.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"The useOptimistic Hook in Next.js","type":"text"}]},{"type":"paragraph","content":[{"text":"Next.js and React introduced the ","type":"text"},{"text":"useOptimistic","type":"text","marks":[{"type":"code"}]},{"text":" hook to make this pattern easier to implement. It allows you to define an 'optimistic state' that is displayed while a background task (like a Server Action) is running.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Next.js Optimistic Implementation Example:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"$28","type":"text"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Comparison: Which One Should You Use?","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Use Optimistic UI for:","type":"text","marks":[{"type":"bold"}]},{"text":" High-frequency, low-stakes interactions. Examples: Liking a post, adding a comment, reacting with an emoji, or checking off a to-do item. It makes the app feel snappy and alive.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Use Pessimistic UI for:","type":"text","marks":[{"type":"bold"}]},{"text":" High-stakes, critical operations. Examples: Deleting an account, processing a payment, changing security settings, or any action where a rollback would be highly confusing or dangerous for the user.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Advantages and Challenges","type":"text"}]},{"type":"paragraph","content":[{"text":"Advantages:","type":"text","marks":[{"type":"bold"}]},{"text":" Enhanced user satisfaction, reduced perceived latency, and a much smoother flow. Users stay engaged because the app responds to them instantly.","type":"text"}]},{"type":"paragraph","content":[{"text":"Challenges:","type":"text","marks":[{"type":"bold"}]},{"text":" Increased state management complexity. You must handle rollbacks gracefully and ensure that the 'temporary' UI state looks consistent with the 'final' server state to avoid flickering.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Conclusion","type":"text"}]},{"type":"paragraph","content":[{"text":"Optimistic UI, combined with server actions in Next.js, allows us to create highly responsive web applications. By assuming success and providing immediate feedback, we significantly improve performance. For developers, tools like ","type":"text"},{"text":"useOptimistic","type":"text","marks":[{"type":"code"}]},{"text":" simplify the logic required to sync the front-end and back-end without sacrificing the user experience.","type":"text"}]}]},"content_tr":{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"Hızın Psikolojisi: Optimistic vs. Pessimistic UI","type":"text"}]},{"type":"paragraph","content":[{"text":"Modern web geliştirme dünyasında, akıcı ve duyarlı bir kullanıcı deneyimi (UX) oluşturmak hayati önem taşır. Hiç kimse bir eylemden sonra sayfanın yeniden yüklenmesini veya uzun süre geri bildirim beklemeyi sevmez. Hız artık sadece sunucunuzun ne kadar hızlı yanıt verdiğiyle değil, kullanıcının uygulamayı ne kadar hızlı ","type":"text"},{"text":"hissettiğiyle","type":"text","marks":[{"type":"bold"}]},{"text":" ilgilidir. İşte bu noktada Optimistic (İyimser) ve Pessimistic (Kötümser) UI kavramları devreye girer.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Gerçek Hayattan Bir Analoji: Anlık Mesaj vs. Banka Havalesi","type":"text"}]},{"type":"paragraph","content":[{"text":"Aradaki farkı anlamak için her gün karşılaştığımız iki senaryoya bakalım:","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"Optimistic UI (WhatsApp Yöntemi):","type":"text","marks":[{"type":"bold"}]},{"text":" WhatsApp'tan bir mesaj gönderdiğinizi hayal edin. 'Gönder' butonuna bastığınız anda mesaj balonu sohbette hemen belirir ve yanında tek bir gri tık oluşur. Kendi metninizi görmek için sunucunun mesajı aldığını onaylamasını beklemezsiniz. İşlemin başarılı olacağını varsayarsınız. Eğer internet kesilirse, ancak o zaman küçük bir 'hata' ikonu çıkar ve durum geri alınır.","type":"text"}]}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"Pessimistic UI (Banka Yöntemi):","type":"text","marks":[{"type":"bold"}]},{"text":" Geleneksel bir banka havalesini hayal edin. 'Para Gönder'e basarsınız, bir yükleme ikonu çıkar ve tüm ekran kilitlenir. Bakiyenizde bir değişiklik görmeden önce bankanın sunucusundan işlemin geçerli olduğuna, paranın var olduğuna ve alıcının doğru olduğuna dair onay gelmesini beklersiniz. Burada doğruluk, hız hissinden daha önemlidir.","type":"text"}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Pessimistic UI Nedir?","type":"text"}]},{"type":"paragraph","content":[{"text":"Pessimistic UI, 'Önce Güvenlik' yaklaşımıdır. Katı bir sıralamayı takip eder: Eylem → Yükleme Durumu → Sunucu Onayı → Arayüz Güncelleme. Arayüz, ekranda herhangi bir değişiklik yapmadan önce sunucudan gelen 'Yeşil Işığı' bekler. Bir saniye bile olsa yanlış bilginin gösterilmemesi gereken hassas veriler için bu yöntem vazgeçilmezdir.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Next.js Pessimistic Uygulama Örneği:","type":"text"}]},{"type":"paragraph","content":[{"text":"Bu örnekte, standart React state kullanarak bir yükleme spinner'ı yönetiyoruz ve görünümü güncellemeden önce Server Action'ın tamamlanmasını bekliyoruz.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"$29","type":"text"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Optimistic UI Nedir?","type":"text"}]},{"type":"paragraph","content":[{"text":"Optimistic UI, başarılı bir sunucu yanıtı beklentisiyle arayüzün anında güncellendiği bir tasarım desenidir. Kullanıcıya yükleme ikonu göstermek yerine, ön uç başarıyı varsayar ve sonucu hemen yansıtır. Eğer bir şeyler ters giderse, UI önceki durumuna geri döner. Bu, 'algılanan gecikmeyi' (perceived latency) neredeyse sıfıra indirir.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Next.js'de useOptimistic Hook'u","type":"text"}]},{"type":"paragraph","content":[{"text":"Next.js ve React, bu deseni uygulamayı kolaylaştırmak için ","type":"text"},{"text":"useOptimistic","type":"text","marks":[{"type":"code"}]},{"text":" hook'unu geliştirdi. Bu hook, arka planda bir işlem (Server Action gibi) devam ederken gösterilecek 'geçici bir durumu' tanımlamanıza olanak tanır.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Next.js Optimistic Uygulama Örneği:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"$2a","type":"text"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Kıyaslama: Hangisini Kullanmalısınız?","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Şu Durumlarda Optimistic UI Kullanın:","type":"text","marks":[{"type":"bold"}]},{"text":" Etkileşimi yüksek, riski düşük işlemler. Örnekler: Bir gönderiyi beğenmek, yorum eklemek, emoji tepkisi vermek veya yapılacaklar listesinde bir maddeyi işaretlemek.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Şu Durumlarda Pessimistic UI Kullanın:","type":"text","marks":[{"type":"bold"}]},{"text":" Kritik ve geri dönüşü zor işlemler. Örnekler: Hesap silme, ödeme yapma, güvenlik ayarlarını değiştirme veya hatalı bir gösterimin kullanıcıyı ciddi şekilde yanıltabileceği durumlar.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Avantajlar ve Dezavantajlar","type":"text"}]},{"type":"paragraph","content":[{"text":"Avantajlar:","type":"text","marks":[{"type":"bold"}]},{"text":" Artan kullanıcı memnuniyeti, sıfır algılanan gecikme ve çok daha akıcı bir uygulama deneyimi. Kullanıcılar uygulamanın kendilerine anında yanıt verdiğini hissederler.","type":"text"}]},{"type":"paragraph","content":[{"text":"Dezavantajlar:","type":"text","marks":[{"type":"bold"}]},{"text":" State yönetimi daha karmaşık hale gelir. Hata durumlarında veriyi eski haline getirme (rollback) mekanizmalarını doğru kurmalı ve 'geçici' durum ile 'final' durum arasındaki geçişin (flickering) pürüzsüz olduğundan emin olmalısınız.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Sonuç","type":"text"}]},{"type":"paragraph","content":[{"text":"Next.js Server Actions ile birleşen Optimistic UI, yüksek düzeyde duyarlı web uygulamaları oluşturmamıza olanak tanır. Başarıyı varsayarak ve anında geri bildirim sağlayarak, algılanan performansı devasa düzeyde artırabiliriz. ","type":"text"},{"text":"useOptimistic","type":"text","marks":[{"type":"code"}]},{"text":" gibi araçlar, kullanıcı deneyiminden ödün vermeden ön uç ve arka uç arasındaki mantığı basitleştirmemize yardımcı olur.","type":"text"}]}]},"cover":{"url":"https://res.cloudinary.com/dsotvo4bj/image/upload/v1771614084/ChatGPT_Image_20_%C5%9Eub_2026_21_57_08_xhxb79.webp","width":1536,"height":1024,"public_id":"ChatGPT_Image_20_Şub_2026_21_57_08_xhxb79"},"tags":["Next.js","React","Server Actions","UX"],"reading_minutes_en":5,"reading_minutes_tr":4,"seo_title_en":null,"seo_title_tr":null,"seo_description_en":null,"seo_description_tr":null,"published_at":"2026-02-20T21:18:00+00:00","created_at":"2026-09-20T10:36:25.928782+00:00","updated_at":"2026-09-20T10:36:25.928782+00:00","like_count":3},{"id":"56c07f4e-3707-4b95-8a72-b97302363842","slug":"nextjs-ppr-cache-components","status":"published","title_en":"Next.js Partial Prerendering & Cache Components","title_tr":"Next.js Partial Prerendering ve Cache Components","excerpt_en":"Discover how Next.js Cache Components and Partial Prerendering (PPR) allow you to mix static speed with dynamic personalization in a single route.","excerpt_tr":"Next.js Cache Components ve Partial Prerendering (PPR) ile tek bir route içinde statik hız ve dinamik kişiselleştirmeyi nasıl bir arada kullanabileceğinizi keşfedin.","content_en":{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"Combining Static and Dynamic Content","type":"text"}]},{"type":"paragraph","content":[{"text":"For years, web development forced us into a rigid trade-off: Should a page be ","type":"text"},{"text":"Static","type":"text","marks":[{"type":"bold"}]},{"text":" (incredibly fast but potentially stale) or ","type":"text"},{"text":"Dynamic","type":"text","marks":[{"type":"bold"}]},{"text":" (always fresh but slower due to server processing)? Moving everything to Client Side Rendering solved interactivity but hurt SEO and initial load times. Next.js has introduced a paradigm shift with ","type":"text"},{"text":"Cache Components","type":"text","marks":[{"type":"bold"}]},{"text":" and ","type":"text"},{"text":"Partial Prerendering (PPR)","type":"text","marks":[{"type":"bold"}]},{"text":".","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"Partial Prerendering (PPR)","type":"text","marks":[{"type":"bold"}]},{"text":" allows you to have the best of both worlds in a single route: a fast, static shell that loads instantly, with dynamic holes that stream in data in parallel.","type":"text"}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Static Shell and Dynamic Holes","type":"text"}]},{"type":"paragraph","content":[{"text":"PPR fundamentally changes how a page is assembled. Instead of waiting for every single database query to finish before showing anything to the user, Next.js splits the page into two distinct parts:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Static Shell:","type":"text","marks":[{"type":"bold"}]},{"text":" This includes the layout, navbar, footer, and any content that doesn't rely on specific user data. This part is pre-generated and sent to the browser immediately.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Dynamic Holes:","type":"text","marks":[{"type":"bold"}]},{"text":" These are the parts of the page that require real-time data (like a shopping cart or user profile). They \"stream\" in asynchronously while the user is already viewing the Static Shell.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Real-World Example: The E-Commerce Product Page","type":"text"}]},{"type":"paragraph","content":[{"text":"Let's visualize this with a standard shopping page scenario to see how the responsibilities are divided:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Navbar & Logo:","type":"text","marks":[{"type":"bold"}]},{"text":" Identical for every user. (","type":"text"},{"text":"Static Shell","type":"text","marks":[{"type":"bold"}]},{"text":" - Loads Instantly)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Product Title & Description:","type":"text","marks":[{"type":"bold"}]},{"text":" Changes rarely. Can be cached for an hour. (","type":"text"},{"text":"Cached Content","type":"text","marks":[{"type":"bold"}]},{"text":" - Included in Shell)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add to Cart / Personal Price:","type":"text","marks":[{"type":"bold"}]},{"text":" Depends on the logged-in user or active coupons. (","type":"text"},{"text":"Dynamic Hole","type":"text","marks":[{"type":"bold"}]},{"text":" - Streams in via Suspense)","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"The New Code Structure","type":"text"}]},{"type":"paragraph","content":[{"text":"Gone are the days of complex config objects like ","type":"text"},{"text":"export const revalidate","type":"text","marks":[{"type":"code"}]},{"text":". We now use directive-based caching with ","type":"text"},{"text":"'use cache'","type":"text","marks":[{"type":"code"}]},{"text":" and standard React ","type":"text"},{"text":"","type":"text","marks":[{"type":"code"}]},{"text":" boundaries.","type":"text"}]},{"type":"paragraph","content":[{"text":"Here is a complete, clean example showing how these three layers coexist in a single file:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"$2b","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"How It Works: Breaking Down the Logic","type":"text"}]},{"type":"paragraph","content":[{"text":"The magic above happens through four key mechanisms. Here is what each part does:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"'use cache'","type":"text","marks":[{"type":"bold"},{"type":"code"}]},{"text":":","type":"text","marks":[{"type":"bold"}]},{"text":" This directive tells Next.js to take a snapshot of the component's output. Even though it fetches data, it doesn't need to run on every request. It runs once (or when revalidated) and serves the result instantly as part of the Static Shell.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"cacheLife('hours')","type":"text","marks":[{"type":"bold"},{"type":"code"}]},{"text":":","type":"text","marks":[{"type":"bold"}]},{"text":" This function controls how long the cached data remains valid. It replaces the old ISR (Incremental Static Regeneration) timers. You can specify semantic timeframes like 'hours', 'days', or 'weeks'.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"cookies()","type":"text","marks":[{"type":"bold"},{"type":"code"}]},{"text":" (The Dynamic Trigger):","type":"text","marks":[{"type":"bold"}]},{"text":" Accessing request-specific data like cookies or headers automatically signals Next.js that this component ","type":"text"},{"text":"must","type":"text","marks":[{"type":"italic"}]},{"text":" be dynamic. It cannot be prerendered because it depends on who is viewing the page.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"","type":"text","marks":[{"type":"bold"},{"type":"code"}]},{"text":" (The Boundary):","type":"text","marks":[{"type":"bold"}]},{"text":" By wrapping the dynamic ","type":"text"},{"text":"UserCart","type":"text","marks":[{"type":"code"}]},{"text":" in Suspense, we create a boundary. Next.js sends the Static Shell immediately and shows the ","type":"text"},{"text":"fallback","type":"text","marks":[{"type":"code"}]},{"text":" UI (e.g., \"Loading your cart...\"). Once the ","type":"text"},{"text":"UserCart","type":"text","marks":[{"type":"code"}]},{"text":" finishes fetching data on the server, it \"streams\" into place, replacing the loading message.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Enabling Cache Components","type":"text"}]},{"type":"paragraph","content":[{"text":"PPR is an opt-in feature. To enable it, add the following flag to your ","type":"text"},{"text":"next.config.ts","type":"text","marks":[{"type":"code"}]},{"text":":","type":"text"}]},{"type":"codeBlock","attrs":{"language":"ts"},"content":[{"text":"import type { NextConfig } from 'next'\n\nconst nextConfig: NextConfig = {\n cacheComponents: true,\n}\n\nexport default nextConfig","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Advantages of PPR","type":"text"}]},{"type":"paragraph","content":[{"text":"Why should you adopt this architecture? Here are the key benefits:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Performance Boost:","type":"text","marks":[{"type":"bold"}]},{"text":" Since the Static Shell is served immediately (TTFB is minimized), users feel the site is incredibly fast. They don't stare at a white screen while dynamic data fetches.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"SEO Compatibility:","type":"text","marks":[{"type":"bold"}]},{"text":" Search engines can easily crawl the static parts of your page (content, headers, descriptions) without needing to execute complex JavaScript or wait for dynamic streaming.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Better User Experience (UX):","type":"text","marks":[{"type":"bold"}]},{"text":" It eliminates the \"loading spinner hell.\" The layout stabilizes instantly, and content fills in naturally.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Flexibility:","type":"text","marks":[{"type":"bold"}]},{"text":" You can mix different data fetching strategies (Static, Cached, Dynamic) in the same component tree without complex hacks.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Common Use Cases","type":"text"}]},{"type":"paragraph","content":[{"text":"Where does PPR shine the most?","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"E-Commerce Platforms:","type":"text","marks":[{"type":"bold"}]},{"text":" Product descriptions and images are part of the Static Shell, while stock availability, personalized pricing, and cart status are Dynamic Holes.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Blog & Content Platforms:","type":"text","marks":[{"type":"bold"}]},{"text":" The article content is Static/Cached for maximum SEO. The \"Comments\" section and \"Like\" buttons are Dynamic Holes that load separately.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Live Data Dashboards:","type":"text","marks":[{"type":"bold"}]},{"text":" The dashboard layout and sidebar are Static. The real-time charts, notifications, and live feeds are Dynamic Holes that stream in.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Conclusion","type":"text"}]},{"type":"paragraph","content":[{"text":"Partial Pre-Rendering (PPR) offers a practical way to move forward without having to choose between fully static or fully dynamic pages. Parts of the page that are shared by everyone load quickly, while user-specific data is loaded later when needed. This approach helps keep the application structure simpler, while also providing a faster and smoother experience for users. Setting up and using PPR in Next.js can be a sensible option for those who want to balance performance and flexibility.","type":"text"}]}]},"content_tr":{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"Statik ve Dinamik İçeriğin Bir Arada Kullanımı","type":"text"}]},{"type":"paragraph","content":[{"text":"Uzun süre boyunca web geliştirmede hep aynı zorlu soruyla karşılaştık: Bu sayfa ","type":"text"},{"text":"Static","type":"text","marks":[{"type":"bold"}]},{"text":" mi olmalı (çok hızlı ama içeriği bayat olabilir), yoksa ","type":"text"},{"text":"Dynamic","type":"text","marks":[{"type":"bold"}]},{"text":" mi (hep güncel ama sunucu yanıtı beklendiği için yavaş)? Her şeyi Client Side Rendering'e taşımak etkileşimi çözse de, SEO ve ilk yükleme süresi (FCP) gibi konularda ciddi bedeller ödetiyordu. Next.js, ","type":"text"},{"text":"Cache Components","type":"text","marks":[{"type":"bold"}]},{"text":" ve ","type":"text"},{"text":"Partial Prerendering (PPR)","type":"text","marks":[{"type":"bold"}]},{"text":" ile bu denklemi kökten değiştiriyor.","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"Partial Prerendering (PPR)","type":"text","marks":[{"type":"bold"}]},{"text":", tek bir route içinde iki dünyanın en iyisini sunar: Anında yüklenen hızlı bir ","type":"text"},{"text":"Static Shell","type":"text","marks":[{"type":"bold"}]},{"text":" ve buna paralel olarak akan (stream) ","type":"text"},{"text":"Dynamic Holes","type":"text","marks":[{"type":"bold"}]},{"text":".","type":"text"}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Static Shell ve Dynamic Holes","type":"text"}]},{"type":"paragraph","content":[{"text":"PPR'ın mantığı oldukça nettir ve sayfa yükleme sürecini ikiye böler:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Static Shell (Statik Kabuk):","type":"text","marks":[{"type":"bold"}]},{"text":" Sayfanın iskeletidir. Layout, navbar, footer ve kullanıcıya özel olmayan genel içerikler burada yer alır. Bu kısım build anında oluşturulur ve kullanıcı siteye girdiği anda milisaniyeler içinde karşısına gelir.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Dynamic Holes (Dinamik Boşluklar):","type":"text","marks":[{"type":"bold"}]},{"text":" Sayfanın o anki kullanıcıya veya zamana bağlı olan kısımlarıdır. Kullanıcı zaten Static Shell'i görüntülerken, bu dinamik parçalar arka planda sunucuda hazırlanır ve hazır oldukları anda sayfadaki boşluklara \"akar\" (streaming).","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Gerçek Bir Örnek: E-Ticaret Ürün Sayfası","type":"text"}]},{"type":"paragraph","content":[{"text":"Bu yapıyı standart bir e-ticaret senaryosu üzerinden görselleştirelim:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Navbar ve Logo:","type":"text","marks":[{"type":"bold"}]},{"text":" Her ziyaretçi için aynıdır. (","type":"text"},{"text":"Static Shell","type":"text","marks":[{"type":"bold"}]},{"text":" - Anında Yüklenir)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Ürün Başlığı ve Açıklaması:","type":"text","marks":[{"type":"bold"}]},{"text":" Nadiren değişir, herkes için aynıdır. (","type":"text"},{"text":"Cached Content","type":"text","marks":[{"type":"bold"}]},{"text":" - Shell'e dahildir)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Sepet Bilgisi / Size Özel Fiyat:","type":"text","marks":[{"type":"bold"}]},{"text":" Giriş yapmış kullanıcıya göre değişir. (","type":"text"},{"text":"Dynamic Hole","type":"text","marks":[{"type":"bold"}]},{"text":" - Suspense ile sonradan gelir)","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Yeni Kod Yapısı","type":"text"}]},{"type":"paragraph","content":[{"text":"Eskiden kullandığımız ","type":"text"},{"text":"export const revalidate","type":"text","marks":[{"type":"code"}]},{"text":" veya ","type":"text"},{"text":"force-dynamic","type":"text","marks":[{"type":"code"}]},{"text":" gibi karmaşık yapılandırma objelerine artık gerek kalmadı. Bunun yerine ","type":"text"},{"text":"'use cache'","type":"text","marks":[{"type":"code"}]},{"text":" direktifi ve standart React ","type":"text"},{"text":"","type":"text","marks":[{"type":"code"}]},{"text":" sınırlarını kullanıyoruz.","type":"text"}]},{"type":"paragraph","content":[{"text":"İşte Static, Cached ve Dynamic katmanların tek bir dosyada nasıl uyum içinde çalıştığını gösteren temiz bir örnek:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"$2c","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Nasıl Çalışır? Kodun Analizi","type":"text"}]},{"type":"paragraph","content":[{"text":"Yukarıdaki kod bloğunda gerçekleşen büyü, şu dört temel kavramın birleşimiyle oluşur:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"'use cache'","type":"text","marks":[{"type":"bold"},{"type":"code"}]},{"text":":","type":"text","marks":[{"type":"bold"}]},{"text":" Bu direktif Next.js'e şunu söyler: \"Bu fonksiyonun çıktısının bir fotoğrafını (snapshot) çek ve sakla.\" Bileşen veri tabanına gitse bile, her kullanıcı için tekrar tekrar çalışmaz. Bir kere çalışır ve sonucu Static Shell'in içine gömülür.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"cacheLife('hours')","type":"text","marks":[{"type":"bold"},{"type":"code"}]},{"text":":","type":"text","marks":[{"type":"bold"}]},{"text":" Önbellekteki verinin ne kadar süreyle \"taze\" kabul edileceğini belirler. Eski ISR yöntemindeki ","type":"text"},{"text":"revalidate","type":"text","marks":[{"type":"code"}]},{"text":" sürelerinin yerini alan, çok daha okunaklı bir yapılandırmadır. 'hours', 'days' gibi ifadelerle yönetilir.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"cookies()","type":"text","marks":[{"type":"bold"},{"type":"code"}]},{"text":" (Dinamik Tetikleyici):","type":"text","marks":[{"type":"bold"}]},{"text":" Kod içinde ","type":"text"},{"text":"cookies()","type":"text","marks":[{"type":"code"}]},{"text":" veya ","type":"text"},{"text":"headers()","type":"text","marks":[{"type":"code"}]},{"text":" fonksiyonlarının çağrılması, Next.js için bir işarettir: \"Bu bileşen kullanıcıya özeldir, bunu önceden oluşturamazsın.\" Bu nedenle bu bileşen otomatik olarak Dynamic moda geçer.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"","type":"text","marks":[{"type":"bold"},{"type":"code"}]},{"text":" (Sınır Çizgisi):","type":"text","marks":[{"type":"bold"}]},{"text":" Bu en kritik noktadır. Dinamik olan ","type":"text"},{"text":"UserCart","type":"text","marks":[{"type":"code"}]},{"text":" bileşenini Suspense içine alarak, Statik ve Dinamik içerik arasına bir sınır çizersiniz. Next.js, Statik Kabuğu hemen gönderir, bu kısım için ise ","type":"text"},{"text":"fallback","type":"text","marks":[{"type":"code"}]},{"text":" (yükleniyor yazısı) gösterir. Veri hazır olduğunda ise gerçek içerik sayfaya akar (Streaming).","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Cache Components Nasıl Aktif Edilir?","type":"text"}]},{"type":"paragraph","content":[{"text":"Cache Components (ve dolayısıyla PPR) şu an için opsiyonel bir özelliktir. Projenizde aktif etmek için ","type":"text"},{"text":"next.config.ts","type":"text","marks":[{"type":"code"}]},{"text":" dosyanıza şu ayarı eklemeniz yeterlidir:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"ts"},"content":[{"text":"import type { NextConfig } from 'next'\n\nconst nextConfig: NextConfig = {\n cacheComponents: true,\n}\n\nexport default nextConfig","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"PPR’ın Avantajları","type":"text"}]},{"type":"paragraph","content":[{"text":"Peki neden bu mimariye geçmelisiniz? İşte sağladığı temel faydalar:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Performans Artışı:","type":"text","marks":[{"type":"bold"}]},{"text":" Static Shell anında yüklendiği için kullanıcılar beyaz bir sayfa beklemez. İlk Bayt Süresi (TTFB) minimuma iner.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"SEO Uyumluluğu:","type":"text","marks":[{"type":"bold"}]},{"text":" Arama motoru botları, sayfanın statik iskeletini, başlıklarını ve ana içeriğini (Cached Content) anında görür ve tarar. Javascript'in yüklenmesini beklemek zorunda kalmazlar.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Daha İyi Kullanıcı Deneyimi (UX):","type":"text","marks":[{"type":"bold"}]},{"text":" Sayfa bütünlüğü hemen sağlanır. Kullanıcı bir kısmını görürken, diğer kısımlar (yorumlar, sepet vb.) arka planda yüklenip yerlerine yerleşir.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Esneklik:","type":"text","marks":[{"type":"bold"}]},{"text":" Aynı sayfa ağacı içinde hem çok uzun süre cache'lenen verileri hem de her saniye değişen canlı verileri karmaşık ayarlar yapmadan kullanabilirsiniz.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Yaygın Kullanım Senaryoları","type":"text"}]},{"type":"paragraph","content":[{"text":"PPR özellikle şu durumlarda parlar:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"E-Ticaret Siteleri:","type":"text","marks":[{"type":"bold"}]},{"text":" Ürün görseli ve açıklamaları Static olarak sunulurken; stok durumu, fiyat değişimleri ve sepete ekle butonu Dynamic Hole olarak çalışır.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Blog Platformları:","type":"text","marks":[{"type":"bold"}]},{"text":" Makale içeriği SEO için Static sunulur. Ancak \"Yorumlar\" ve \"Beğeni\" sayıları kullanıcı etkileşimi olduğu için dinamik olarak sonradan yüklenir.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Canlı Veri Panelleri (Dashboards):","type":"text","marks":[{"type":"bold"}]},{"text":" Sayfanın genel çerçevesi ve menüsü Statik kalırken; canlı grafikler, bildirimler veya anlık veri akışları Dinamik olarak sayfaya akar.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Sonuç","type":"text"}]},{"type":"paragraph","content":[{"text":"Partial Pre-Rendering (PPR), sayfaları tamamen statik ya da tamamen dinamik olarak ayırmak zorunda kalmadan ilerlemek isteyenler için pratik bir yaklaşım sunar. Herkes için ortak olan kısımlar hızlıca yüklenirken, kullanıcıya özel veriler ihtiyaç duyulduğunda sonradan gelir. Bu yapı, uygulama mimarisini daha sade tutmaya yardımcı olurken, kullanıcı tarafında da daha akıcı ve hızlı bir deneyim sağlar. Next.js içinde PPR’ı kurmak ve kullanmak, performansla esnekliği dengeli şekilde ele almak isteyenler için mantıklı bir tercih olabilir.","type":"text"}]}]},"cover":{"url":"https://res.cloudinary.com/dsotvo4bj/image/upload/v1766524655/prerenderingbanner_obtwuz.webp","width":3200,"height":1264,"public_id":"prerenderingbanner_obtwuz"},"tags":["Next.js","Performance","Caching"],"reading_minutes_en":5,"reading_minutes_tr":4,"seo_title_en":null,"seo_title_tr":null,"seo_description_en":null,"seo_description_tr":null,"published_at":"2025-12-24T12:00:00+00:00","created_at":"2026-09-20T10:36:25.928782+00:00","updated_at":"2026-09-20T10:36:25.928782+00:00","like_count":4},{"id":"78f99225-5391-40bb-9021-077eca091b36","slug":"react-19-performance-revolution","status":"published","title_en":"A Deep Dive into React 19 Performance","title_tr":"React 19 Performansına Derinlemesine Bir Bakış","excerpt_en":"Explore the revolutionary performance features in React 19, including the new React Compiler for automatic memoization, streaming SSR with Suspense, and advanced asset loading APIs.","excerpt_tr":"React 19'daki devrim niteliğindeki performans özelliklerini keşfedin: Otomatik memoizasyon için yeni React Derleyicisi, Suspense ile akışkan SSR ve gelişmiş varlık yükleme API'leri.","content_en":{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"Introduction: React 19 - Performance by Default","type":"text"}]},{"type":"paragraph","content":[{"text":"For years, optimizing React applications meant a disciplined use of hooks like ","type":"text"},{"text":"useMemo","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"useCallback","type":"text","marks":[{"type":"code"}]},{"text":", and HOCs like ","type":"text"},{"text":"React.memo","type":"text","marks":[{"type":"code"}]},{"text":". While powerful, these tools added mental overhead and boilerplate, turning performance optimization into a manual chore. React 19 changes the game entirely. With the introduction of the new React Compiler, performance is no longer an afterthought—it's the default. This post explores the revolutionary performance enhancements in React 19, from automatic memoization to smarter data fetching and asset loading.","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"React 19's philosophy is simple: write straightforward, intuitive code, and let the compiler handle the optimization. This marks a significant shift towards a more ergonomic and powerful developer experience.","type":"text"}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"1. The Game Changer: The React Compiler and Automatic Memoization","type":"text"}]},{"type":"paragraph","content":[{"text":"The single most significant performance update in React 19 is the React Compiler (previously codenamed 'React Forget'). This isn't a new API to learn, but an optimizing compiler that understands the rules of React and automatically rewrites your code to be more performant by memoizing components and hooks.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"The Old Way (React 18 and below)","type":"text"}]},{"type":"paragraph","content":[{"text":"Previously, to prevent a child component from re-rendering when its parent's state changed, you had to manually wrap it in ","type":"text"},{"text":"React.memo","type":"text","marks":[{"type":"code"}]},{"text":" and ensure any function props were wrapped in ","type":"text"},{"text":"useCallback","type":"text","marks":[{"type":"code"}]},{"text":".","type":"text"}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"text":"// React 18: Manual memoization required\nimport React, { useState, useCallback } from 'react';\n\nconst ExpensiveButton = React.memo(({ onClick }) => {\n console.log('ExpensiveButton is rendering...');\n return ;\n});\n\nfunction App() {\n const [count, setCount] = useState(0);\n\n // We need useCallback to prevent a new function from being created on every render\n const handleClick = useCallback(() => {\n console.log('Button clicked!');\n }, []);\n\n return (\n

Count: {count}

\n \n \n

\n );\n}","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"The New Way (React 19)","type":"text"}]},{"type":"paragraph","content":[{"text":"With the React Compiler, you just write the code. The compiler analyzes the JSX and automatically applies memoization where needed, eliminating the need for ","type":"text"},{"text":"React.memo","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"useMemo","type":"text","marks":[{"type":"code"}]},{"text":", and ","type":"text"},{"text":"useCallback","type":"text","marks":[{"type":"code"}]},{"text":" in most cases.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"text":"// React 19: The compiler handles everything automatically!\nimport React, { useState } from 'react';\n\n// No React.memo needed!\nfunction ExpensiveButton({ onClick }) {\n console.log('ExpensiveButton is rendering...'); // This will only log when props actually change\n return ;\n}\n\nfunction App() {\n const [count, setCount] = useState(0);\n\n // No useCallback needed!\n const handleClick = () => {\n console.log('Button clicked!');\n };\n\n return (\n

Count: {count}

\n \n \n

\n );\n}","type":"text"}]},{"type":"postImage","attrs":{"alt":"A simplified, clean circuit board representing automated optimization","src":"https://res.cloudinary.com/dsotvo4bj/image/upload/v1759227817/1_zP2hi9RdGlBeGR04TI0t3A_ceodmj.webp","width":1280,"height":720,"layout":"inline","caption":"React 19 cleans up our code by automating complex memoization logic.","publicId":"1_zP2hi9RdGlBeGR04TI0t3A_ceodmj"}},{"type":"heading","attrs":{"level":3},"content":[{"text":"2. Enhanced Server-Side Rendering (SSR) with Suspense","type":"text"}]},{"type":"paragraph","content":[{"text":"React 19 significantly improves SSR capabilities, especially with streaming. Previously, an entire page had to wait for the slowest data fetch on the server before any HTML could be sent to the client. With streaming SSR and Suspense, React can send the HTML shell of your page immediately, and then stream in the content as data becomes available on the server.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"text":"// With React 19, Suspense works seamlessly on the server.\nimport { Suspense } from 'react';\nimport { fetchProfileData } from './api'; // Assume this fetches data from an API\n\n// This component fetches data.\nasync function ProfileDetails() {\n const data = await fetchProfileData();\n return

{data.name}

;\n}\n\n// A simple loading skeleton.\nfunction ProfileSkeleton() {\n return

Loading profile...

;\n}\n\nfunction App() {\n return (\n

My Awesome App

\n }>\n \n \n

\n );\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"In this example, the user instantly sees 'My Awesome App' and 'Loading profile...'. Once ","type":"text"},{"text":"fetchProfileData","type":"text","marks":[{"type":"code"}]},{"text":" completes on the server, React streams the HTML for the user's name, replacing the skeleton without a full page refresh. This dramatically improves perceived performance and Time to First Byte (TTFB).","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"3. Advanced Asset Loading Optimization","type":"text"}]},{"type":"paragraph","content":[{"text":"Optimizing when and how you load assets like scripts, stylesheets, and fonts is critical for a fast user experience. React 19 introduces new Resource Loading APIs to give developers fine-grained control over this process.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"text":"import { preload, preinit } from 'react-dom';\n\nfunction MyComponent() {\n // Preload a high-priority stylesheet that will be needed soon\n preinit('critical-styles.css', { as: 'style' });\n\n // Preload a script for a component the user might navigate to\n preload('heavy-chart-library.js', { as: 'script' });\n\n return

Welcome!

;\n}","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"preload()","type":"text","marks":[{"type":"bold"},{"type":"code"}]},{"text":": A low-priority hint to the browser to start downloading a resource because it will likely be needed soon (e.g., for a subsequent page).","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"preinit()","type":"text","marks":[{"type":"bold"},{"type":"code"}]},{"text":": A high-priority instruction to the browser to fetch and initialize a resource because it will definitely be needed (e.g., a critical CSS file for the current view).","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"These APIs help eliminate render-blocking resources and reduce layout shifts, leading to a much smoother loading experience.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"4. Virtualization & Lazy Loading for Large Datasets","type":"text"}]},{"type":"paragraph","content":[{"text":"Displaying thousands of items in a list remains a performance challenge. React 19's features work beautifully with established patterns like virtualization and lazy loading.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Virtualization","type":"text"}]},{"type":"paragraph","content":[{"text":"Virtualization (or 'windowing') is the technique of only rendering the list items currently visible in the viewport. Libraries like ","type":"text"},{"text":"TanStack Virtual","type":"text","marks":[{"type":"bold"}]},{"text":" (","type":"text"},{"text":"@tanstack/react-virtual","type":"text","marks":[{"type":"code"}]},{"text":") or ","type":"text"},{"text":"react-window","type":"text","marks":[{"type":"bold"},{"type":"code"}]},{"text":" are excellent choices.","type":"text"}]},{"type":"paragraph","content":[{"text":"Here is a basic example using ","type":"text"},{"text":"react-window","type":"text","marks":[{"type":"code"}]},{"text":" to render a list of 10,000 items without performance issues:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"text":"import React from 'react';\nimport { FixedSizeList as List } from 'react-window';\n\n// Row component: receives style from react-window to position itself.\nconst Row = ({ index, style }) => (\n

\n Row {index + 1}\n

\n);\n\nconst VirtualizedList = () => (\n \n {Row} // Pass the Row component to the list\n \n);\n\nexport default VirtualizedList;","type":"text"}]},{"type":"postImage","attrs":{"alt":"A UI design showing a long list of components on a screen","src":"https://res.cloudinary.com/dsotvo4bj/image/upload/v1759227308/window-content-a-virtua-9c3c7f0cbf9a5_ygscye.jpg","width":578,"height":525,"layout":"inline","caption":"Libraries like react-window prevent the DOM from being overwhelmed by only rendering visible items.","publicId":"window-content-a-virtua-9c3c7f0cbf9a5_ygscye"}},{"type":"heading","attrs":{"level":4},"content":[{"text":"Combining with ","type":"text"},{"text":"React.lazy","type":"text","marks":[{"type":"code"}]},{"text":" and ","type":"text"},{"text":"Suspense","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"Imagine a data grid component that is large and only needed on a specific dashboard page. We can combine code splitting with virtualization for maximum effect. First, we lazy-load the grid component itself. Then, once loaded, that component uses virtualization to render its rows efficiently.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"text":"import React, { Suspense, lazy, useState } from 'react';\n\n// 1. Lazy-load the code for the component that handles the large list.\nconst LargeDataGrid = lazy(() => import('./components/LargeDataGrid')); // LargeDataGrid uses virtualization internally\n\nfunction Dashboard() {\n // State to control the visibility of the data grid\n const [showGrid, setShowGrid] = useState(false);\n\n return (\n

User Dashboard

\n {/* Other dashboard components could be here */}\n\n \n\n {showGrid && (\n Loading Data Grid...

}>\n

All Transactions

\n {/* 2. The component is only fetched and rendered when needed. */}\n \n \n )}\n \n );\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"This two-pronged approach ensures that the initial page load is incredibly fast, as neither the component's code nor its massive dataset is loaded upfront.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Conclusion","type":"text"}]},{"type":"paragraph","content":[{"text":"React 19 represents a paradigm shift in how we approach performance. By baking optimization directly into the compiler and enhancing APIs for server rendering and asset loading, the React team has freed developers to focus on what matters most: building great features and user interfaces. The future of React is not just more powerful, but also simpler and faster by default.","type":"text"}]}]},"content_tr":{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"Giriş: React 19 - Varsayılan Olarak Performans","type":"text"}]},{"type":"paragraph","content":[{"text":"Yıllarca React uygulamalarını optimize etmek, ","type":"text"},{"text":"useMemo","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"useCallback","type":"text","marks":[{"type":"code"}]},{"text":" gibi hook'ların ve ","type":"text"},{"text":"React.memo","type":"text","marks":[{"type":"code"}]},{"text":" gibi HOC'lerin disiplinli bir şekilde kullanılması anlamına geliyordu. Bu araçlar güçlü olsalar da, zihinsel yük ve kod tekrarı ekleyerek performans optimizasyonunu manuel bir angaryaya dönüştürüyordu. React 19, oyunu tamamen değiştiriyor. Yeni React Derleyicisi'nin (React Compiler) tanıtılmasıyla birlikte, performans artık sonradan düşünülen bir şey değil, varsayılan bir özellik haline geliyor. Bu yazı, otomatik memoizasyondan daha akıllı veri çekme ve varlık yükleme yöntemlerine kadar React 19'daki devrim niteliğindeki performans iyileştirmelerini inceliyor.","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"React 19'un felsefesi basit: Anlaşılır, sezgisel kod yazın ve optimizasyonu derleyiciye bırakın. Bu, daha ergonomik ve güçlü bir geliştirici deneyimine doğru önemli bir değişimi işaret ediyor.","type":"text"}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"1. Ezber Bozan Gelişme: React Derleyicisi ve Otomatik Memoizasyon","type":"text"}]},{"type":"paragraph","content":[{"text":"React 19'daki en önemli performans güncellemesi, React Derleyicisi'dir (önceki kod adı 'React Forget'). Bu, öğrenilecek yeni bir API değil, React'in kurallarını anlayan ve bileşenleri ve hook'ları memoize ederek kodunuzu otomatik olarak daha performanslı olacak şekilde yeniden yazan bir optimize edici derleyicidir.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Eski Yöntem (React 18 ve öncesi)","type":"text"}]},{"type":"paragraph","content":[{"text":"Daha önce, bir üst bileşenin state'i değiştiğinde alt bileşenin yeniden render olmasını önlemek için onu manuel olarak ","type":"text"},{"text":"React.memo","type":"text","marks":[{"type":"code"}]},{"text":" ile sarmalamanız ve fonksiyon prop'larının ","type":"text"},{"text":"useCallback","type":"text","marks":[{"type":"code"}]},{"text":" ile sarmalandığından emin olmanız gerekiyordu.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"text":"// React 18: Manuel memoizasyon gerekli\nimport React, { useState, useCallback } from 'react';\n\nconst ExpensiveButton = React.memo(({ onClick }) => {\n console.log('ExpensiveButton render ediliyor...');\n return ;\n});\n\nfunction App() {\n const [count, setCount] = useState(0);\n\n // Her render'da yeni bir fonksiyon oluşmasını engellemek için useCallback gerekli\n const handleClick = useCallback(() => {\n console.log('Butona tıklandı!');\n }, []);\n\n return (\n

Sayı: {count}

\n \n \n

\n );\n}","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Yeni Yöntem (React 19)","type":"text"}]},{"type":"paragraph","content":[{"text":"React Derleyicisi ile sadece kodunuzu yazarsınız. Derleyici, JSX'i analiz eder ve gerektiğinde otomatik olarak memoizasyon uygular, bu da çoğu durumda ","type":"text"},{"text":"React.memo","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"useMemo","type":"text","marks":[{"type":"code"}]},{"text":" ve ","type":"text"},{"text":"useCallback","type":"text","marks":[{"type":"code"}]},{"text":" ihtiyacını ortadan kaldırır.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"text":"// React 19: Derleyici her şeyi otomatik olarak hallediyor!\nimport React, { useState } from 'react';\n\n// React.memo'ya gerek yok!\nfunction ExpensiveButton({ onClick }) {\n console.log('ExpensiveButton render ediliyor...'); // Bu sadece props'lar gerçekten değiştiğinde loglanır\n return ;\n}\n\nfunction App() {\n const [count, setCount] = useState(0);\n\n // useCallback'e gerek yok!\n const handleClick = () => {\n console.log('Butona tıklandı!');\n };\n\n return (\n

Sayı: {count}

\n \n \n

\n );\n}","type":"text"}]},{"type":"postImage","attrs":{"alt":"Otomatik optimizasyonu temsil eden sade ve temiz bir devre kartı","src":"https://res.cloudinary.com/dsotvo4bj/image/upload/v1759227817/1_zP2hi9RdGlBeGR04TI0t3A_ceodmj.webp","width":1280,"height":720,"layout":"inline","caption":"React 19, karmaşık memoizasyon mantığını otomatikleştirerek kodumuzu temizler.","publicId":"1_zP2hi9RdGlBeGR04TI0t3A_ceodmj"}},{"type":"heading","attrs":{"level":3},"content":[{"text":"2. Suspense ile Gelişmiş Sunucu Taraflı Render (SSR)","type":"text"}]},{"type":"paragraph","content":[{"text":"React 19, özellikle streaming (akış) ile SSR yeteneklerini önemli ölçüde geliştirir. Eskiden, sunucudaki en yavaş veri çekme işlemini tüm sayfanın beklemesi gerekiyordu ve ancak ondan sonra istemciye HTML gönderilebiliyordu. Streaming SSR ve Suspense ile React, sayfanızın HTML iskeletini hemen gönderebilir ve ardından sunucuda veriler geldikçe içeriği akış halinde yollayabilir.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"text":"// React 19 ile Suspense, sunucuda sorunsuz bir şekilde çalışır.\nimport { Suspense } from 'react';\nimport { fetchProfileData } from './api'; // bunun bir API'dan veri çektiğini varsayalım\n\n// Bu bileşen veri çeker.\nasync function ProfileDetails() {\n const data = await fetchProfileData();\n return

{data.name}

;\n}\n\n// Basit bir yüklenme iskeleti.\nfunction ProfileSkeleton() {\n return

Profil yükleniyor...

;\n}\n\nfunction App() {\n return (\n

Harika Uygulamam

\n }>\n \n \n

\n );\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"Bu örnekte, kullanıcı anında 'Harika Uygulamam' ve 'Profil yükleniyor...' yazılarını görür. Sunucuda ","type":"text"},{"text":"fetchProfileData","type":"text","marks":[{"type":"code"}]},{"text":" tamamlandığında, React kullanıcının adını içeren HTML'i akışla gönderir ve iskeletin yerini alır; hem de tam sayfa yenilemesi olmadan. Bu, hissedilen performansı ve İlk Bayta Kadar Geçen Süreyi (TTFB) önemli ölçüde iyileştirir.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"3. Gelişmiş Varlık Yükleme Optimizasyonu","type":"text"}]},{"type":"paragraph","content":[{"text":"Script, stil dosyası ve font gibi varlıkları ne zaman ve nasıl yüklediğinizi optimize etmek, hızlı bir kullanıcı deneyimi için kritik öneme sahiptir. React 19, geliştiricilere bu süreç üzerinde hassas kontrol sağlamak için yeni Kaynak Yükleme API'leri sunar.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"text":"import { preload, preinit } from 'react-dom';\n\nfunction MyComponent() {\n // Yakında ihtiyaç duyulacak yüksek öncelikli bir stil dosyasını önceden yükle\n preinit('critical-styles.css', { as: 'style' });\n\n // Kullanıcının gidebileceği bir bileşen için bir script'i önceden yükle\n preload('heavy-chart-library.js', { as: 'script' });\n\n return

Hoş geldiniz!

;\n}","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"preload()","type":"text","marks":[{"type":"bold"},{"type":"code"}]},{"text":": Tarayıcıya bir kaynağı indirmeye başlaması için verilen düşük öncelikli bir ipucudur, çünkü muhtemelen yakında (örneğin, bir sonraki sayfada) ihtiyaç duyulacaktır.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"preinit()","type":"text","marks":[{"type":"bold"},{"type":"code"}]},{"text":": Tarayıcıya bir kaynağı alıp başlatması için verilen yüksek öncelikli bir talimattır, çünkü kesinlikle ihtiyaç duyulacaktır (örneğin, mevcut görünüm için kritik bir CSS dosyası).","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Bu API'ler, render'ı engelleyen kaynakları ortadan kaldırmaya ve düzen kaymalarını azaltmaya yardımcı olarak çok daha akıcı bir yükleme deneyimi sağlar.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"4. Büyük Veri Kümeleri için Sanallaştırma ve Lazy Loading","type":"text"}]},{"type":"paragraph","content":[{"text":"Bir listede binlerce öğeyi göstermek, bir performans zorluğu olmaya devam ediyor. React 19'un özellikleri, sanallaştırma ve lazy loading gibi yerleşik desenlerle harika bir uyum içinde çalışır.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Sanallaştırma (Virtualization)","type":"text"}]},{"type":"paragraph","content":[{"text":"Sanallaştırma (veya 'pencereleme'), yalnızca o anda ekranda görünen liste öğelerini render etme tekniğidir. ","type":"text"},{"text":"TanStack Virtual","type":"text","marks":[{"type":"bold"}]},{"text":" (","type":"text"},{"text":"@tanstack/react-virtual","type":"text","marks":[{"type":"code"}]},{"text":") veya ","type":"text"},{"text":"react-window","type":"text","marks":[{"type":"bold"},{"type":"code"}]},{"text":" gibi kütüphaneler bu iş için mükemmel seçeneklerdir.","type":"text"}]},{"type":"paragraph","content":[{"text":"İşte ","type":"text"},{"text":"react-window","type":"text","marks":[{"type":"code"}]},{"text":" kullanarak 10.000 öğelik bir listeyi performans sorunu yaşamadan render eden temel bir örnek:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"text":"import React from 'react';\nimport { FixedSizeList as List } from 'react-window';\n\n// Satır bileşeni: Kendini konumlandırmak için style prop'unu react-window'dan alır.\nconst Row = ({ index, style }) => (\n

\n Satır {index + 1}\n

\n);\n\nconst VirtualizedList = () => (\n \n {Row} // Row bileşenini listeye gönderiyoruz\n \n);\n\nexport default VirtualizedList;","type":"text"}]},{"type":"postImage","attrs":{"alt":"Bir ekranda uzun bir bileşen listesi gösteren bir kullanıcı arayüzü tasarımı","src":"https://res.cloudinary.com/dsotvo4bj/image/upload/v1759227308/window-content-a-virtua-9c3c7f0cbf9a5_ygscye.jpg","width":578,"height":525,"layout":"inline","caption":"react-window gibi kütüphaneler, yalnızca görünür öğeleri render ederek DOM'un aşırı yüklenmesini önler.","publicId":"window-content-a-virtua-9c3c7f0cbf9a5_ygscye"}},{"type":"heading","attrs":{"level":4},"content":[{"text":"React.lazy","type":"text","marks":[{"type":"code"}]},{"text":" ve ","type":"text"},{"text":"Suspense","type":"text","marks":[{"type":"code"}]},{"text":" ile Birleştirme","type":"text"}]},{"type":"paragraph","content":[{"text":"Yalnızca belirli bir yönetici panelinde ihtiyaç duyulan büyük bir veri tablosu bileşeni hayal edin. Maksimum etki için kod bölmeyi sanallaştırma ile birleştirebiliriz. Önce, tablo bileşeninin kendisini ","type":"text"},{"text":"lazy-load","type":"text","marks":[{"type":"code"}]},{"text":" ile yükleriz. Ardından, yüklendikten sonra, bu bileşen kendi satırlarını verimli bir şekilde render etmek için sanallaştırma kullanır.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"text":"import React, { Suspense, lazy, useState } from 'react';\n\n// 1. Büyük listeyi yöneten bileşenin kodunu lazy-load ile yükle.\nconst LargeDataGrid = lazy(() => import('./components/LargeDataGrid')); // LargeDataGrid kendi içinde sanallaştırma kullanıyor\n\nfunction Dashboard() {\n // Veri tablosunun görünürlüğünü kontrol etmek için state\n const [showGrid, setShowGrid] = useState(false);\n\n return (\n

Kullanıcı Paneli

\n {/* Diğer panel bileşenleri burada olabilir */}\n\n \n\n {showGrid && (\n Veri Tablosu Yükleniyor...

}>\n

Tüm İşlemler

\n {/* 2. Bileşen, yalnızca ihtiyaç duyulduğunda çekilir ve render edilir. */}\n \n \n )}\n \n );\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"Bu iki aşamalı yaklaşım, ne bileşenin kodunun ne de devasa veri setinin başlangıçta yüklenmemesini sağlayarak ilk sayfa yüklemesinin inanılmaz derecede hızlı olmasını garanti eder.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Sonuç","type":"text"}]},{"type":"paragraph","content":[{"text":"React 19, performansa yaklaşımımızda bir paradigma değişimini temsil ediyor. React ekibi, optimizasyonu doğrudan derleyiciye dahil ederek ve sunucu render'ı ile varlık yükleme için API'leri geliştirerek, geliştiricilerin en önemli şeye odaklanmalarını sağladı: harika özellikler ve kullanıcı arayüzleri oluşturmak. React'in geleceği sadece daha güçlü değil, aynı zamanda varsayılan olarak daha basit ve daha hızlı.","type":"text"}]}]},"cover":{"url":"https://res.cloudinary.com/dsotvo4bj/image/upload/v1789900582/portfolio/posts/xrnbolzjobkrmvdgf1nl.webp","width":1740,"height":1160,"public_id":"portfolio/posts/xrnbolzjobkrmvdgf1nl"},"tags":["React","Performance","Frontend"],"reading_minutes_en":6,"reading_minutes_tr":5,"seo_title_en":null,"seo_title_tr":null,"seo_description_en":null,"seo_description_tr":null,"published_at":"2025-09-09T12:00:00+00:00","created_at":"2026-09-20T10:36:25.928782+00:00","updated_at":"2026-09-20T10:36:25.928782+00:00","like_count":2}]}]}]]}]