{"id":43761,"date":"2026-08-01T09:16:35","date_gmt":"2026-08-01T06:16:35","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/next-js-onbellekleme-stratejileri-performansi-nasil-ucurursunuz\/"},"modified":"2026-08-01T09:17:08","modified_gmt":"2026-08-01T06:17:08","slug":"next-js-onbellekleme-stratejileri-performansi-nasil-ucurursunuz","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/next-js-onbellekleme-stratejileri-performansi-nasil-ucurursunuz\/","title":{"rendered":"Next.js \u00d6nbellekleme Stratejileri: Performans\u0131 Nas\u0131l U\u00e7urursunuz?"},"content":{"rendered":"

Next.js \u00d6nbellekleme Stratejileri: Performans\u0131 Nas\u0131l U\u00e7urursunuz?<\/h2>\n

Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini merkeze alarak h\u0131z ve verimlilik sunmak zorundad\u0131r. Peki, sayfalar\u0131n \u0131\u015f\u0131k h\u0131z\u0131nda y\u00fcklenmesini, sunucu y\u00fck\u00fcn\u00fcn azalmas\u0131n\u0131 ve genel performans\u0131n artmas\u0131n\u0131 nas\u0131l sa\u011flars\u0131n\u0131z? \u0130\u015fte bu noktada \u00f6nbellekleme (caching) devreye giriyor. Next.js, geli\u015ftiricilere g\u00fc\u00e7l\u00fc ve esnek \u00f6nbellekleme stratejileri sunarak bu zorluklar\u0131n \u00fcstesinden gelmelerine yard\u0131mc\u0131 olur. Bu makalede, Next.js’in sundu\u011fu \u00e7e\u015fitli \u00f6nbellekleme mekanizmalar\u0131n\u0131 derinlemesine inceleyecek, ger\u00e7ek d\u00fcnya senaryolar\u0131yla destekleyecek ve uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131 bir \u00fcst seviyeye ta\u015f\u0131yacak ipu\u00e7lar\u0131n\u0131 payla\u015faca\u011f\u0131z.<\/p>\n

Neden \u00d6nbellekleme \u00d6nemlidir ve Next.js Bize Ne Sunar?<\/h3>\n

Web sitelerinin ve uygulamalar\u0131n performans\u0131, kullan\u0131c\u0131 memnuniyeti, arama motoru s\u0131ralamalar\u0131 ve hatta d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131 \u00fczerinde do\u011frudan bir etkiye sahiptir. Yava\u015f y\u00fcklenen bir sayfa, kullan\u0131c\u0131lar\u0131n sabr\u0131n\u0131 t\u00fcketebilir ve rakip sitelere y\u00f6nelmelerine neden olabilir. \u00d6nbellekleme, bu performans\u0131 art\u0131rman\u0131n temel yollar\u0131ndan biridir. En basit ifadeyle, \u00f6nbellekleme, s\u0131k\u00e7a eri\u015filen verilerin veya i\u00e7eriklerin daha h\u0131zl\u0131 eri\u015filebilir bir konumda saklanmas\u0131 s\u00fcrecidir. Bu sayede, her istek geldi\u011finde verinin orijinal kayna\u011f\u0131ndan yeniden \u00e7ekilmesi gereksinimi ortadan kalkar, b\u00f6ylece gecikme (latency) azal\u0131r ve sunucu \u00fczerindeki y\u00fck \u00f6nemli \u00f6l\u00e7\u00fcde hafifler. Bir d\u00fc\u015f\u00fcn\u00fcn, bir e-ticaret sitesinde binlerce \u00fcr\u00fcn listesi var ve her kullan\u0131c\u0131 bu listeye her eri\u015fti\u011finde veritaban\u0131ndan yeniden \u00e7ekiliyor. Bu, hem sunucu kaynaklar\u0131n\u0131 a\u015f\u0131r\u0131 kullan\u0131r hem de kullan\u0131c\u0131n\u0131n beklemek zorunda kalmas\u0131na neden olur. \u00d6nbellekleme sayesinde, bu \u00fcr\u00fcn listesi bir kez \u00e7ekilir ve belirlenen bir s\u00fcre boyunca \u00f6nbellekte tutulur, sonraki istekler i\u00e7in an\u0131nda sunulur.<\/p>\n

Next.js, React tabanl\u0131 bir framework (yaz\u0131l\u0131m \u00e7er\u00e7evesi) olarak, performans optimizasyonunu \u00e7ekirde\u011fine entegre etmi\u015ftir. Geleneksel web geli\u015ftirme yakla\u015f\u0131mlar\u0131n\u0131n aksine, Next.js, hem sunucu taraf\u0131nda (server-side) hem de istemci taraf\u0131nda (client-side) g\u00fc\u00e7l\u00fc \u00f6nbellekleme mekanizmalar\u0131 sunarak geli\u015ftiricilere benzersiz bir kontrol sa\u011flar. \u00d6zellikle App Router ile birlikte gelen yenilikler, veri \u00f6nbellekleme ve tam rota \u00f6nbellekleme gibi konularda \u00e7\u0131\u011f\u0131r a\u00e7m\u0131\u015ft\u0131r. Bu yeni mimari, React Server Components (RSC) ve fetch<\/code> API’sinin geni\u015fletilmi\u015f yeteneklerini kullanarak, geli\u015ftiricilerin hangi verinin ne zaman ve ne kadar s\u00fcreyle \u00f6nbelle\u011fe al\u0131naca\u011f\u0131n\u0131 \u00e7ok daha granular (ince taneli) bir \u015fekilde y\u00f6netmelerine olanak tan\u0131r. Sunucu taraf\u0131nda olu\u015fturulan sayfalar\u0131n ve verilerin \u00f6nbelle\u011fe al\u0131nmas\u0131, ilk y\u00fckleme s\u00fcrelerini dramatik bir \u015fekilde k\u0131salt\u0131rken, istemci taraf\u0131ndaki \u00f6nbellekleme ise tekrarlayan ziyaretlerde daha ak\u0131c\u0131 bir deneyim sunar. Dolay\u0131s\u0131yla, Next.js sadece bir geli\u015ftirme arac\u0131 olmaktan \u00f6te, performans odakl\u0131 uygulamalar olu\u015fturmak i\u00e7in kapsaml\u0131 bir \u00e7\u00f6z\u00fcm y\u0131\u011f\u0131n\u0131 sunar.<\/p>\n

Next.js Veri \u00d6nbelle\u011fi (Data Cache) Nas\u0131l \u00c7al\u0131\u015f\u0131r ve Nas\u0131l Kullan\u0131l\u0131r?<\/h3>\n

Next.js 13 ve sonras\u0131 ile App Router’\u0131n tan\u0131t\u0131lmas\u0131yla birlikte, veri \u00f6nbellekleme stratejileri k\u00f6kl\u00fc bir de\u011fi\u015fime u\u011frad\u0131. Art\u0131k, yerle\u015fik fetch<\/code> API’si, otomatik olarak istekleri \u00f6nbelle\u011fe alma yetene\u011fiyle geni\u015fletildi. Bu, sunucu bile\u015fenleri (Server Components) i\u00e7erisinde yap\u0131lan fetch<\/code> \u00e7a\u011fr\u0131lar\u0131n\u0131n varsay\u0131lan olarak \u00f6nbelle\u011fe al\u0131nd\u0131\u011f\u0131 anlam\u0131na gelir. Bu \u00f6zellik, sunucu taraf\u0131nda veri \u00e7ekme i\u015flemini optimize ederek, ayn\u0131 veriye yap\u0131lan tekrarlayan isteklerde performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. \u00d6rne\u011fin, bir \u00fcr\u00fcn detay sayfas\u0131nda \u00fcr\u00fcn bilgilerini \u00e7ekmek i\u00e7in fetch<\/code> kulland\u0131\u011f\u0131n\u0131zda, bu veri otomatik olarak Next.js’in veri \u00f6nbelle\u011finde saklan\u0131r ve sayfa yeniden olu\u015fturuldu\u011funda veya ba\u015fka bir kullan\u0131c\u0131 ayn\u0131 sayfay\u0131 ziyaret etti\u011finde \u00f6nbellekten servis edilir.<\/p>\n

Veri \u00f6nbelle\u011fi, varsay\u0131lan olarak statik olarak olu\u015fturulan sayfalar (Static Site Generation – SSG) ve art\u0131ml\u0131 statik yeniden olu\u015fturma (Incremental Static Regeneration – ISR) gibi kavramlarla yak\u0131ndan ili\u015fkilidir. Ancak App Router ile bu yetenekler \u00e7ok daha esnek hale geldi. fetch<\/code> fonksiyonuna ekleyebilece\u011finiz cache<\/code> ve revalidate<\/code> se\u00e7enekleri sayesinde, \u00f6nbellekleme davran\u0131\u015f\u0131n\u0131 her bir veri iste\u011fi baz\u0131nda \u00f6zelle\u015ftirebilirsiniz. \u00d6rne\u011fin, bir verinin 60 saniye boyunca \u00f6nbellekte kalmas\u0131n\u0131 istiyorsan\u0131z, revalidate<\/code> se\u00e7ene\u011fini kullanabilirsiniz. Bu, 60 saniye dolduktan sonra gelen ilk iste\u011fin \u00f6nbelle\u011fi yeniden doldurmas\u0131n\u0131 tetiklerken, bu s\u00fcre zarf\u0131ndaki di\u011fer isteklerin \u00f6nbellekteki eski veriyi almas\u0131n\u0131 sa\u011flar. Bu stratejiye “stale-while-revalidate” (eskiyi sunarken yeniyi do\u011frula) denir ve dinamik veriye sahip, ancak anl\u0131k g\u00fcncellik gerektirmeyen i\u00e7erikler i\u00e7in idealdir.<\/p>\n

A\u015fa\u011f\u0131daki \u00f6rnekte, bir sunucu bile\u015feninde fetch<\/code> kullanarak veri \u00e7ekmeyi ve \u00f6nbellekleme davran\u0131\u015f\u0131n\u0131 kontrol etmeyi g\u00f6rebilirsiniz:<\/p>\n

\n
\n\/\/ app\/products\/[id]\/page.js\nasync function getProduct(id) {\n  const res = await fetch(https:\/\/api.example.com\/products\/${id}<\/code>, {\n    next: { revalidate: 60 } \/\/ Bu veri 60 saniye boyunca \u00f6nbellekte kalacak\n  });\n  if (!res.ok) {\n    throw new Error('\u00dcr\u00fcn bilgileri \u00e7ekilemedi');\n  }\n  return res.json();\n}\n\nexport default async function ProductPage({ params }) {\n  const product = await getProduct(params.id);\n  return (\n    <div>\n      <h1>{product.name}<\/h1>\n      <p>Fiyat: {product.price} TL<\/p>\n      <p>A\u00e7\u0131klama: {product.description}<\/p>\n    <\/div>\n  );\n}\n  <\/code><\/pre>\n<\/div>\n
Yukar\u0131daki kodda, revalidate: 60<\/code> se\u00e7ene\u011fi, \u00fcr\u00fcn verisinin 60 saniye boyunca \u00f6nbellekte kalmas\u0131n\u0131 sa\u011flar. Bu s\u00fcre zarf\u0131nda gelen t\u00fcm istekler \u00f6nbellekten servis edilir. 60 saniye sonra gelen ilk istek, veriyi yeniden \u00e7eker ve \u00f6nbelle\u011fi g\u00fcncellerken, bu s\u0131rada kullan\u0131c\u0131ya hala eski (stale) veriyi sunabilir. Bu yakla\u015f\u0131m, kullan\u0131c\u0131 deneyimini kesintiye u\u011fratmadan verilerin g\u00fcncel kalmas\u0131n\u0131 sa\u011flar. E\u011fer bir verinin asla \u00f6nbelle\u011fe al\u0131nmamas\u0131n\u0131 istiyorsan\u0131z, cache: 'no-store'<\/code> se\u00e7ene\u011fini kullanabilirsiniz. Bu, hassas veya s\u00fcrekli de\u011fi\u015fen veriler (\u00f6rne\u011fin, kullan\u0131c\u0131ya \u00f6zel sepet bilgileri) i\u00e7in kritik \u00f6neme sahiptir. Bu esneklik, geli\u015ftiricilerin uygulamalar\u0131n\u0131n gereksinimlerine g\u00f6re en uygun \u00f6nbellekleme stratejisini se\u00e7melerine olanak tan\u0131r.<\/p>\n
Tam Rota \u00d6nbelle\u011fi (Full Route Cache): Sayfalar\u0131n\u0131z Neden Bu Kadar H\u0131zl\u0131 Y\u00fckleniyor?<\/h3>\n
Next.js’in performans konusundaki en etkileyici \u00f6zelliklerinden biri, \u015f\u00fcphesiz Tam Rota \u00d6nbelle\u011fi’dir. App Router ile birlikte sunulan bu mekanizma, Next.js uygulamalar\u0131n\u0131n neden bu kadar h\u0131zl\u0131 hissettirdi\u011finin temelini olu\u015fturur. Tam Rota \u00d6nbelle\u011fi, bir rota (sayfa) i\u00e7in olu\u015fturulan t\u00fcm HTML, CSS ve JavaScript kaynaklar\u0131n\u0131, ayr\u0131ca o rotan\u0131n sunucu bile\u015fenleri taraf\u0131ndan \u00e7ekilen verilerini bir b\u00fct\u00fcn olarak \u00f6nbelle\u011fe al\u0131r. Yani, bir kullan\u0131c\u0131 belirli bir sayfay\u0131 ziyaret etti\u011finde, Next.js bu sayfan\u0131n tamam\u0131n\u0131 bir kereli\u011fine olu\u015fturur ve bu olu\u015fturulmu\u015f \u00e7\u0131kt\u0131y\u0131 bir sonraki istekler i\u00e7in saklar. Bu, \u00f6zellikle statik i\u00e7erik bar\u0131nd\u0131ran blog g\u00f6nderileri, \u00fcr\u00fcn sayfalar\u0131 veya hakk\u0131m\u0131zda gibi sayfalar i\u00e7in inan\u0131lmaz bir h\u0131z art\u0131\u015f\u0131 sa\u011flar.<\/p>\n
Bu \u00f6nbellekleme, genellikle da\u011f\u0131t\u0131lm\u0131\u015f bir CDN (Content Delivery Network – \u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131) \u00fczerinde ger\u00e7ekle\u015fir. Vercel gibi Next.js i\u00e7in optimize edilmi\u015f bir da\u011f\u0131t\u0131m platformu kullan\u0131yorsan\u0131z, bu \u00f6nbellekleme otomatik olarak sizin i\u00e7in y\u00f6netilir. Bir kullan\u0131c\u0131 sitenizin bir rotas\u0131na eri\u015fti\u011finde, e\u011fer bu rota \u00f6nbellekte varsa, istek do\u011frudan CDN’den servis edilir. Bu, iste\u011fin orijinal sunucuya ula\u015fmas\u0131na gerek kalmadan, kullan\u0131c\u0131ya en yak\u0131n konumdaki CDN noktas\u0131ndan yan\u0131t verilmesi anlam\u0131na gelir. Sonu\u00e7 olarak, milisaniyeler i\u00e7inde y\u00fcklenen sayfalar ve neredeyse anl\u0131k gezinme deneyimi elde edilir. Bu durum, \u00f6zellikle y\u00fcksek trafikli web siteleri i\u00e7in sunucu y\u00fck\u00fcn\u00fc muazzam derecede azalt\u0131r ve \u00f6l\u00e7eklenebilirli\u011fi art\u0131r\u0131r.<\/p>\n
Tam Rota \u00d6nbelle\u011fi’nin \u00e7al\u0131\u015fma prensibi, \u00f6zellikle React Server Components (RSC) ile yap\u0131lan veri \u00e7ekimleriyle s\u0131k\u0131 bir \u015fekilde entegredir. Bir rota olu\u015fturulurken, o rotadaki t\u00fcm sunucu bile\u015fenleri \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r ve bu bile\u015fenlerin yapt\u0131\u011f\u0131 fetch<\/code> istekleri de (e\u011fer \u00f6nbelle\u011fe al\u0131nabilirse) veri \u00f6nbelle\u011finde saklan\u0131r. Ard\u0131ndan, t\u00fcm bu bile\u015fenlerin render etti\u011fi HTML \u00e7\u0131kt\u0131s\u0131 ve \u00e7ekilen veriler, tek bir “tam rota” \u00e7\u0131kt\u0131s\u0131 olarak \u00f6nbelle\u011fe al\u0131n\u0131r. Peki, bu \u00f6nbellek ne zaman ge\u00e7ersiz k\u0131l\u0131n\u0131r? Genellikle, uygulaman\u0131z yeniden da\u011f\u0131t\u0131ld\u0131\u011f\u0131nda (deploy edildi\u011finde) veya revalidate<\/code> se\u00e7ene\u011fi ile belirli bir s\u00fcre sonra otomatik olarak yeniden olu\u015fturuldu\u011funda. Ayr\u0131ca, Next.js’in revalidatePath<\/code> veya revalidateTag<\/code> gibi API’leri arac\u0131l\u0131\u011f\u0131yla programatik olarak da \u00f6nbelle\u011fi manuel olarak ge\u00e7ersiz k\u0131labilirsiniz. Bu, i\u00e7erik y\u00f6netim sistemlerinden (CMS) bir g\u00fcncelleme geldi\u011finde belirli bir sayfan\u0131n \u00f6nbelle\u011fini an\u0131nda temizlemek i\u00e7in olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
A\u015fa\u011f\u0131da, basit bir sunucu bile\u015feni i\u00e7eren bir rota \u00f6rne\u011fi bulunmaktad\u0131r. Bu rota, varsay\u0131lan olarak Tam Rota \u00d6nbelle\u011fi taraf\u0131ndan \u00f6nbelle\u011fe al\u0131nacakt\u0131r:<\/p>\n
\n
\n\/\/ app\/blog\/[slug]\/page.js\nimport { notFound } from 'next\/navigation';\n\nasync function getBlogPost(slug) {\n  \/\/ Bu fetch iste\u011fi, veri \u00f6nbelle\u011fi taraf\u0131ndan da \u00f6nbelle\u011fe al\u0131n\u0131r.\n  \/\/ Varsay\u0131lan olarak revalidate: false (sonsuz) veya deploy s\u00fcresince.\n  const res = await fetch(https:\/\/api.example.com\/blog\/${slug}<\/code>);\n  if (!res.ok) {\n    return notFound(); \/\/ Hata durumunda 404 sayfas\u0131na y\u00f6nlendir.\n  }\n  return res.json();\n}\n\nexport default async function BlogPostPage({ params }) {\n  const post = await getBlogPost(params.slug);\n\n  return (\n    <article>\n      <h1>{post.title}<\/h1>\n      <p>{post.content}<\/p>\n      <p><small>Yazar: {post.author}<\/small><\/p>\n    <\/article>\n  );\n}\n\n\/\/ Opsiyonel: Statik yollar\u0131 belirterek \u00f6nceden olu\u015fturma\nexport async function generateStaticParams() {\n  const posts = await fetch('https:\/\/api.example.com\/blog').then((res) => res.json());\n  return posts.map((post) => ({\n    slug: post.slug,\n  }));\n}\n  <\/code><\/pre>\n<\/div>\n
Bu \u00f6rnekte, generateStaticParams<\/code> fonksiyonu ile blog yaz\u0131lar\u0131n\u0131z\u0131n statik olarak olu\u015fturulmas\u0131n\u0131 sa\u011flayabilirsiniz. Next.js, build (derleme) zaman\u0131nda bu yollar\u0131 \u00f6nceden olu\u015fturur ve Tam Rota \u00d6nbelle\u011fi’ne yerle\u015ftirir. Bu, ilk ziyaretlerde bile an\u0131nda y\u00fckleme s\u00fcreleri sa\u011flar. E\u011fer generateStaticParams<\/code> kullanmazsan\u0131z, rota ilk kez ziyaret edildi\u011finde sunucu taraf\u0131nda olu\u015fturulur ve sonraki ziyaretler i\u00e7in \u00f6nbelle\u011fe al\u0131n\u0131r. Bu g\u00fc\u00e7l\u00fc mekanizma, Next.js’in modern web geli\u015ftirme d\u00fcnyas\u0131nda neden bu kadar pop\u00fcler oldu\u011funu a\u00e7\u0131k\u00e7a ortaya koymaktad\u0131r.<\/p>\n
G\u00f6rsel Optimizasyon \u00d6nbelle\u011fi (Image Optimization Cache) ve Di\u011fer Varl\u0131klar<\/h3>\n
Web sitelerinin performans\u0131n\u0131 etkileyen en b\u00fcy\u00fck fakt\u00f6rlerden biri g\u00f6rsellerdir. B\u00fcy\u00fck boyutlu, optimize edilmemi\u015f g\u00f6rseller, sayfa y\u00fckleme s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir ve kullan\u0131c\u0131 deneyimini olumsuz etkileyebilir. Next.js, bu sorunu \u00e7\u00f6zmek i\u00e7in next\/image<\/code> bile\u015fenini ve onunla birlikte gelen G\u00f6rsel Optimizasyon \u00d6nbelle\u011fi’ni sunar. next\/image<\/code> bile\u015feni, g\u00f6rselleri otomatik olarak optimize eder: farkl\u0131 ekran boyutlar\u0131 ve cihazlar i\u00e7in uygun boyutlarda g\u00f6rseller olu\u015fturur, modern formatlara (WebP, AVIF gibi) d\u00f6n\u00fc\u015ft\u00fcr\u00fcr ve tembel y\u00fckleme (lazy loading) gibi teknikleri uygular. T\u00fcm bu optimizasyon i\u015flemleri, Next.js sunucusu veya bir CDN \u00fczerinde ger\u00e7ekle\u015fir ve optimize edilmi\u015f g\u00f6rseller \u00f6nbelle\u011fe al\u0131n\u0131r.<\/p>\n
G\u00f6rsel Optimizasyon \u00d6nbelle\u011fi, ilk istek geldi\u011finde g\u00f6rseli optimize eder ve bu optimize edilmi\u015f versiyonu bir sonraki istekler i\u00e7in saklar. Bu, her kullan\u0131c\u0131n\u0131n veya her iste\u011fin g\u00f6rseli yeniden optimize etme maliyetine katlanmak zorunda kalmamas\u0131 anlam\u0131na gelir. \u00d6zellikle y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc foto\u011fraflar veya \u00e7ok say\u0131da g\u00f6rsel i\u00e7eren siteler i\u00e7in bu, hem sunucu kaynaklar\u0131ndan tasarruf sa\u011flar hem de sayfa y\u00fckleme s\u00fcrelerini dramatik bir \u015fekilde iyile\u015ftirir. \u00d6rne\u011fin, bir e-ticaret sitesinde her \u00fcr\u00fcn\u00fcn birden fazla g\u00f6rseli olabilir. next\/image<\/code> sayesinde, bu g\u00f6rseller farkl\u0131 boyutlarda ve formatlarda \u00f6nbelle\u011fe al\u0131n\u0131r ve kullan\u0131c\u0131n\u0131n cihaz\u0131na en uygun olan\u0131 sunulur.<\/p>\n
next.config.js<\/code> dosyas\u0131 \u00fczerinden g\u00f6rsel optimizasyon ayarlar\u0131n\u0131 yapabilirsiniz. Hangi alan adlar\u0131ndan g\u00f6rsel \u00e7ekilebilece\u011fini belirtmek, g\u00f6rsel \u00f6nbelle\u011finin davran\u0131\u015f\u0131n\u0131 kontrol etmek ve hatta \u00f6zel y\u00fckleyiciler (custom loaders) tan\u0131mlamak m\u00fcmk\u00fcnd\u00fcr. Bu sayede, g\u00f6rsellerinizin nas\u0131l i\u015flenece\u011fi \u00fczerinde tam kontrol sahibi olursunuz.<\/p>\n
\n
\n\/\/ next.config.js\n\/** @type {import('next').NextConfig} *\/\nconst nextConfig = {\n  images: {\n    remotePatterns: [\n      {\n        protocol: 'https',\n        hostname: 'assets.example.com', \/\/ G\u00f6rsel \u00e7ekti\u011finiz alan ad\u0131n\u0131 buraya ekleyin\n        port: '',\n        pathname: '\/my-images\/**',\n      },\n    ],\n    \/\/ image.domains se\u00e7ene\u011fi yerine remotePatterns kullan\u0131lmas\u0131 \u00f6nerilir.\n    \/\/ domains: ['assets.example.com'], \/\/ Eski kullan\u0131m\n    minimumCacheTTL: 60, \/\/ G\u00f6rsel \u00f6nbelle\u011finde kalma s\u00fcresi (saniye)\n  },\n};\n\nmodule.exports = nextConfig;\n  <\/code><\/pre>\n<\/div>\n
Yukar\u0131daki \u00f6rnekte, remotePatterns<\/code> ile g\u00f6rsellerin \u00e7ekilece\u011fi g\u00fcvenilir alan adlar\u0131 belirtilmi\u015ftir. minimumCacheTTL<\/code> ise, optimize edilmi\u015f g\u00f6rsellerin \u00f6nbellekte ne kadar s\u00fcreyle kalaca\u011f\u0131n\u0131 tan\u0131mlar. Bu ayarlar, g\u00f6rsel \u00f6nbellekleme stratejinizi \u00f6zelle\u015ftirmenize olanak tan\u0131r.<\/p>\n
G\u00f6rsellerin yan\u0131 s\u0131ra, Next.js statik varl\u0131klar\u0131 (CSS dosyalar\u0131, JavaScript paketleri, fontlar vb.) da \u00f6nbelle\u011fe al\u0131r. Build (derleme) s\u00fcreci s\u0131ras\u0131nda bu varl\u0131klara benzersiz hash de\u011ferleri atan\u0131r. Bu hash de\u011ferleri de\u011fi\u015fmedi\u011fi s\u00fcrece, taray\u0131c\u0131lar ve CDN’ler bu dosyalar\u0131 uzun s\u00fcre \u00f6nbellekte tutabilir. Bu, kullan\u0131c\u0131lar\u0131n tekrarlayan ziyaretlerinde bu varl\u0131klar\u0131 yeniden indirmek zorunda kalmamas\u0131n\u0131 sa\u011flar, b\u00f6ylece sayfa y\u00fckleme s\u00fcreleri daha da k\u0131sal\u0131r. Next.js’in genel \u00f6nbellekleme felsefesi, her bir varl\u0131k t\u00fcr\u00fc i\u00e7in en uygun stratejiyi otomatik olarak uygulayarak geli\u015ftiricinin y\u00fck\u00fcn\u00fc hafifletmektir. Bu sayede, geli\u015ftiriciler ana i\u015f mant\u0131\u011f\u0131na odaklan\u0131rken, performans optimizasyonlar\u0131 arka planda sorunsuz bir \u015fekilde i\u015fler.<\/p>\n
\u0130stemci Taraf\u0131 \u00d6nbellekleme (Client-Side Caching): Taray\u0131c\u0131n\u0131z\u0131n G\u00fcc\u00fcn\u00fc Kullan\u0131n<\/h3>\n
Next.js, sunucu taraf\u0131nda sundu\u011fu g\u00fc\u00e7l\u00fc \u00f6nbellekleme mekanizmalar\u0131n\u0131n yan\u0131 s\u0131ra, istemci taraf\u0131 \u00f6nbellekleme (client-side caching) konusunda da taray\u0131c\u0131n\u0131n yerle\u015fik yeteneklerini etkin bir \u015fekilde kullan\u0131r. \u0130stemci taraf\u0131 \u00f6nbellekleme, web taray\u0131c\u0131s\u0131n\u0131n daha \u00f6nce ziyaret edilen sitelerden indirdi\u011fi kaynaklar\u0131 (HTML, CSS, JavaScript dosyalar\u0131, g\u00f6rseller, fontlar vb.) yerel olarak saklamas\u0131 anlam\u0131na gelir. Bu sayede, kullan\u0131c\u0131 ayn\u0131 sayfay\u0131 veya siteyi tekrar ziyaret etti\u011finde, taray\u0131c\u0131 bu kaynaklar\u0131 sunucudan yeniden indirmek yerine kendi \u00f6nbelle\u011finden y\u00fckleyebilir. Bu, \u00f6zellikle tekrarlayan ziyaretlerde sayfa y\u00fckleme s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r ve bant geni\u015fli\u011fi kullan\u0131m\u0131n\u0131 d\u00fc\u015f\u00fcr\u00fcr.<\/p>\n
\u0130stemci taraf\u0131 \u00f6nbelleklemenin temelini HTTP Cache Headers (HTTP \u00d6nbellek Ba\u015fl\u0131klar\u0131) olu\u015fturur. Sunucu, bir kaynak g\u00f6nderdi\u011finde, bu kayna\u011f\u0131n nas\u0131l \u00f6nbelle\u011fe al\u0131nmas\u0131 gerekti\u011fini belirten \u00f6zel HTTP ba\u015fl\u0131klar\u0131 ekler. En yayg\u0131n kullan\u0131lan ba\u015fl\u0131klar \u015funlard\u0131r:<\/p>\n