COMPUTER ENGINEER

RASİM ATABERK ŞAHİNKİŞİSEL PORTFÖY
/
Örneklere git
Blog
Next.js / ASP.NET Core / SQL6 dk çalışma
12/ 41

Ağ geçidi

CDN ve kenar önbelleği

Statik dosyaları kullanıcıya en yakın noktadan sunmak ve neyin önbelleğe alınmaması gerektiğini bilmek.

AnlaÖrneği inceleKendin uygula

Kavramı anlayalım

CDN (İçerik Dağıtım Ağı), dünyaya yayılmış sunuculardan oluşur. Kullanıcı bir dosya istediğinde en yakın uç noktası yanıt verir; dosya orada yoksa kaynağa (origin) gider, alır ve sonraki istekler için saklar. Mesafe kısaldığı için gecikme azalır, kaynak sunucunun yükü düşer.

Ne kadar süre saklanacağını Cache-Control başlığı belirler. Next.js derleme çıktısındaki JavaScript ve CSS dosyalarının adlarında içerik özeti (hash) bulunur; içerik değişince ad da değişir. Bu yüzden bu dosyalar ‘immutable’ olarak bir yıl saklanabilir. HTML ise kullanıcıya göre değişebileceği ve güncel kalması gerektiği için genellikle kısa süreli veya hiç saklanmaz.

En tehlikeli hata, kişiye özel bir yanıtı paylaşılan önbelleğe koymaktır. ‘private’ yönergesi yanıtın yalnız tarayıcıda saklanmasını, ‘no-store’ hiç saklanmamasını söyler. Oturum çerezine göre değişen bir sayfanın ‘public’ olarak önbelleklenmesi, bir kullanıcının verisinin başka kullanıcılara gösterilmesine yol açabilir.

NERESİNDE KULLANIRSIN?

Doğru önbellek başlıkları hem hızı hem de veri gizliliğini belirler.

SIK YAPILAN HATA

Oturuma göre değişen bir yanıtı Cache-Control: public ile göndermek.

01 / UYGULAMA

Aynı konu. Üç farklı derinlik.

Temsili örnek
/_next/static/chunks/main-3f9a1c.js
Cache-Control: public, max-age=31536000, immutable

Adı içerikle değişen dosya bir yıl güvenle saklanabilir.

Bu sayfa gerçek bir sunucuya veya veritabanına bağlanmaz. Kod örnekleri .NET 8, Next.js ve SQL Server için temsilîdir; süreler simülasyondaki örnek değerlerdir, ölçüm değildir. Örnekleri yalnız kendi geliştirme ortamında dene; gerçek bağlantı dizesi, token veya parola paylaşma.

02 / SIRA SENDE

Önce kendin dene.

Bir CSS dosyasını düzelttin ama kullanıcılar eski görünümü görmeye devam ediyor. Dosya ‘/styles.css’ adıyla ve max-age=31536000 ile sunuluyor. Sorun ve çözüm nedir?

Çözümü ve açıklamasını göster
Açıklamalı çözüm
Ad değişmediği için tarayıcı ve CDN bir yıl boyunca eski dosyayı kullanır.
Çözüm: dosya adına içerik özeti eklemek (styles.3f9a1c.css)
veya bu adı kısa max-age ile sunmak.

Uzun süreli önbellek ancak içerik değişince adı da değişen dosyalar için güvenlidir.