Next.js use cache: React Server Components için Yeni Cache Sistemi

⚠️Önemli Not

Bu özellik henüz canary sürümünde bulunuyor. Production ortamında kullanmadan önce stable sürümünü beklemeni öneririm.

Next.js ekibi, React Server Components'in performansını artırmak için güçlü bir yeni özellik geliştirdi: use cache. Bu özellik şu anda canary sürümünde aktif olarak kullanılabiliyor ve yakında stable sürüme geçmesi bekleniyor. Bu yazıda, use cache'in ne olduğunu, nasıl çalıştığını ve neden bu kadar önemli olduğunu kendi deneyimlerimle birlikte anlatacağım.

use cache Nedir?

📝Kısa Tanım

use cache, React Server Components'te hesaplama sonuçlarını cache'leyerek performansı artıran yeni bir direktiftir. Client-side'da useMemo veya react cache ile cache'leme yapabiliyorken, server-side'da unstable_cache kullanıyorduk. use cache bu olaya farklı bir bakış açısı getiriyor ve server-side hesaplamaları cache'leme imkanı sunuyor.

Temel Kullanım Örneği

🧪Örnek: Okuma Süresi Hesaplama

typescript

"use cache";
 
// Bu fonksiyon cache'lenecek
async function calculateReadingTime(content: string) {
	// Karmaşık hesaplama simülasyonu
	const words = content.split(" ").length;
	const readingSpeed = 200; // dakikada kelime sayısı
	const minutes = Math.ceil(words / readingSpeed);
	await new Promise((resolve) => setTimeout(resolve, 100));
	return { minutes, words, readingSpeed };
}
 
export { calculateReadingTime };

Aynı içerik için sadece bir kez çalışır, sonraki çağrılar cache'den döner.

Next.js Cache Sistemi Karşılaştırması

Request Memoization: Aynı request içinde tekrar çağrılar cache'lenir.
Data Cache: Farklı requestler arası cache'leme (revalidate, force-cache).
use cache: Fonksiyon seviyesinde cache'leme, parametrelere göre otomatik anahtar.

Cache Invalidation: Cache'i Nasıl Temizlerim?

❗Cache Invalidation

Cache'lenmiş verileri güncellemek için revalidateTag kullanabilirsin. Böylece ilgili cache'ler temizlenir ve güncel veriyle tekrar hesaplanır.

Gerçek Dünya Örnekleri

Blog Yazısı İşleme

🧪Markdown İşleme

typescript

"use cache";
 
async function processMarkdownContent(content: string) {
	// MDX parsing (yavaş işlem)
	const html = await markdownToHtml(content);
	// İçerik analizi
	const analysis = {
		wordCount: content.split(" ").length,
		readingTime: Math.ceil(content.split(" ").length / 200),
		headings: extractHeadings(content),
		codeBlocks: extractCodeBlocks(content),
	};
	return { html, analysis };
}
 
export { processMarkdownContent };

E-ticaret Ürün Filtreleme

🧪Ürün Filtreleme

typescript

"use cache";
 
async function processProductsWithFilters(
	category: string,
	filters: { minPrice?: number; maxPrice?: number; rating?: number }
) {
	// Veritabanından ürünleri al
	const products = await getProductsByCategory(category);
	// Karmaşık filtreleme ve hesaplamalar
	return products
		.filter((product) => {
			if (filters.minPrice && product.price < filters.minPrice) return false;
			if (filters.maxPrice && product.price > filters.maxPrice) return false;
			if (filters.rating && product.rating < filters.rating) return false;
			return true;
		})
		.map((product) => ({
			...product,
			discountedPrice: calculateDiscount(product),
			shippingInfo: calculateShipping(product),
			popularity: calculatePopularity(product),
		}))
		.sort((a, b) => b.popularity - a.popularity);
}
 
export { processProductsWithFilters };

YouTube

Konuyu video anlatımıyla da takip edebilirsin.

Kanala git →

Performans Testi: Önce ve Sonra

💬Performans Karşılaştırması

typescript

// CACHE OLMADAN - Her seferinde hesaplanıyor
async function calculateWithoutCache(numbers: number[]) {
	console.time("cache-olmadan");
	for (let i = 0; i < 5; i++) {
		await heavyCalculation(numbers);
	}
	console.timeEnd("cache-olmadan");
	// Sonuç: 2.8 saniye
}
 
// CACHE İLE - Sadece ilk seferinde hesaplanıyor
("use cache");
async function calculateWithCache(numbers: number[]) {
	console.time("cache-ile");
	for (let i = 0; i < 5; i++) {
		await heavyCalculation(numbers); // İlk çağrıdan sonra cache'den
	}
	console.timeEnd("cache-ile");
	// Sonuç: 0.6 saniye (%78 daha hızlı!)
}
 
