Modern web uygulamalar\u0131 geli\u015ftirirken performans her zaman en \u00f6ncelikli konulardan biri olmu\u015ftur. Kullan\u0131c\u0131lar\u0131n h\u0131zl\u0131 yan\u0131t veren, ak\u0131c\u0131 deneyimler beklemesiyle birlikte, geli\u015ftiriciler de bu beklentiyi kar\u015f\u0131lamak i\u00e7in \u00e7e\u015fitli optimizasyon tekniklerine ba\u015fvurmak durumundad\u0131r. \u00d6zellikle React tabanl\u0131 ve sunucu taraf\u0131 i\u015fleme (SSR) yetenekleriyle \u00f6ne \u00e7\u0131kan Next.js, bu alanda sundu\u011fu g\u00fc\u00e7l\u00fc \u00f6nbellekleme mekanizmalar\u0131yla dikkat \u00e7ekmektedir. Ancak, Next.js’in sundu\u011fu farkl\u0131 \u00f6nbellekleme t\u00fcrleri (istek tekrarlamas\u0131, veri \u00f6nbelle\u011fi, tam rota \u00f6nbelle\u011fi ve y\u00f6nlendirici \u00f6nbelle\u011fi) ba\u015flang\u0131\u00e7ta kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilir. Bu makalede, 2026 y\u0131l\u0131na geldi\u011fimizde bu kavramlar\u0131 derinlemesine inceleyecek, aralar\u0131ndaki farklar\u0131 netle\u015ftirecek ve ger\u00e7ek d\u00fcnya senaryolar\u0131yla nas\u0131l etkili bir \u015fekilde kullanabilece\u011finizi ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131z. Amac\u0131m\u0131z, Next.js \u00f6nbellekleme zihniyetini tamamen anlaman\u0131z\u0131 sa\u011flayarak, uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131 zirveye ta\u015f\u0131makt\u0131r.<\/p>\n
Web uygulamalar\u0131n\u0131n performans\u0131, kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen kritik bir fakt\u00f6rd\u00fcr. Yava\u015f y\u00fcklenen sayfalar, kullan\u0131c\u0131lar\u0131n siteden hemen ayr\u0131lmas\u0131na (bounce rate) ve d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131n\u0131n d\u00fc\u015fmesine neden olabilir. Next.js, React tabanl\u0131 uygulamalar i\u00e7in sundu\u011fu g\u00fc\u00e7l\u00fc sunucu taraf\u0131 i\u015fleme (SSR) ve statik site \u00fcretimi (SSG) yetenekleriyle bu soruna \u00e7\u00f6z\u00fcm sunar. Ancak, bu yeteneklerin tam potansiyelini ortaya \u00e7\u0131karmak i\u00e7in \u00f6nbellekleme mekanizmalar\u0131n\u0131 do\u011fru anlamak ve kullanmak \u015fartt\u0131r. \u00d6nbellekleme, tekrarlayan i\u015flemleri azaltarak veya veri taleplerini h\u0131zland\u0131rarak uygulaman\u0131z\u0131n genel yan\u0131t verme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir. 2026’da, kullan\u0131c\u0131lar\u0131n sabr\u0131n\u0131n daha da azald\u0131\u011f\u0131 ve h\u0131z\u0131n bir standart haline geldi\u011fi bir dijital ortamda, etkili bir \u00f6nbellekleme stratejisi uygulamalar\u0131n\u0131z\u0131n rekabet g\u00fcc\u00fcn\u00fc belirleyecektir. Peki, Next.js bu konuda bize hangi ara\u00e7lar\u0131 sunuyor ve bu ara\u00e7lar aras\u0131ndaki farklar nelerdir? Gelin bu konuyu detayl\u0131ca inceleyelim.<\/p>\n
\u0130stek tekrarlamas\u0131, genellikle bir bile\u015fen a\u011fac\u0131n\u0131n (component tree) ayn\u0131 iste\u011fi (request) s\u0131ras\u0131nda birden fazla kez tetikledi\u011fi durumlarda devreye giren bir optimizasyon tekni\u011fidir. Bu, \u00f6zellikle asenkron veri \u00e7ekme (data fetching) i\u015flemlerinde, ayn\u0131 verinin gereksiz yere tekrar tekrar \u00e7ekilmesini \u00f6nlemek i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, bir sayfada birden fazla bile\u015fen ayn\u0131 API’den ayn\u0131 veriyi talep edebilir. \u0130stek tekrarlamas\u0131 sayesinde, ilk veri \u00e7ekme iste\u011fi tamamland\u0131\u011f\u0131nda, bu veri sonraki istekler i\u00e7in \u00f6nbelle\u011fe al\u0131n\u0131r ve ayn\u0131 istek d\u00f6ng\u00fcs\u00fc i\u00e7inde tekrar \u00e7ekilmez. Bu, hem sunucu y\u00fck\u00fcn\u00fc azalt\u0131r hem de istemci taraf\u0131ndaki i\u015flem s\u00fcresini k\u0131salt\u0131r. Next.js’in son s\u00fcr\u00fcmlerinde, \u00f6zellikle React Server Components (RSC) mimarisi ile birlikte, istek tekrarlamas\u0131 daha da merkezi bir rol oynamaktad\u0131r. Bu mekanizma, verilerin yaln\u0131zca bir kez i\u015flenmesini sa\u011flayarak gereksiz a\u011f trafi\u011fini ve hesaplama maliyetini ortadan kald\u0131r\u0131r. Bu, \u00f6zellikle karma\u015f\u0131k veri ba\u011f\u0131ml\u0131l\u0131klar\u0131na sahip uygulamalar i\u00e7in b\u00fcy\u00fck bir performans art\u0131\u015f\u0131 anlam\u0131na gelir. Bir vaka analizi d\u00fc\u015f\u00fcnelim: Bir e-ticaret sitesinde, \u00fcr\u00fcn detay sayfas\u0131nda hem \u00fcr\u00fcn\u00fcn temel bilgileri hem de stok durumu bilgisi farkl\u0131 bile\u015fenler taraf\u0131ndan \u00e7ekiliyor olsun. E\u011fer bu iki bilgi ayn\u0131 API endpoint’inden geliyorsa ve ayn\u0131 istek s\u0131ras\u0131nda talep ediliyorsa, istek tekrarlamas\u0131 sayesinde veriler yaln\u0131zca bir kez \u00e7ekilir, bu da sayfan\u0131n daha h\u0131zl\u0131 y\u00fcklenmesini sa\u011flar.<\/p>\n
Bu, \u00f6zellikle sunucu taraf\u0131nda \u00e7al\u0131\u015fan ve ayn\u0131 anda birden \u00e7ok iste\u011fi y\u00f6neten Next.js gibi bir framework i\u00e7in hayati \u00f6nem ta\u015f\u0131r. \u0130stek tekrarlamas\u0131, ayn\u0131 istek ba\u011flam\u0131nda (request context) birden \u00e7ok kez ayn\u0131 veriye eri\u015fim ihtiyac\u0131 oldu\u011funda devreye girer. Bunu, bir fonksiyonun belirli arg\u00fcmanlarla \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda sonucunu saklay\u0131p, ayn\u0131 arg\u00fcmanlarla tekrar \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda saklad\u0131\u011f\u0131 sonucu d\u00f6nd\u00fcrmesi gibi d\u00fc\u015f\u00fcnebilirsiniz (bu teknik “memoization” olarak bilinir). Next.js’de bu, Ger\u00e7ek d\u00fcnya senaryosunda, bir blog uygulamas\u0131nda ana sayfada en son 10 makalenin ba\u015fl\u0131klar\u0131 ve her makalenin k\u0131sa bir \u00f6zetini g\u00f6stermek istedi\u011finizi varsayal\u0131m. Bu iki bilgi farkl\u0131 API \u00e7a\u011fr\u0131lar\u0131 ile getirilebilir. Ancak, e\u011fer bir API \u00e7a\u011fr\u0131s\u0131 hem ba\u015fl\u0131klar\u0131 hem de \u00f6zetleri d\u00f6nd\u00fcrebiliyorsa ve bu \u00e7a\u011fr\u0131 ayn\u0131 istek s\u0131ras\u0131nda birden fazla bile\u015fen taraf\u0131ndan tetikleniyorsa, istek tekrarlamas\u0131 bu \u00e7a\u011fr\u0131n\u0131n yaln\u0131zca bir kez yap\u0131lmas\u0131n\u0131 garanti eder. Bu, sunucu kaynaklar\u0131ndan tasarruf sa\u011flar ve kullan\u0131c\u0131ya daha h\u0131zl\u0131 bir deneyim sunar. Next.js’in App Router’\u0131 ile birlikte gelen React Server Components, bu t\u00fcr senaryolar\u0131 daha da verimli hale getirir \u00e7\u00fcnk\u00fc bile\u015fenler sunucuda i\u015flenir ve bu da istek tekrarlamas\u0131n\u0131n daha do\u011fal bir \u015fekilde entegre olmas\u0131n\u0131 sa\u011flar.<\/p>\n Veri \u00f6nbelle\u011fi, daha geni\u015f bir kapsamda, birden \u00e7ok istek aras\u0131nda payla\u015f\u0131lan verileri saklama mekanizmas\u0131d\u0131r. \u0130stek tekrarlamas\u0131 tek bir iste\u011fin i\u00e7indeki optimizasyona odaklan\u0131rken, veri \u00f6nbelle\u011fi farkl\u0131 istekler aras\u0131nda ayn\u0131 verinin tekrar tekrar \u00e7ekilmesini \u00f6nler. Bu, \u00f6zellikle s\u0131k\u00e7a eri\u015filen ancak nadiren de\u011fi\u015fen veriler i\u00e7in inan\u0131lmaz derecede faydal\u0131d\u0131r. \u00d6rne\u011fin, bir \u00fcr\u00fcn katalo\u011fu, kullan\u0131c\u0131 ayarlar\u0131 veya global yap\u0131land\u0131rma verileri gibi bilgiler, her istekte yeniden \u00e7ekilmek yerine \u00f6nbellekten al\u0131nabilir. Next.js, Next.js’in Bir ba\u015fka pratik \u00f6rnek olarak, bir SaaS uygulamas\u0131nda kullan\u0131c\u0131lar\u0131n s\u0131k\u00e7a eri\u015fti\u011fi bir raporlama b\u00f6l\u00fcm\u00fcn\u00fc ele alal\u0131m. Bu raporlar, \u00f6rne\u011fin g\u00fcnl\u00fck veya haftal\u0131k olarak g\u00fcncelleniyor olabilir. E\u011fer bu raporlar her kullan\u0131c\u0131 iste\u011finde s\u0131f\u0131rdan hesaplan\u0131yorsa, bu hem sunucu kaynaklar\u0131n\u0131 t\u00fcketir hem de kullan\u0131c\u0131lar\u0131n beklemesine neden olur. Veri \u00f6nbelle\u011fi kullanarak, bu raporlar\u0131 belirli bir s\u00fcre (\u00f6rne\u011fin, 24 saat) \u00f6nbellekte tutabiliriz. Bu s\u00fcre zarf\u0131nda, raporu isteyen her kullan\u0131c\u0131 \u00f6nbelle\u011fe al\u0131nm\u0131\u015f veriyi alacakt\u0131r. 24 saat doldu\u011funda veya bir admin manuel olarak raporu yeniledi\u011finde, rapor yeniden hesaplan\u0131r ve \u00f6nbellek g\u00fcncellenir. Bu, kullan\u0131c\u0131lara h\u0131zl\u0131 bir deneyim sunarken, sunucu y\u00fck\u00fcn\u00fc de \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r. Next.js’in bu \u00f6nbellekleme stratejisi, “Incremental Static Regeneration” (ISR) gibi kavramlarla da yak\u0131ndan ili\u015fkilidir ve statik sitelerin dinamik i\u00e7erikle bulu\u015ftu\u011fu noktada b\u00fcy\u00fck bir avantaj sa\u011flar.<\/p>\n Tam rota \u00f6nbelle\u011fi, Next.js’in en g\u00fc\u00e7l\u00fc \u00f6nbellekleme mekanizmalar\u0131ndan biridir ve bir sayfan\u0131n tamam\u0131n\u0131 \u00f6nbelle\u011fe almay\u0131 hedefler. Bu, sayfan\u0131n HTML \u00e7\u0131kt\u0131s\u0131n\u0131, JavaScript bundle’lar\u0131n\u0131 ve di\u011fer statik varl\u0131klar\u0131n\u0131 saklar. Bir kullan\u0131c\u0131 bir sayfay\u0131 ilk kez ziyaret etti\u011finde, Next.js bu sayfay\u0131 olu\u015fturur ve render eder. E\u011fer bu sayfa tam rota \u00f6nbelle\u011fi kullanacak \u015fekilde yap\u0131land\u0131r\u0131lm\u0131\u015fsa, olu\u015fturulan bu \u00e7\u0131kt\u0131 sunucuda veya CDN \u00fczerinde saklan\u0131r. Sonraki ziyaret\u00e7iler veya ayn\u0131 kullan\u0131c\u0131n\u0131n sonraki istekleri, bu \u00f6nbelle\u011fe al\u0131nm\u0131\u015f \u00e7\u0131kt\u0131y\u0131 do\u011frudan al\u0131rlar. Bu, sayfan\u0131n s\u0131f\u0131rdan olu\u015fturulmas\u0131 ve i\u015flenmesi ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r, bu da inan\u0131lmaz derecede h\u0131zl\u0131 y\u00fcklenme s\u00fcreleri sa\u011flar. Statik Site \u00dcretimi (SSG) bu \u00f6nbellekleme t\u00fcr\u00fcn\u00fcn en belirgin \u00f6rne\u011fidir. Build zaman\u0131nda olu\u015fturulan statik HTML dosyalar\u0131, tam rota \u00f6nbelle\u011fi sayesinde do\u011frudan sunulur. Ancak, tam rota \u00f6nbelle\u011fi sadece SSG ile s\u0131n\u0131rl\u0131 de\u011fildir. Dinamik olarak olu\u015fturulan sayfalar bile, belirli ko\u015fullar alt\u0131nda \u00f6nbelle\u011fe al\u0131nabilir. \u00d6rne\u011fin, bir \u00fcr\u00fcn listesi sayfas\u0131, belirli bir s\u00fcre boyunca \u00f6nbellekte tutulabilir ve bu s\u00fcre i\u00e7inde gelen t\u00fcm istekler i\u00e7in ayn\u0131 statik HTML \u00e7\u0131kt\u0131s\u0131 sunulabilir. Bu, sunucu y\u00fck\u00fcn\u00fc dramatik \u015fekilde azalt\u0131r ve kullan\u0131c\u0131 deneyimini iyile\u015ftirir. Bir e-ticaret sitesinin ana sayfas\u0131 veya pop\u00fcler \u00fcr\u00fcnlerin listelendi\u011fi bir sayfa, tam rota \u00f6nbelle\u011fi i\u00e7in m\u00fckemmel adaylard\u0131r. Bu sayfalar\u0131n i\u00e7eri\u011fi genellikle s\u0131k de\u011fi\u015fmez ve h\u0131zl\u0131 y\u00fcklenmeleri kullan\u0131c\u0131lar i\u00e7in b\u00fcy\u00fck avantaj sa\u011flar.<\/p>\n Next.js’in App Router’\u0131 ile birlikte gelen “Rendered Pages” (Render Edilmi\u015f Sayfalar) konsepti, tam rota \u00f6nbelle\u011fini daha da g\u00fc\u00e7lendirir. Sunucu bile\u015fenleri (Server Components) kullan\u0131larak olu\u015fturulan sayfalar, sunucu taraf\u0131nda \u00f6nbelle\u011fe al\u0131nabilir. Bu, sayfan\u0131n HTML \u00e7\u0131kt\u0131s\u0131n\u0131n yan\u0131 s\u0131ra, gerekli verilerin de \u00f6nbellekte saklanabilece\u011fi anlam\u0131na gelir. Bu, \u00f6zellikle dinamik veri i\u00e7eren ancak s\u0131k g\u00fcncellenmeyen sayfalar i\u00e7in b\u00fcy\u00fck bir avantajd\u0131r. \u00d6rne\u011fin, bir blogun ana sayfas\u0131, en son makalelerle birlikte \u00f6nbelle\u011fe al\u0131nabilir. E\u011fer bir makale g\u00fcncellenirse, sadece o makalenin oldu\u011fu rota yeniden olu\u015fturulur ve \u00f6nbellek g\u00fcncellenir. Bu, “Incremental Static Regeneration” (ISR) prensibini daha da geli\u015ftirilmi\u015f bir \u015fekilde uygular. Tam rota \u00f6nbelle\u011fi, CDN’ler (Content Delivery Networks) ile de m\u00fckemmel bir uyum i\u00e7indedir. Statik olarak olu\u015fturulan sayfalar, d\u00fcnya \u00e7ap\u0131nda da\u011f\u0131t\u0131lm\u0131\u015f CDN sunucular\u0131nda saklanabilir, b\u00f6ylece kullan\u0131c\u0131lar kendilerine en yak\u0131n sunucudan i\u00e7eri\u011fi alabilirler. Bu da gecikmeyi (latency) azalt\u0131r ve k\u00fcresel \u00f6l\u00e7ekte h\u0131zl\u0131 bir deneyim sunar.<\/p>\n Ger\u00e7ek d\u00fcnya senaryosu olarak, bir haber portal\u0131n\u0131 ele alal\u0131m. Ana sayfa, en son man\u015fetleri, \u00f6ne \u00e7\u0131kan haberleri ve belirli kategorilerdeki makaleleri i\u00e7erir. Bu i\u00e7eri\u011fin tamam\u0131, belirli bir s\u00fcre boyunca \u00f6nbelle\u011fe al\u0131nabilir. Bir kullan\u0131c\u0131 ana sayfay\u0131 ziyaret etti\u011finde, \u00f6nbelle\u011fe al\u0131nm\u0131\u015f HTML \u00e7\u0131kt\u0131s\u0131 h\u0131zla sunulur. E\u011fer bir haber g\u00fcncellenirse veya yeni bir haber eklenirse, Next.js bu de\u011fi\u015fikli\u011fi alg\u0131layabilir ve sadece ilgili rotay\u0131 yeniden olu\u015fturup \u00f6nbelle\u011fi g\u00fcncelleyebilir. Bu, t\u00fcm sitenin yeniden olu\u015fturulmas\u0131 ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r ve performans\u0131 optimize eder. Bu yakla\u015f\u0131m, “Static Site Generation” (SSG) ile “Server-Side Rendering” (SSR) aras\u0131ndaki \u00e7izgiyi bulan\u0131kla\u015ft\u0131rarak, her iki d\u00fcnyan\u0131n en iyi yanlar\u0131n\u0131 sunar: SSG’nin h\u0131z\u0131 ve SSR’nin dinamik veri i\u015fleme yetene\u011fi. 2026’da, tam rota \u00f6nbelle\u011fi, y\u00fcksek performansl\u0131 ve \u00f6l\u00e7eklenebilir web uygulamalar\u0131 olu\u015fturman\u0131n temel ta\u015flar\u0131ndan biri olmaya devam edecektir.<\/p>\n Y\u00f6nlendirici \u00f6nbelle\u011fi (Router Cache), Next.js’in App Router mimarisinin bir par\u00e7as\u0131d\u0131r ve kullan\u0131c\u0131lar\u0131n uygulama i\u00e7inde gezinirken daha ak\u0131c\u0131 bir deneyim sunmay\u0131 ama\u00e7lar. Bu \u00f6nbellek, kullan\u0131c\u0131lar\u0131n daha \u00f6nce ziyaret etti\u011fi sayfalar\u0131n ve bu sayfalara ait verilerin bir k\u0131sm\u0131n\u0131 veya tamam\u0131n\u0131 saklar. Bir kullan\u0131c\u0131 bir sayfadan di\u011ferine ge\u00e7ti\u011finde, y\u00f6nlendirici \u00f6nbelle\u011fi devreye girer. E\u011fer gidilecek sayfa zaten \u00f6nbellekteyse, Next.js bu sayfay\u0131 s\u0131f\u0131rdan render etmek yerine \u00f6nbelle\u011fe al\u0131nm\u0131\u015f verileri kullan\u0131r. Bu, sayfa ge\u00e7i\u015flerini neredeyse an\u0131nda ger\u00e7ekle\u015ftirir ve kullan\u0131c\u0131ya sanki tek sayfal\u0131k bir uygulama (SPA) kullan\u0131yormu\u015f gibi bir his verir. Y\u00f6nlendirici \u00f6nbelle\u011fi, \u00f6zellikle karma\u015f\u0131k ve \u00e7ok sayfal\u0131 uygulamalarda kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir. Kullan\u0131c\u0131lar, sayfalar aras\u0131nda gezinirken bekleme s\u00fcresiyle kar\u015f\u0131la\u015fmazlar, bu da etkile\u015fimi art\u0131r\u0131r. Bu \u00f6nbellek, sunucu taraf\u0131nda ve istemci taraf\u0131nda y\u00f6netilebilir ve verilerin ne kadar s\u00fcreyle saklanaca\u011f\u0131 gibi ayarlar yap\u0131land\u0131r\u0131labilir.<\/p>\n Bu mekanizma, \u00f6zellikle React Server Components (RSC) ile birlikte \u00e7al\u0131\u015ft\u0131\u011f\u0131nda daha da g\u00fc\u00e7l\u00fc hale gelir. Sunucu bile\u015fenleri, sunucuda i\u015flenir ve bu i\u015flenmi\u015f veriler y\u00f6nlendirici \u00f6nbelle\u011finde saklanabilir. Bu, kullan\u0131c\u0131 bir sayfadan di\u011ferine ge\u00e7ti\u011finde, sunucudan tekrar veri \u00e7ekme ihtiyacini azalt\u0131r veya tamamen ortadan kald\u0131r\u0131r. Bu, hem sunucu y\u00fck\u00fcn\u00fc azalt\u0131r hem de istemci taraf\u0131ndaki i\u015flem s\u00fcresini k\u0131salt\u0131r. Y\u00f6nlendirici \u00f6nbelle\u011fi, “Navigation” (Gezinme) s\u0131ras\u0131nda verilerin tekrar tekrar \u00e7ekilmesini \u00f6nleyerek, uygulaman\u0131n genel performans\u0131n\u0131 ve yan\u0131t verme h\u0131z\u0131n\u0131 art\u0131r\u0131r. \u00d6rne\u011fin, bir e-ticaret sitesinde, kullan\u0131c\u0131 bir \u00fcr\u00fcn listesinden bir \u00fcr\u00fcn detay sayfas\u0131na ge\u00e7ti\u011finde, \u00fcr\u00fcn detay sayfas\u0131 y\u00f6nlendirici \u00f6nbelle\u011finde saklanabilir. Kullan\u0131c\u0131 geri d\u00f6n tu\u015funa bast\u0131\u011f\u0131nda veya ba\u015fka bir \u00fcr\u00fcne ge\u00e7ti\u011finde, \u00f6nbelle\u011fe al\u0131nm\u0131\u015f veriler h\u0131zla y\u00fcklenir. Bu, \u00f6zellikle a\u011f ba\u011flant\u0131s\u0131n\u0131n zay\u0131f oldu\u011fu durumlarda b\u00fcy\u00fck bir fark yarat\u0131r.<\/p>\n Bir ba\u015fka vaka analizi: Bir proje y\u00f6netim arac\u0131nda, kullan\u0131c\u0131lar farkl\u0131 projeler aras\u0131nda ge\u00e7i\u015f yaparlar. Her proje, kendi i\u00e7indeki g\u00f6revler, belgeler ve ileti\u015fim ge\u00e7mi\u015fi gibi bir\u00e7ok veriye sahip olabilir. Y\u00f6nlendirici \u00f6nbelle\u011fi sayesinde, bir kullan\u0131c\u0131 bir projeden di\u011ferine ge\u00e7ti\u011finde, ilk projenin verileri \u00f6nbellekte saklan\u0131r. Kullan\u0131c\u0131 tekrar ilk projeye d\u00f6nd\u00fc\u011f\u00fcnde, bu veriler h\u0131zla y\u00fcklenir. Bu, projenin t\u00fcm verilerinin her seferinde veritaban\u0131ndan veya API’den \u00e7ekilmesini engeller. Bu, \u00f6zellikle b\u00fcy\u00fck veri k\u00fcmeleriyle \u00e7al\u0131\u015fan uygulamalar i\u00e7in performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Y\u00f6nlendirici \u00f6nbelle\u011fi, Next.js’in sundu\u011fu “Client-side Navigation” (\u0130stemci Taraf\u0131 Gezinme) yetene\u011fini daha da optimize ederek, kullan\u0131c\u0131lar\u0131n uygulama i\u00e7inde kesintisiz bir deneyim ya\u015famas\u0131n\u0131 sa\u011flar. 2026’da, y\u00f6nlendirici \u00f6nbelle\u011fi, modern web uygulamalar\u0131n\u0131n ak\u0131c\u0131 ve duyarl\u0131 kullan\u0131c\u0131 deneyimleri sunmas\u0131nda kritik bir rol oynayacakt\u0131r.<\/p>\n \u015eimdiye kadar Next.js’in sundu\u011fu farkl\u0131 \u00f6nbellekleme mekanizmalar\u0131n\u0131 teorik olarak inceledik. Bu b\u00f6l\u00fcmde, bu kavramlar\u0131 somut kod \u00f6rnekleriyle peki\u015ftirece\u011fiz. \u00d6zellikle Next.js’de veri \u00f6nbelle\u011fini y\u00f6netmenin temel yolu, yerle\u015fik Varsay\u0131lan Davran\u0131\u015f: Bir \u00d6nbelle\u011fe Almay\u0131 Engelleme: E\u011fer bir verinin \u00f6nbelle\u011fe al\u0131nmas\u0131n\u0131 istemiyorsan\u0131z, \u00d6nbelle\u011fi Yeniden Do\u011frulama (Revalidation): Verinin belirli bir s\u00fcre boyunca \u00f6nbellekte kalmas\u0131n\u0131 sa\u011flamak i\u00e7in \u00d6rnek Kod Blo\u011fu:<\/p>\n Bu \u00f6rnekte, Tam rota \u00f6nbelle\u011fi ve istek tekrarlamas\u0131, genellikle Next.js’in App Router’\u0131 ve React Server Components (RSC) mimarisi ile daha derinlemesine entegre olmu\u015ftur. Bu mekanizmalar, kod seviyesinde do\u011frudan React Server Components (RSC) ile Veri \u00c7ekme: RSC’ler, sunucuda i\u015flenir ve bu da veri \u00e7ekme i\u015flemlerinin sunucuda yap\u0131lmas\u0131n\u0131 sa\u011flar. Bu, istemci taraf\u0131 bundle boyutunu k\u00fc\u00e7\u00fclt\u00fcr ve ilk sayfa y\u00fcklenme s\u00fcresini h\u0131zland\u0131r\u0131r. RSC’ler i\u00e7inde yap\u0131lan \u00d6rnek Senaryo (RSC):<\/p>\n {data.message}<\/p>\n {\/* Di\u011fer bile\u015fenler *\/}\n <\/div>\n );\n }\n <\/code><\/pre>\n Bu \u00f6rnekte, Y\u00f6nlendirici \u00f6nbelle\u011fi, daha \u00e7ok Next.js’in istemci taraf\u0131 y\u00f6nlendiricisi taraf\u0131ndan y\u00f6netilir ve kullan\u0131c\u0131lar\u0131n uygulama i\u00e7indeki gezinmelerini h\u0131zland\u0131r\u0131r. Bu \u00f6nbelle\u011fin do\u011frudan kodla yap\u0131land\u0131r\u0131lmas\u0131 genellikle gerekmez, ancak uygulaman\u0131z\u0131n yap\u0131s\u0131 ve veri \u00e7ekme stratejileri bu \u00f6nbelle\u011fin etkinli\u011fini etkiler.<\/p>\n \u00d6rnek Senaryo: Bir kullan\u0131c\u0131 Bu mekanizmalar\u0131n do\u011fru anla\u015f\u0131lmas\u0131 ve uygulanmas\u0131, Next.js ile geli\u015ftirilen uygulamalar\u0131n performans\u0131n\u0131 en \u00fcst d\u00fczeye \u00e7\u0131karmak i\u00e7in kritiktir. 2026’da, bu \u00f6nbellekleme stratejileri, modern web geli\u015ftirmenin vazge\u00e7ilmez bir par\u00e7as\u0131 olmaya devam edecektir.<\/p>\n Next.js’in \u00f6nbellekleme mekanizmalar\u0131n\u0131 temel d\u00fczeyde anlad\u0131ktan sonra, \u015fimdi bu bilgiyi daha karma\u015f\u0131k senaryolara uygulamak ve performans optimizasyonu i\u00e7in ileri d\u00fczey stratejiler geli\u015ftirmek zaman\u0131. Farkl\u0131 \u00f6nbellekleme t\u00fcrlerini bir arada kullanarak ve belirli senaryolara g\u00f6re \u00f6zelle\u015ftirerek, uygulamalar\u0131n\u0131z\u0131n h\u0131z\u0131n\u0131 ve \u00f6l\u00e7eklenebilirli\u011fini en \u00fcst seviyeye ta\u015f\u0131yabilirsiniz. 2026’da, bu t\u00fcr ince ayarlar, rekabet\u00e7i web uygulamalar\u0131 geli\u015ftirmek i\u00e7in \u015fart olacakt\u0131r.<\/p>\n En etkili \u00f6nbellekleme stratejisi genellikle tek bir y\u00f6nteme ba\u011fl\u0131 kalmak yerine, farkl\u0131 \u00f6nbellekleme t\u00fcrlerini bir arada kullanmay\u0131 i\u00e7erir. \u00d6rne\u011fin:<\/p>\n Bir e-ticaret sitesi \u00f6rne\u011fi d\u00fc\u015f\u00fcnelim: Ana sayfa (pop\u00fcler \u00fcr\u00fcnler, kampanyalar) tam rota \u00f6nbelle\u011fi ile build zaman\u0131nda veya belirli aral\u0131klarla g\u00fcncellenerek statik olarak sunulabilir. \u00dcr\u00fcn detay sayfalar\u0131 da benzer \u015fekilde \u00f6nbelle\u011fe al\u0131nabilir, ancak stok bilgisi gibi s\u0131k de\u011fi\u015fen veriler i\u00e7in daha k\u0131sa bir \u00d6nbelle\u011fin g\u00fcncelli\u011fini korumak, performans kadar \u00f6nemlidir. Veri eskidi\u011finde kullan\u0131c\u0131ya yanl\u0131\u015f bilgi g\u00f6stermek, kullan\u0131c\u0131 deneyimini olumsuz etkileyebilir. Next.js, \u00f6nbellek ge\u00e7ersiz k\u0131lma i\u00e7in \u00e7e\u015fitli y\u00f6ntemler sunar:<\/p>\n Bir CMS (\u0130\u00e7erik Y\u00f6netim Sistemi) ile entegrasyon senaryosunda, bir i\u00e7erik edit\u00f6r\u00fc yeni bir makale yay\u0131nlad\u0131\u011f\u0131nda veya mevcut bir makaleyi g\u00fcncelledi\u011finde, bu de\u011fi\u015fikli\u011fin web sitesinde hemen g\u00f6r\u00fcnmesini sa\u011flamak \u00f6nemlidir. Bu durumda, CMS’ten gelen bir webhook ile Next.js uygulaman\u0131zdaki ilgili rotalar\u0131n \u00f6nbelle\u011fini manuel olarak ge\u00e7ersiz k\u0131labilirsiniz. Bu, kullan\u0131c\u0131lara her zaman en g\u00fcncel i\u00e7eri\u011fi sunman\u0131z\u0131 sa\u011flar.<\/p>\n \u00d6nbellekleme stratejilerinizin etkinli\u011fini anlamak i\u00e7in performans izleme ara\u00e7lar\u0131n\u0131 kullanmak \u015fartt\u0131r. Chrome DevTools’un Network sekmesi, \u00f6nbelle\u011fe al\u0131nan kaynaklar\u0131 ve istek s\u00fcrelerini analiz etmek i\u00e7in harika bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r. Ayr\u0131ca, Next.js’in kendi geli\u015ftirici ara\u00e7lar\u0131 ve \u00fc\u00e7\u00fcnc\u00fc taraf APM (Application Performance Monitoring) \u00e7\u00f6z\u00fcmleri de \u00f6nbellekleme performans\u0131n\u0131 derinlemesine analiz etmenize yard\u0131mc\u0131 olabilir. Hangi rotalar\u0131n ne kadar s\u00fcreyle \u00f6nbelle\u011fe al\u0131nd\u0131\u011f\u0131n\u0131, \u00f6nbellek isabet oranlar\u0131n\u0131 (cache hit ratio) ve \u00f6nbellek olu\u015fturma s\u00fcrelerini izleyerek, stratejilerinizi s\u00fcrekli olarak iyile\u015ftirebilirsiniz.<\/p>\n 2026’da, \u00f6nbellekleme sadece bir performans optimizasyonu olman\u0131n \u00f6tesine ge\u00e7erek, modern web uygulamalar\u0131n\u0131n temel mimari bir par\u00e7as\u0131 haline gelecektir. Farkl\u0131 \u00f6nbellekleme t\u00fcrlerini ak\u0131ll\u0131ca birle\u015ftirerek, manuel ge\u00e7ersiz k\u0131lma stratejileri geli\u015ftirerek ve performans verilerini s\u00fcrekli izleyerek, kullan\u0131c\u0131lar\u0131n\u0131za ola\u011fan\u00fcst\u00fc h\u0131zl\u0131 ve duyarl\u0131 deneyimler sunabilirsiniz.<\/p>\n Next.js’in sundu\u011fu istek tekrarlamas\u0131, veri \u00f6nbelle\u011fi, tam rota \u00f6nbelle\u011fi ve y\u00f6nlendirici \u00f6nbelle\u011fi mekanizmalar\u0131, modern web uygulamalar\u0131 geli\u015ftirirken performans ve \u00f6l\u00e7eklenebilirlik a\u00e7\u0131s\u0131ndan b\u00fcy\u00fck avantajlar sa\u011flar. Bu makalede, her bir kavram\u0131 detayl\u0131ca inceledik, aralar\u0131ndaki farklar\u0131 netle\u015ftirdik ve ger\u00e7ek d\u00fcnya senaryolar\u0131yla nas\u0131l etkili bir \u015fekilde kullan\u0131labilece\u011fini g\u00f6sterdik. 2026 y\u0131l\u0131na geldi\u011fimizde, bu \u00f6nbellekleme stratejileri sadece birer \u00f6zellik olmaktan \u00e7\u0131k\u0131p, y\u00fcksek performansl\u0131, kullan\u0131c\u0131 dostu ve rekabet\u00e7i web uygulamalar\u0131 olu\u015fturman\u0131n temel yap\u0131 ta\u015flar\u0131 haline gelmi\u015ftir.<\/p>\n \u0130stek tekrarlamas\u0131, ayn\u0131 istek d\u00f6ng\u00fcs\u00fc i\u00e7indeki gereksiz veri \u00e7ekme i\u015flemlerini engelleyerek verimlilik sa\u011flar. Veri \u00f6nbelle\u011fi, farkl\u0131 istekler aras\u0131nda payla\u015f\u0131lan verileri saklayarak tekrarlayan veri taleplerini h\u0131zland\u0131r\u0131r. Tam rota \u00f6nbelle\u011fi, bir sayfan\u0131n tamam\u0131n\u0131 \u00f6nbelle\u011fe alarak en h\u0131zl\u0131 y\u00fcklenme s\u00fcrelerini sunar ve statik site \u00fcretimi (SSG) ile m\u00fckemmel uyum i\u00e7indedir. Son olarak, y\u00f6nlendirici \u00f6nbelle\u011fi, kullan\u0131c\u0131lar\u0131n uygulama i\u00e7inde gezinirken ak\u0131c\u0131 ve kesintisiz bir deneyim ya\u015famas\u0131n\u0131 sa\u011flar.<\/p>\n Bu mekanizmalar\u0131 do\u011fru anlamak ve etkili bir \u015fekilde uygulamak, geli\u015ftiricilere hem sunucu kaynaklar\u0131ndan tasarruf etme hem de kullan\u0131c\u0131lara inan\u0131lmaz derecede h\u0131zl\u0131 ve duyarl\u0131 deneyimler sunma g\u00fcc\u00fc verir. Next.js’in App Router’\u0131 ve React Server Components (RSC) gibi yenilikleri, bu \u00f6nbellekleme stratejilerini daha da entegre ve g\u00fc\u00e7l\u00fc hale getirmi\u015ftir. 2026’da, bu \u00f6nbellekleme zihniyetini benimseyen geli\u015ftiriciler, performans konusunda \u00f6ne \u00e7\u0131karak kullan\u0131c\u0131 beklentilerini a\u015fan uygulamalar sunacakt\u0131r.<\/p>\n C: \u0130stek tekrarlamas\u0131, tek bir istek d\u00f6ng\u00fcs\u00fc i\u00e7indeki tekrarlayan veri \u00e7ekme i\u015flemlerini optimize ederken, veri \u00f6nbelle\u011fi farkl\u0131 istekler aras\u0131nda payla\u015f\u0131lan verileri saklayarak genel veri \u00e7ekme s\u00fcresini azalt\u0131r.<\/p>\n<\/li>\n C: \u0130\u00e7eri\u011fi s\u0131k de\u011fi\u015fmeyen ve herkese ayn\u0131 g\u00f6sterilen sayfalar (\u00f6rne\u011fin, statik sayfalar, blog yaz\u0131lar\u0131, \u00fcr\u00fcn listeleri) i\u00e7in tam rota \u00f6nbelle\u011fi idealdir. Bu, en h\u0131zl\u0131 y\u00fcklenme s\u00fcrelerini sa\u011flar.<\/p>\n<\/li>\n C: Y\u00f6nlendirici \u00f6nbelle\u011fi, Next.js’in App Router’\u0131 taraf\u0131ndan otomatik olarak y\u00f6netilir. Uygulama i\u00e7inde C: C: RSC’ler, veri \u00e7ekme i\u015flemlerini sunucuda ger\u00e7ekle\u015ftirdi\u011fi i\u00e7in istek tekrarlamas\u0131 ve veri \u00f6nbelle\u011fi gibi mekanizmalar\u0131n daha verimli \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Ayr\u0131ca, render edilmi\u015f sunucu bile\u015fenlerinin \u00e7\u0131kt\u0131s\u0131 da \u00f6nbelle\u011fe al\u0131nabilir.<\/p>\n<\/li>\n<\/ul>\n #Nextjs #WebGeli\u015ftirme #\u00d6nbellekleme #React #Performans<\/p>\n","protected":false},"excerpt":{"rendered":"Modern web uygulamalar\u0131 geli\u015ftirirken performans her zaman en \u00f6ncelikli konulardan biri olmu\u015ftur.","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-44810","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nfetch<\/code> API’sinin erweitert edilmi\u015f hali veya \u00f6zel hook’lar arac\u0131l\u0131\u011f\u0131yla y\u00f6netilebilir. \u00d6rne\u011fin, bir kullan\u0131c\u0131 profili sayfas\u0131nda, kullan\u0131c\u0131n\u0131n ad\u0131n\u0131 g\u00f6steren bir bile\u015fen ve kullan\u0131c\u0131n\u0131n sipari\u015f ge\u00e7mi\u015fini g\u00f6steren ba\u015fka bir bile\u015fen olabilir. E\u011fer her ikisi de ayn\u0131 getUserProfile<\/code> API \u00e7a\u011fr\u0131s\u0131n\u0131 yap\u0131yorsa, istek tekrarlamas\u0131 ilk \u00e7a\u011fr\u0131dan d\u00f6nen veriyi saklayacak ve ikinci \u00e7a\u011fr\u0131ya bu saklanan veriyi d\u00f6nd\u00fcrecektir. Bu, uygulaman\u0131n bellek kullan\u0131m\u0131n\u0131 da optimize eder \u00e7\u00fcnk\u00fc ayn\u0131 veri birden \u00e7ok kez belle\u011fe y\u00fcklenmez.<\/p>\nVeri \u00d6nbelle\u011fi (Data Cache): Tekrarlayan Veri Taleplerini H\u0131zland\u0131rmak<\/h3>\n
fetch<\/code> API’sini kullanarak bu veri \u00f6nbelle\u011fini y\u00f6netir. Varsay\u0131lan olarak, fetch<\/code> \u00e7a\u011fr\u0131lar\u0131, ayn\u0131 URL ve se\u00e7eneklerle yap\u0131ld\u0131\u011f\u0131nda, bu verileri \u00f6nbelle\u011fe al\u0131r. Bu \u00f6nbellek, sunucu taraf\u0131nda ve istemci taraf\u0131nda (e\u011fer kullan\u0131l\u0131yorsa) y\u00f6netilebilir. Veri \u00f6nbelle\u011fi, \u00f6zellikle sunucu taraf\u0131 i\u015fleme (SSR) ve statik site \u00fcretimi (SSG) senaryolar\u0131nda performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. \u00c7\u00fcnk\u00fc veriler bir kez \u00e7ekilir ve sonraki t\u00fcm render’lar i\u00e7in haz\u0131r hale gelir. Bu, sunucu y\u00fck\u00fcn\u00fc azaltman\u0131n yan\u0131 s\u0131ra, kullan\u0131c\u0131lar\u0131n sayfalar\u0131 \u00e7ok daha h\u0131zl\u0131 g\u00f6rmesini sa\u011flar. Bir e-ticaret platformunu d\u00fc\u015f\u00fcn\u00fcn: \u00dcr\u00fcn listesi sayfalar\u0131, her zaman ayn\u0131 \u00fcr\u00fcn bilgilerini g\u00f6sterir. Bu bilgileri her istekte veritaban\u0131ndan veya API’den \u00e7ekmek yerine, veri \u00f6nbelle\u011fine almak, sayfa y\u00fcklenme s\u00fcrelerini milisaniyeler seviyesinde k\u0131saltabilir. Hatta, bu verilerin ne kadar s\u00fcreyle \u00f6nbellekte tutulaca\u011f\u0131n\u0131 belirleyebilmek (\u00f6rne\u011fin, revalidate<\/code> se\u00e7ene\u011fi ile) de m\u00fcmk\u00fcnd\u00fcr, bu da verinin g\u00fcncelli\u011fini korurken performans\u0131 optimize etmeye yard\u0131mc\u0131 olur.<\/p>\nfetch<\/code> API’sinin \u00f6nbellekleme davran\u0131\u015f\u0131, cache<\/code> ve next.revalidate<\/code> gibi se\u00e7eneklerle \u00f6zelle\u015ftirilebilir. cache: 'force-cache'<\/code> (varsay\u0131lan) veriyi \u00f6nbelle\u011fe al\u0131r, cache: 'no-store'<\/code> ise \u00f6nbelle\u011fe almay\u0131 engeller. next.revalidate<\/code> ise verinin ne kadar s\u00fcreyle \u00f6nbellekte saklanaca\u011f\u0131n\u0131 belirler. \u00d6rne\u011fin, bir haber sitesinde ana sayfa makalelerinin bir saat boyunca \u00f6nbellekte tutulmas\u0131n\u0131 isteyebilirsiniz. Bu durumda, ilk bir saat boyunca gelen t\u00fcm istekler \u00f6nbellekten veri alacakt\u0131r. Bir saat sonunda veya manuel olarak \u00f6nbellek ge\u00e7ersiz k\u0131l\u0131nd\u0131\u011f\u0131nda, veri yeniden \u00e7ekilecek ve yeni \u00f6nbellek olu\u015fturulacakt\u0131r. Bu esneklik, hem performans hem de veri g\u00fcncelli\u011fi aras\u0131nda do\u011fru dengeyi kurman\u0131z\u0131 sa\u011flar. Veri \u00f6nbelle\u011fi, \u00f6zellikle JAMstack mimarisiyle uyumlu \u00e7al\u0131\u015farak, statik sitelerin h\u0131z\u0131n\u0131 ve \u00f6l\u00e7eklenebilirli\u011fini art\u0131rmada kilit rol oynar.<\/p>\nTam Rota \u00d6nbelle\u011fi (Full Route Cache): Sayfalar\u0131n Tamam\u0131n\u0131 H\u0131zland\u0131rmak<\/h3>\n
Y\u00f6nlendirici \u00d6nbelle\u011fi (Router Cache): Gezinmede Ak\u0131c\u0131l\u0131k Sa\u011flamak<\/h3>\n
Uygulamal\u0131 K\u0131s\u0131m: Next.js \u00d6nbellekleme Mekanizmalar\u0131n\u0131 Kodla Anlamak<\/h2>\n
fetch<\/code> API’sinin nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ve \u00f6nbellekleme se\u00e7eneklerinin nas\u0131l yap\u0131land\u0131r\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6rece\u011fiz. Unutmay\u0131n ki, Next.js’in App Router’\u0131 ile birlikte gelen React Server Components (RSC), bu \u00f6nbellekleme stratejilerini daha da entegre ve g\u00fc\u00e7l\u00fc hale getirmi\u015ftir.<\/p>\nVeri \u00d6nbelle\u011fini Yap\u0131land\u0131rma:
fetch<\/code> API’si ve Se\u00e7enekleri<\/h3>\nfetch<\/code> API’sini kullanmakt\u0131r. Bu API, standart taray\u0131c\u0131 fetch<\/code>‘ine ek olarak Next.js’e \u00f6zg\u00fc \u00f6nbellekleme se\u00e7enekleri sunar.<\/p>\nfetch<\/code> iste\u011fi, varsay\u0131lan olarak cache: 'force-cache'<\/code> ile \u00e7al\u0131\u015f\u0131r. Bu, iste\u011fin sonu\u00e7lar\u0131n\u0131 \u00f6nbelle\u011fe alaca\u011f\u0131 anlam\u0131na gelir. Ayn\u0131 URL ve ayn\u0131 se\u00e7eneklerle yap\u0131lan sonraki fetch<\/code> \u00e7a\u011fr\u0131lar\u0131, \u00f6nbellekten veri alacakt\u0131r.<\/p>\ncache: 'no-store'<\/code> se\u00e7ene\u011fini kullanabilirsiniz. Bu, her iste\u011fin do\u011frudan kaynaktan veri \u00e7ekmesini sa\u011flar.<\/p>\nnext.revalidate<\/code> se\u00e7ene\u011fini kullanabilirsiniz. Bu se\u00e7enek saniye cinsinden bir de\u011fer al\u0131r.<\/p>\n\n \/\/ Sayfa veya bile\u015fen i\u00e7inde\n async function getProducts() {\n const res = await fetch('https:\/\/api.example.com\/products', {\n cache: 'force-cache', \/\/ Varsay\u0131lan, \u00f6nbelle\u011fe al\u0131r\n next: { revalidate: 3600 } \/\/ Her 1 saatte bir yeniden do\u011frula (3600 saniye)\n });\n if (!res.ok) {\n throw new Error('Failed to fetch products');\n }\n return res.json();\n }\n\n async function getSpecificProduct(id) {\n const res = await fetch(https:\/\/api.example.com\/products\/${id}<\/code>, {\n cache: 'no-store' \/\/ Bu iste\u011fi \u00f6nbelle\u011fe alma\n });\n if (!res.ok) {\n throw new Error('Failed to fetch product');\n }\n return res.json();\n }\n <\/code><\/pre>\ngetProducts<\/code> fonksiyonu, \u00fcr\u00fcnleri \u00e7ekerken veriyi bir saat boyunca \u00f6nbelle\u011fe al\u0131r. Her saat sonunda, \u00f6nbellek ge\u00e7ersiz k\u0131l\u0131n\u0131r ve veri yeniden \u00e7ekilir. getSpecificProduct<\/code> fonksiyonu ise, belirli bir \u00fcr\u00fcn\u00fcn bilgilerini \u00e7ekerken \u00f6nbelle\u011fe almay\u0131 tamamen devre d\u0131\u015f\u0131 b\u0131rak\u0131r. Bu, dinamik veriler i\u00e7in uygun bir yakla\u015f\u0131md\u0131r.<\/p>\nTam Rota \u00d6nbelle\u011fi ve \u0130stek Tekrarlamas\u0131<\/h3>\n
fetch<\/code> \u00e7a\u011fr\u0131lar\u0131 kadar belirgin olmayabilir, ancak uygulaman\u0131n genel yap\u0131s\u0131 ve veri \u00e7ekme stratejileri ile yak\u0131ndan ili\u015fkilidir.<\/p>\nfetch<\/code> \u00e7a\u011fr\u0131lar\u0131, istek tekrarlamas\u0131 ve veri \u00f6nbelle\u011fi mekanizmalar\u0131ndan otomatik olarak yararlan\u0131r.<\/p>\n\n \/\/ app\/page.js (Server Component)\n async function getData() {\n const res = await fetch('https:\/\/api.example.com\/homepage-data', {\n cache: 'force-cache',\n next: { revalidate: 60 } \/\/ 1 dakika\n });\n return res.json();\n }\n\n export default async function HomePage() {\n const data = await getData(); \/\/ Bu \u00e7a\u011fr\u0131, istek tekrarlamas\u0131 ve veri \u00f6nbelle\u011fi kullan\u0131r\n\n return (\n Ho\u015f Geldiniz<\/h1>\n
HomePage<\/code> bir sunucu bile\u015fenidir. getData<\/code> fonksiyonu i\u00e7indeki fetch<\/code> \u00e7a\u011fr\u0131s\u0131, Next.js’in \u00f6nbellekleme mekanizmalar\u0131ndan yararlan\u0131r. E\u011fer ayn\u0131 istek s\u0131ras\u0131nda getData<\/code> birden \u00e7ok kez \u00e7a\u011fr\u0131l\u0131rsa, istek tekrarlamas\u0131 devreye girer. E\u011fer farkl\u0131 istekler ayn\u0131 veriyi talep ederse, veri \u00f6nbelle\u011fi kullan\u0131l\u0131r. Tam rota \u00f6nbelle\u011fi ise, bu HomePage<\/code> bile\u015feninin render edilmi\u015f \u00e7\u0131kt\u0131s\u0131n\u0131n (HTML) \u00f6nbelle\u011fe al\u0131nmas\u0131n\u0131 sa\u011flar, b\u00f6ylece sonraki ziyaretler \u00e7ok daha h\u0131zl\u0131 olur.<\/p>\nY\u00f6nlendirici \u00d6nbelle\u011fi (Router Cache)<\/h3>\n
'\/products'<\/code> sayfas\u0131ndan '\/products\/[id]'<\/code> sayfas\u0131na ge\u00e7ti\u011finde, '\/products'<\/code> sayfas\u0131n\u0131n verileri ve render \u00e7\u0131kt\u0131s\u0131 y\u00f6nlendirici \u00f6nbelle\u011finde saklanabilir. Kullan\u0131c\u0131 geri d\u00f6nd\u00fc\u011f\u00fcnde, bu \u00f6nbelle\u011fe al\u0131nm\u0131\u015f veriler kullan\u0131larak sayfa h\u0131zla yeniden olu\u015fturulur. Bu, \u00f6zellikle useRouter<\/code> hook’u ile navigasyon yap\u0131ld\u0131\u011f\u0131nda veya <Link><\/code> bile\u015feni kullan\u0131ld\u0131\u011f\u0131nda otomatik olarak ger\u00e7ekle\u015fir.<\/p>\n\u0130leri D\u00fczey: \u00d6nbellekleme Stratejileri ve Performans Optimizasyonu<\/h2>\n
Farkl\u0131 \u00d6nbellekleme T\u00fcrlerinin Entegrasyonu<\/h3>\n
\n
next.revalidate<\/code> ile) veya iste\u011fe ba\u011fl\u0131 olarak \u00f6nbelleksiz (no-store<\/code>) olarak y\u00f6netilebilir.<\/li>\nrevalidate<\/code> s\u00fcresi belirlenebilir. Kullan\u0131c\u0131 profili ve sepet bilgileri ise, kullan\u0131c\u0131ya \u00f6zel oldu\u011fu i\u00e7in \u00f6nbelle\u011fe al\u0131nmayabilir veya no-store<\/code> ile y\u00f6netilebilir.<\/p>\n\u00d6nbellek Ge\u00e7ersiz K\u0131lma (Cache Invalidation) Stratejileri<\/h3>\n
\n
next.revalidate<\/code>):<\/strong> Belirli bir s\u00fcre sonra \u00f6nbelle\u011fi otomatik olarak ge\u00e7ersiz k\u0131lar.<\/li>\nfetch<\/code> API’sinin cache: 'no-cache'<\/code> se\u00e7ene\u011fi, taray\u0131c\u0131 \u00f6nbelle\u011fini atlayarak sunucudan her zaman yeni veri \u00e7ekilmesini sa\u011flar, ancak bu sunucu taraf\u0131 \u00f6nbelle\u011fi etkilemez.<\/li>\n<\/ul>\nPerformans \u0130zleme ve Ayarlama<\/h3>\n
Sonu\u00e7: 2026’da Next.js \u00d6nbellekleme Zihniyeti<\/h2>\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
\n
<Link><\/code> bile\u015feni veya useRouter<\/code> hook’u ile yap\u0131lan navigasyonlar bu \u00f6nbellekten yararlan\u0131r.<\/p>\n<\/li>\nnext.revalidate<\/code> se\u00e7ene\u011fi ile belirli bir s\u00fcre belirleyerek veya API’ler arac\u0131l\u0131\u011f\u0131yla manuel \u00f6nbellek ge\u00e7ersiz k\u0131lma y\u00f6ntemlerini kullanarak verinin g\u00fcncelli\u011fini sa\u011flayabilirsiniz.<\/p>\n<\/li>\n