async function heavyCalculation(data: number[]) {
	return new Promise((resolve) => {
		setTimeout(() => {
			const result = data.reduce(
				(acc, num) => acc + Math.pow(num, 3) + Math.sqrt(num),
				0
			);
			resolve(result);
		}, 500);
	});
}

Ne Zaman Kullanmalı, Ne Zaman Kullanmamalı?

💡İdeal Kullanım Alanları

CPU-intensive hesaplamalar (istatistik, analiz) - Markdown/MDX parsing işlemleri - Kompleks veri dönüşümleri - API response'larının işlenmesi - Dosya okuma ve parsing işlemleri

🚨Dikkat Edilmesi Gerekenler

Çok sık değişen veriler için kullanma - Memory kullanımını takip et - Cache invalidation stratejini planla - User-specific veriler için dikkatli ol

Pratik Cache Key Stratejileri

📖Cache Key Stratejileri

Parametrelere göre otomatik cache key oluşur - Date objesi yerine string kullan (cache key için) - Nested cache fonksiyonları ile performans artırılabilir

Sonuç ve Önerilerim

📋Özet

use cache gerçekten güçlü bir özellik. Özellikle server-side hesaplamaları olan projeler için game-changer olacak. Benim deneyimlerime göre:

En büyük faydaları:

Server-side cache'leme artık çok kolay
CPU-intensive işlemler için %70+ performans artışı
Existing Next.js cache sistemiyle mükemmel uyum
Minimal kod değişikliği gerekiyor

Dikkat etmem gerekenler:

Memory usage'ı takip etmek kritik
Cache invalidation stratejisi önemli
User-specific data için extra dikkat

💡Takip Et

Next.js'in official documentation sayfasını takip ederek use cache'in stable sürüme geçiş durumunu izleyebilirsin.

⚠️Önemli Not

Bu özellik henüz canary sürümünde bulunuyor. Production ortamında kullanmadan önce stable sürümünü beklemeni öneririm.

use cache Nedir?

📝Kısa Tanım

Temel Kullanım Örneği

🧪Örnek: Okuma Süresi Hesaplama

typescript

"use cache";
 
// Bu fonksiyon cache'lenecek
async function calculateReadingTime(content: string) {
	// Karmaşık hesaplama simülasyonu
	const words = content.split(" ").length;
	const readingSpeed = 200; // dakikada kelime sayısı
	const minutes = Math.ceil(words / readingSpeed);
	await new Promise((resolve) => setTimeout(resolve, 100));
	return { minutes, words, readingSpeed };
}
 
export { calculateReadingTime };

Aynı içerik için sadece bir kez çalışır, sonraki çağrılar cache'den döner.

Next.js Cache Sistemi Karşılaştırması

Request Memoization: Aynı request içinde tekrar çağrılar cache'lenir.
Data Cache: Farklı requestler arası cache'leme (revalidate, force-cache).
use cache: Fonksiyon seviyesinde cache'leme, parametrelere göre otomatik anahtar.

Cache Invalidation: Cache'i Nasıl Temizlerim?

❗Cache Invalidation

Cache'lenmiş verileri güncellemek için revalidateTag kullanabilirsin. Böylece ilgili cache'ler temizlenir ve güncel veriyle tekrar hesaplanır.

Gerçek Dünya Örnekleri

Blog Yazısı İşleme

🧪Markdown İşleme

typescript

"use cache";
 
async function processMarkdownContent(content: string) {
	// MDX parsing (yavaş işlem)
	const html = await markdownToHtml(content);
	// İçerik analizi
	const analysis = {
		wordCount: content.split(" ").length,
		readingTime: Math.ceil(content.split(" ").length / 200),
		headings: extractHeadings(content),
		codeBlocks: extractCodeBlocks(content),
	};
	return { html, analysis };
}
 
export { processMarkdownContent };

E-ticaret Ürün Filtreleme

🧪Ürün Filtreleme

typescript

"use cache";
 
async function processProductsWithFilters(
	category: string,
	filters: { minPrice?: number; maxPrice?: number; rating?: number }
) {
	// Veritabanından ürünleri al
	const products = await getProductsByCategory(category);
	// Karmaşık filtreleme ve hesaplamalar
	return products
		.filter((product) => {
			if (filters.minPrice && product.price < filters.minPrice) return false;
			if (filters.maxPrice && product.price > filters.maxPrice) return false;
			if (filters.rating && product.rating < filters.rating) return false;
			return true;
		})
		.map((product) => ({
			...product,
			discountedPrice: calculateDiscount(product),
			shippingInfo: calculateShipping(product),
			popularity: calculatePopularity(product),
		}))
		.sort((a, b) => b.popularity - a.popularity);
}
 
export { processProductsWithFilters };

YouTube

Konuyu video anlatımıyla da takip edebilirsin.

Kanala git →

Performans Testi: Önce ve Sonra

💬Performans Karşılaştırması

typescript

// CACHE OLMADAN - Her seferinde hesaplanıyor
async function calculateWithoutCache(numbers: number[]) {
	console.time("cache-olmadan");
	for (let i = 0; i < 5; i++) {
		await heavyCalculation(numbers);
	}
	console.timeEnd("cache-olmadan");
	// Sonuç: 2.8 saniye
}
 
// CACHE İLE - Sadece ilk seferinde hesaplanıyor
("use cache");
async function calculateWithCache(numbers: number[]) {
	console.time("cache-ile");
	for (let i = 0; i < 5; i++) {
		await heavyCalculation(numbers); // İlk çağrıdan sonra cache'den
	}
	console.timeEnd("cache-ile");
	// Sonuç: 0.6 saniye (%78 daha hızlı!)
}
 
async function heavyCalculation(data: number[]) {
	return new Promise((resolve) => {
		setTimeout(() => {
			const result = data.reduce(
				(acc, num) => acc + Math.pow(num, 3) + Math.sqrt(num),
				0
			);
			resolve(result);
		}, 500);
	});
}

Ne Zaman Kullanmalı, Ne Zaman Kullanmamalı?

💡İdeal Kullanım Alanları

CPU-intensive hesaplamalar (istatistik, analiz) - Markdown/MDX parsing işlemleri - Kompleks veri dönüşümleri - API response'larının işlenmesi - Dosya okuma ve parsing işlemleri

🚨Dikkat Edilmesi Gerekenler

Çok sık değişen veriler için kullanma - Memory kullanımını takip et - Cache invalidation stratejini planla - User-specific veriler için dikkatli ol

Pratik Cache Key Stratejileri

📖Cache Key Stratejileri

Parametrelere göre otomatik cache key oluşur - Date objesi yerine string kullan (cache key için) - Nested cache fonksiyonları ile performans artırılabilir

Sonuç ve Önerilerim

📋Özet

use cache gerçekten güçlü bir özellik. Özellikle server-side hesaplamaları olan projeler için game-changer olacak. Benim deneyimlerime göre:

En büyük faydaları:

Server-side cache'leme artık çok kolay
CPU-intensive işlemler için %70+ performans artışı
Existing Next.js cache sistemiyle mükemmel uyum
Minimal kod değişikliği gerekiyor

Dikkat etmem gerekenler:

Memory usage'ı takip etmek kritik
Cache invalidation stratejisi önemli
User-specific data için extra dikkat

💡Takip Et

Next.js'in official documentation sayfasını takip ederek use cache'in stable sürüme geçiş durumunu izleyebilirsin.

Next.js use cache: React Server Components için Yeni Cache Sistemi

use cache Nedir?

Temel Kullanım Örneği

Next.js Cache Sistemi Karşılaştırması

Cache Invalidation: Cache'i Nasıl Temizlerim?

Gerçek Dünya Örnekleri

Blog Yazısı İşleme

E-ticaret Ürün Filtreleme

Performans Testi: Önce ve Sonra

Ne Zaman Kullanmalı, Ne Zaman Kullanmamalı?

Pratik Cache Key Stratejileri

Sonuç ve Önerilerim

Yorumlar

Benzer yazılar

Next.js Form Validasyon Yöntemleri: Client ve Server Side Doğrulama Rehberi

Next.js App Router ile MDX Kullanımı: Adım Adım TypeScript Rehberi

Web Geliştirici Rehberi

Next.js use cache: React Server Components için Yeni Cache Sistemi

use cache Nedir?

Temel Kullanım Örneği

Next.js Cache Sistemi Karşılaştırması

Cache Invalidation: Cache'i Nasıl Temizlerim?

Gerçek Dünya Örnekleri

Blog Yazısı İşleme

E-ticaret Ürün Filtreleme

Performans Testi: Önce ve Sonra

Ne Zaman Kullanmalı, Ne Zaman Kullanmamalı?

Pratik Cache Key Stratejileri

Sonuç ve Önerilerim

Yorumlar

Benzer yazılar

Next.js Form Validasyon Yöntemleri: Client ve Server Side Doğrulama Rehberi

Next.js App Router ile MDX Kullanımı: Adım Adım TypeScript Rehberi

Web Geliştirici Rehberi