Uzman \u0130pucu: Bu temel stratejilerin uygulanmas\u0131, \u00e7o\u011fu Astro sitesi i\u00e7in y\u00fckleme s\u00fcrelerinde %30-50 oran\u0131nda bir iyile\u015fme sa\u011flayabilir. Unutmay\u0131n, her k\u00fc\u00e7\u00fck optimizasyon k\u00fcm\u00fclatif bir etki yarat\u0131r!<\/div>\n

Statik Astro Yap\u0131s\u0131nda Dinamik \u0130\u00e7erik ve API \u0130stekleri Nas\u0131l Y\u00f6netilir?<\/h2>\n

Astro, \u00f6z\u00fcnde statik bir site jenerat\u00f6r\u00fc olmas\u0131na ra\u011fmen, modern web sitelerinin dinamik i\u00e7erik ihtiya\u00e7lar\u0131n\u0131 g\u00f6z ard\u0131 etmez. Blog g\u00f6nderileri, \u00fcr\u00fcn listeleri veya portf\u00f6y \u00f6\u011feleri gibi i\u00e7erikler genellikle bir CMS'den, bir veritaban\u0131ndan veya harici bir API'den gelir. Bu dinamik verilerin statik bir siteye entegrasyonu, do\u011fru yakla\u015f\u0131mla istek say\u0131s\u0131n\u0131 art\u0131rmadan y\u00fcksek performans sunabilir. Astro'nun g\u00fcc\u00fc, bu t\u00fcr dinamik verileri derleme zaman\u0131nda (build time) \u00e7ekip, tamamen statik HTML'ye d\u00f6n\u00fc\u015ft\u00fcrmesinden gelir. Bu sayede, son kullan\u0131c\u0131, sunucuya hi\u00e7bir API iste\u011fi g\u00f6ndermeden do\u011frudan \u00f6nbelle\u011fe al\u0131nm\u0131\u015f, h\u0131zl\u0131 bir sayfa al\u0131r.<\/p>\n

Dinamik i\u00e7erik y\u00f6netiminde anahtar, veriyi m\u00fcmk\u00fcn oldu\u011funca derleme a\u015famas\u0131nda elde etmektir. Astro'nun getStaticPaths<\/code> ve <\/code> (veya do\u011frudan fetch<\/code> API) gibi \u00f6zellikleri bu konuda devreye girer. \u00d6rne\u011fin, bir blog sitesi in\u015fa ediyorsan\u0131z ve g\u00f6nderileriniz bir headless CMS'ten geliyorsa, Astro'yu kullanarak t\u00fcm blog g\u00f6nderilerini derleme zaman\u0131nda \u00e7ekebilir ve her bir g\u00f6nderi i\u00e7in ayr\u0131 bir statik sayfa olu\u015fturabilirsiniz. Bu, her sayfa y\u00fcklendi\u011finde ayr\u0131 ayr\u0131 API istekleri yapma ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r. Kullan\u0131c\u0131 sitenize eri\u015fti\u011finde, t\u00fcm i\u00e7erik zaten HTML'ye g\u00f6m\u00fcl\u00fc oldu\u011fundan, taray\u0131c\u0131n\u0131n yaln\u0131zca bu HTML'i ayr\u0131\u015ft\u0131rmas\u0131 ve ilgili statik varl\u0131klar\u0131 (resimler, CSS) indirmesi yeterli olur.<\/p>\n

\n---\n\/\/ src\/pages\/blog\/[slug].astro\nexport async function getStaticPaths() {\n  const posts = await fetch('https:\/\/api.example.com\/posts').then(res => res.json());\n\n  return posts.map(post => ({\n    params: { slug: post.slug },\n    props: { post },\n  }));\n}\n\nconst { post } = Astro.props;\n---\n{post.title}<\/h1<\n{post.content}<\/p>\n<\/pre>\n
<\/code><\/p>\n
Yukar\u0131daki \u00f6rnekte, getStaticPaths<\/code> fonksiyonu, derleme s\u0131ras\u0131nda t\u00fcm blog g\u00f6nderilerini harici bir API'den \u00e7eker. Her g\u00f6nderi i\u00e7in bir yol (path) ve ilgili veriyi (props) d\u00f6nd\u00fcr\u00fcr. Astro, bu bilgilerle her blog g\u00f6nderisi i\u00e7in ayr\u0131 bir statik HTML sayfas\u0131 olu\u015fturur. B\u00f6ylece, kullan\u0131c\u0131lar \/blog\/ilk-makale<\/code> adresine gittiklerinde, herhangi bir client-side API iste\u011fi olmaks\u0131z\u0131n, tamamen statik ve \u00f6nbelle\u011fe al\u0131nabilir bir sayfa g\u00f6r\u00fcrler.<\/p>\n
Ancak, her dinamik i\u00e7eri\u011fin derleme zaman\u0131nda \u00e7ekilmesi m\u00fcmk\u00fcn veya pratik olmayabilir. \u00d6rne\u011fin, ger\u00e7ek zamanl\u0131 veriler (borsa fiyatlar\u0131, anl\u0131k sohbet mesajlar\u0131) veya kullan\u0131c\u0131ya \u00f6zel i\u00e7erikler (al\u0131\u015fveri\u015f sepeti, profil bilgileri) client-side'da dinamik olarak y\u00fcklenmelidir. Bu gibi durumlarda, Astro'nun k\u0131smi hidrasyon (partial hydration) ve \"Astro Islands\" mimarisi devreye girer. Astro Islands, sitenizin yaln\u0131zca etkile\u015fimli olmas\u0131 gereken k\u00fc\u00e7\u00fck, izole JavaScript \"adalar\u0131n\u0131\" client-side'da hidrate etmesini sa\u011flar. Geri kalan HTML statik kal\u0131r ve JavaScript y\u00fcklenmesi i\u00e7in herhangi bir istek olu\u015fturmaz. Bu yakla\u015f\u0131m, sadece gerekti\u011fi kadar JavaScript'i taray\u0131c\u0131ya g\u00f6ndererek genel JavaScript y\u00fck\u00fcn\u00fc ve dolay\u0131s\u0131yla ilgili istek say\u0131s\u0131n\u0131 minimumda tutar. \u00d6rne\u011fin, bir yorum formu veya bir arama \u00e7ubu\u011fu gibi etkile\u015fimli bir bile\u015fen, client:load<\/code> veya client:idle<\/code> direktifleriyle i\u015faretlenerek sadece o bile\u015fenin JavaScript'i y\u00fcklenir ve \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r.<\/p>\n
Vaka Analizi: Bir E-ticaret Sitesinde \u00dcr\u00fcn Detaylar\u0131<\/strong><\/p>\n
B\u00fcy\u00fck bir e-ticaret sitesi, binlerce \u00fcr\u00fcn sayfas\u0131n\u0131 Astro ile in\u015fa etmeye karar verdi. Geleneksel yakla\u015f\u0131mlar, her \u00fcr\u00fcn sayfas\u0131 y\u00fcklendi\u011finde \u00fcr\u00fcn detaylar\u0131n\u0131 bir API'den \u00e7ekmeyi gerektirecekti, bu da on binlerce API iste\u011fi ve yava\u015f y\u00fckleme s\u00fcreleri anlam\u0131na geliyordu. \u00c7\u00f6z\u00fcm olarak, Astro'nun getStaticPaths<\/code> \u00f6zelli\u011fi kullan\u0131ld\u0131. T\u00fcm \u00fcr\u00fcn verileri (isim, a\u00e7\u0131klama, fiyat, g\u00f6rseller) derleme zaman\u0131nda e-ticaret platformunun API'sinden \u00e7ekildi. Her \u00fcr\u00fcn i\u00e7in optimize edilmi\u015f bir HTML sayfas\u0131 olu\u015fturuldu. Sonu\u00e7: Kullan\u0131c\u0131lar, \u00fcr\u00fcn sayfalar\u0131na an\u0131nda eri\u015febildi, sayfa y\u00fckleme s\u00fcreleri ortalama 2 saniyeden 300 ms'ye d\u00fc\u015ft\u00fc ve sunucuya olan API istekleri tamamen ortadan kalkt\u0131 (sadece derleme s\u0131ras\u0131nda yap\u0131ld\u0131). Bu, hem kullan\u0131c\u0131 deneyimini iyile\u015ftirdi hem de API maliyetlerini d\u00fc\u015f\u00fcrd\u00fc. Ek olarak, \u00fcr\u00fcn galerisi gibi etkile\u015fimli k\u0131s\u0131mlar Astro Islands ile client:visible<\/code> olarak i\u015faretlenerek, sadece ekran g\u00f6r\u00fcnd\u00fc\u011f\u00fcnde JavaScript'in y\u00fcklenmesi sa\u011fland\u0131.<\/p>\n
Son olarak, statik i\u00e7eri\u011fin h\u0131zl\u0131 sunumu i\u00e7in CDN'ler (Content Delivery Networks) ve taray\u0131c\u0131 \u00f6nbellekleme stratejileri hayati \u00f6neme sahiptir. Astro siteleri tamamen statik oldu\u011fundan, CDN'ler arac\u0131l\u0131\u011f\u0131yla kolayca da\u011f\u0131t\u0131labilir ve kullan\u0131c\u0131lara en yak\u0131n konumdan, \u0131\u015f\u0131k h\u0131z\u0131nda sunulabilirler. Taray\u0131c\u0131 \u00f6nbellekleme ba\u015fl\u0131klar\u0131 (Cache-Control) do\u011fru ayarland\u0131\u011f\u0131nda, kullan\u0131c\u0131lar sitenizi tekrar ziyaret ettiklerinde bir\u00e7ok kayna\u011f\u0131 yeniden indirmek yerine yerel \u00f6nbelleklerinden \u00e7ekerler, bu da istek say\u0131s\u0131n\u0131 s\u0131f\u0131ra indirger.<\/p>\n
Astro'da Geli\u015fmi\u015f Optimizasyon Teknikleri: HTTP\/2 ve \u00d6tesi<\/h2>\nTemel optimizasyon stratejilerini uygulad\u0131ktan sonra, Astro sitenizin performans\u0131n\u0131 daha da ileri ta\u015f\u0131mak i\u00e7in baz\u0131 geli\u015fmi\u015f tekniklere odaklanabiliriz. Bu teknikler, genellikle a\u011f protokollerinin inceliklerini ve taray\u0131c\u0131n\u0131n kaynak y\u00fckleme mekanizmalar\u0131n\u0131 derinlemesine anlamay\u0131 gerektirir. \u0130stek say\u0131s\u0131n\u0131 do\u011frudan azaltmasalar bile, her bir iste\u011fin daha verimli i\u015flenmesini sa\u011flayarak genel y\u00fckleme s\u00fcresini dramatik bir \u015fekilde iyile\u015ftirebilirler.<\/p>\n
HTTP\/2 ve HTTP\/3 ile \u0130stek Y\u00f6netimini \u0130yile\u015ftirmek M\u00fcmk\u00fcn m\u00fcd\u00fcr?<\/h3>\nGeleneksel HTTP\/1.1 protokol\u00fcnde, her yeni istek genellikle ayr\u0131 bir TCP ba\u011flant\u0131s\u0131 gerektirir ve taray\u0131c\u0131 ayn\u0131 anda s\u0131n\u0131rl\u0131 say\u0131da paralel istek yapabilir (genellikle 6-8). Bu durum, \u00e7ok say\u0131da k\u00fc\u00e7\u00fck dosya (CSS, JS, resimler) i\u00e7in ciddi bir darbo\u011faz olu\u015fturur ve \"head-of-line blocking\" denilen bir duruma yol a\u00e7ar, yani bir iste\u011fin tamamlanmas\u0131, di\u011ferlerinin beklemek zorunda kalmas\u0131 anlam\u0131na gelir. \u0130\u015fte bu noktada HTTP\/2 ve HTTP\/3 devreye girer.<\/p>\n
\nHTTP\/2: Multiplexing<\/strong>
\n        HTTP\/2, tek bir TCP ba\u011flant\u0131s\u0131 \u00fczerinden birden fazla iste\u011fin ve yan\u0131t\u0131n e\u015f zamanl\u0131 olarak g\u00f6nderilmesine olanak tan\u0131yan bir \"multiplexing\" \u00f6zelli\u011fi sunar. Bu, taray\u0131c\u0131n\u0131n ayn\u0131 anda y\u00fczlerce iste\u011fi y\u00f6netebilece\u011fi anlam\u0131na gelir. Sonu\u00e7 olarak, sitenizdeki \u00e7ok say\u0131da k\u00fc\u00e7\u00fck dosya i\u00e7in istek say\u0131s\u0131n\u0131 fiziksel olarak azaltmasak bile, bu isteklerin i\u015flem s\u00fcresi \u00f6nemli \u00f6l\u00e7\u00fcde k\u0131sal\u0131r. Astro siteleri statik olduklar\u0131 i\u00e7in genellikle bir CDN veya modern bir web sunucusu (Nginx, Apache) \u00fczerinden sunulur ve bu sunucular\u0131n \u00e7o\u011fu zaten HTTP\/2 deste\u011fi sunar. Bu, sitenizin otomatik olarak bu avantajdan faydalanaca\u011f\u0131 anlam\u0131na gelir.<\/li>\n
HTTP\/3: QUIC Protokol\u00fc<\/strong>
\n        HTTP\/3, TCP yerine UDP tabanl\u0131 yeni bir a\u011f protokol\u00fc olan QUIC'i kullan\u0131r. QUIC, TCP'nin \"head-of-line blocking\" sorununu tamamen ortadan kald\u0131r\u0131r ve ba\u011flant\u0131 kurma (handshake) s\u00fcrelerini k\u0131salt\u0131r. \u00d6zellikle mobil a\u011flarda veya g\u00fcvenilir olmayan ba\u011flant\u0131larda HTTP\/3, daha stabil ve h\u0131zl\u0131 bir deneyim sunar. HTTP\/3 deste\u011fi hala yayg\u0131nla\u015fma a\u015famas\u0131nda olsa da, Cloudflare gibi CDN'ler bu teknolojiyi zaten sunmaktad\u0131r. Astro sitenizi HTTP\/3 destekli bir CDN \u00fczerinden yay\u0131nlamak, gelece\u011fe y\u00f6nelik \u00f6nemli bir performans optimizasyonudur.<\/li>\n<\/ul>\nUzman \u0130pucu: Astro sitenizi modern bir CDN (Cloudflare, Vercel, Netlify) \u00fczerinden yay\u0131nlayarak HTTP\/2 ve HTTP\/3 gibi a\u011f protokol\u00fc optimizasyonlar\u0131ndan otomatik olarak faydalan\u0131rs\u0131n\u0131z. Bu, manuel yap\u0131land\u0131rma gerektirmeden performansta b\u00fcy\u00fck bir s\u0131\u00e7rama sa\u011flar.<\/div>\nKaynak \u00d6n Y\u00fckleme ve \u00d6n Ba\u011flant\u0131 ile Kritik \u0130stekleri H\u0131zland\u0131rmak<\/h3>\nTaray\u0131c\u0131lar\u0131n kaynaklar\u0131 daha verimli bir \u015fekilde indirmesine yard\u0131mc\u0131 olmak i\u00e7in <\/code> etiketinin rel<\/code> \u00f6zniteli\u011fi ile \u00e7e\u015fitli \u00f6n y\u00fckleme ve \u00f6n ba\u011flant\u0131 ipu\u00e7lar\u0131 sa\u011flayabiliriz. Bu ipu\u00e7lar\u0131, taray\u0131c\u0131ya belirli kaynaklar\u0131n gelecekte ihtiya\u00e7 duyulaca\u011f\u0131n\u0131 veya belirli bir domaine erken ba\u011flan\u0131lmas\u0131 gerekti\u011fini bildirir.<\/p>\n
\n<\/code>:<\/strong> Bu etiket, taray\u0131c\u0131ya belirli bir kayna\u011f\u0131n (font, kritik CSS, JavaScript) \u015fu anki sayfa i\u00e7in y\u00fcksek \u00f6ncelikli olarak ihtiya\u00e7 duyulaca\u011f\u0131n\u0131 ve m\u00fcmk\u00fcn olan en k\u0131sa s\u00fcrede indirilmesi gerekti\u011fini s\u00f6yler. \u00d6rne\u011fin, bir web fontu veya sayfa y\u00fcklemesi i\u00e7in kritik olan bir JavaScript dosyas\u0131 preload edilebilir. Bu, taray\u0131c\u0131n\u0131n DOM veya CSSOM olu\u015fturulana kadar beklemesini engeller.\n\n\n\n\n\n\n        <\/pre>\n<\/code>\n    <\/li>\n
<\/code>:<\/strong> Taray\u0131c\u0131ya, belirtilen bir etki alan\u0131na (domain) m\u00fcmk\u00fcn olan en erken zamanda bir ba\u011flant\u0131 kurmas\u0131n\u0131 s\u00f6yler. Bu, \u00f6zellikle bir CDN'den veya harici bir API'den kaynak \u00e7ekerken DNS \u00e7\u00f6z\u00fcmleme, TCP handshake ve TLS negotiation gibi gecikme s\u00fcrelerini azalt\u0131r.\n\n\n\n\n\n\n        <\/pre>\n<\/code>\n    <\/li>\n
<\/code>:<\/strong> preconnect<\/code>'e benzer, ancak yaln\u0131zca DNS \u00e7\u00f6z\u00fcmlemesini \u00f6nceden yapar. Daha az agresif bir se\u00e7enektir ve preconnect<\/code> desteklemeyen taray\u0131c\u0131lar i\u00e7in bir geri d\u00f6n\u00fc\u015f (fallback) olarak kullan\u0131labilir. Genellikle kritik olmayan, ancak yine de erken \u00e7\u00f6z\u00fcmlenmesi faydal\u0131 olabilecek etki alanlar\u0131 i\u00e7in kullan\u0131l\u0131r.\n\n\n\n        <\/pre>\n<\/code>\n    <\/li>\n<\/ul>\n
Veri S\u0131k\u0131\u015ft\u0131rma (Gzip, Brotli) ile Bant Geni\u015fli\u011fini Etkili Kullanmak<\/h3>\nHTTP s\u0131k\u0131\u015ft\u0131rma, sunucunun web varl\u0131klar\u0131n\u0131 (HTML, CSS, JavaScript) taray\u0131c\u0131ya g\u00f6ndermeden \u00f6nce s\u0131k\u0131\u015ft\u0131rmas\u0131n\u0131, taray\u0131c\u0131n\u0131n da bu dosyalar\u0131 indirip a\u00e7mas\u0131n\u0131 ifade eder. Bu, transfer edilen veri miktar\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r, bu da daha h\u0131zl\u0131 indirme s\u00fcreleri ve daha az istek s\u00fcresi anlam\u0131na gelir.<\/p>\n
\nGzip:<\/strong> Uzun y\u0131llard\u0131r kullan\u0131lan standart bir s\u0131k\u0131\u015ft\u0131rma algoritmas\u0131d\u0131r ve modern taray\u0131c\u0131lar\u0131n tamam\u0131 taraf\u0131ndan desteklenir. \u00c7o\u011fu web sunucusu (Nginx, Apache) ve CDN, Gzip s\u0131k\u0131\u015ft\u0131rmas\u0131n\u0131 otomatik olarak yap\u0131land\u0131racak \u015fekilde ayarlanabilir.<\/li>\n
Brotli:<\/strong> Google taraf\u0131ndan geli\u015ftirilen daha yeni bir s\u0131k\u0131\u015ft\u0131rma algoritmas\u0131d\u0131r ve Gzip'e g\u00f6re genellikle %15-25 daha iyi s\u0131k\u0131\u015ft\u0131rma oranlar\u0131 sunar. \u00d6zellikle metin tabanl\u0131 varl\u0131klar i\u00e7in daha etkilidir. Modern taray\u0131c\u0131lar ve CDN'ler Brotli'yi giderek daha fazla desteklemektedir. Astro sitenizi bir CDN (Cloudflare, Vercel) \u00fczerinden yay\u0131nl\u0131yorsan\u0131z, Brotli s\u0131k\u0131\u015ft\u0131rmas\u0131 genellikle otomatik olarak devreye girer.<\/li>\n<\/ul>\nBu ileri d\u00fczey optimizasyon teknikleri, Astro sitenizin sadece h\u0131zl\u0131 y\u00fcklenmesini de\u011fil, ayn\u0131 zamanda her bir a\u011f iste\u011finin en verimli \u015fekilde i\u015flenmesini sa\u011flayarak, kullan\u0131c\u0131lar\u0131n\u0131za ak\u0131c\u0131 ve kesintisiz bir deneyim sunar.<\/p>\n
Astro Bile\u015fenlerinde Ak\u0131ll\u0131 Y\u00fckleme ve Kod B\u00f6l\u00fcmleme Nas\u0131l Yap\u0131l\u0131r?<\/h2>\nAstro'nun \"Ada Mimarisi\" (Astro Islands), sitenizdeki istek say\u0131s\u0131n\u0131 \u00f6zellikle JavaScript s\u00f6z konusu oldu\u011funda devrim niteli\u011finde azaltman\u0131n anahtar\u0131d\u0131r. Bu mimari, varsay\u0131lan olarak s\u0131f\u0131r JavaScript g\u00f6nderme felsefesiyle \u00e7al\u0131\u015f\u0131r ve sadece ger\u00e7ekten etkile\u015fimli olmas\u0131 gereken bile\u015fenlerin (bu k\u00fc\u00e7\u00fck \"adalar\u0131n\") istemci taraf\u0131nda hidrate edilmesini sa\u011flar. Bu yakla\u015f\u0131m, gereksiz JavaScript y\u00fcklemesini \u00f6nleyerek sayfa a\u011f\u0131rl\u0131\u011f\u0131n\u0131 ve dolay\u0131s\u0131yla ilgili istek say\u0131s\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.<\/p>\n
Astro Islands'\u0131n Derinlemesine \u0130ncelenmesi ve \u0130stek Say\u0131s\u0131na Etkisi<\/h3>\nAstro'da, bir bile\u015fen yaln\u0131zca HTML olarak render edilir ve taray\u0131c\u0131ya g\u00f6nderilir. Bu, bile\u015fenin JavaScript'inin istemci taraf\u0131nda y\u00fcklenmedi\u011fi veya \u00e7al\u0131\u015fmad\u0131\u011f\u0131 anlam\u0131na gelir. Bir bile\u015feni etkile\u015fimli hale getirmek istedi\u011finizde (\u00f6rne\u011fin, bir saya\u00e7, bir karusel veya bir form do\u011frulama), Astro'nun client:<\/code> direktiflerini kullan\u0131rs\u0131n\u0131z. Bu direktifler, Astro'ya bir bile\u015fenin JavaScript'ini ne zaman ve nas\u0131l y\u00fcklemesi gerekti\u011fini bildirir:<\/p>\n
\nclient:load<\/code><\/strong>: Bile\u015fenin JavaScript'ini sayfa y\u00fcklenir y\u00fcklenmez, m\u00fcmk\u00fcn olan en erken zamanda y\u00fckler ve hidrate eder. Sayfan\u0131n en kritik etkile\u015fimli bile\u015fenleri i\u00e7in kullan\u0131l\u0131r. Bu, bir miktar erken istek olu\u015fturabilir, ancak kritik oldu\u011fu i\u00e7in kabul edilebilir.<\/li>\n
client:idle<\/code><\/strong>: Bile\u015fenin JavaScript'ini taray\u0131c\u0131 ana i\u015f par\u00e7ac\u0131\u011f\u0131 bo\u015fta kald\u0131\u011f\u0131nda (yani sayfa y\u00fcklendikten ve ana g\u00f6revler tamamland\u0131ktan sonra) y\u00fckler ve hidrate eder. Kritik olmayan, ancak yine de erken ihtiya\u00e7 duyulabilecek etkile\u015fimler i\u00e7in idealdir.<\/li>\n
client:visible<\/code><\/strong>: Bile\u015fenin JavaScript'ini yaln\u0131zca bile\u015fen taray\u0131c\u0131n\u0131n g\u00f6r\u00fcn\u00fcm alan\u0131na girdi\u011finde y\u00fckler ve hidrate eder. Bu, \u00f6zellikle sayfan\u0131n alt k\u0131s\u0131mlar\u0131nda yer alan veya scroll edildik\u00e7e g\u00f6r\u00fcn\u00fcr hale gelen bile\u015fenler i\u00e7in \u00e7ok etkilidir. \u00d6rne\u011fin, bir yorum b\u00f6l\u00fcm\u00fc veya bir harita bile\u015feni i\u00e7in harikad\u0131r. Bu direktif, ba\u015flang\u0131\u00e7taki istek say\u0131s\u0131n\u0131 ve JavaScript y\u00fck\u00fcn\u00fc \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.<\/li>\n
client:media={query}<\/code><\/strong>: Belirli bir medya sorgusu e\u015fle\u015fti\u011finde bile\u015feni y\u00fckler ve hidrate eder. \u00d6rne\u011fin, yaln\u0131zca mobil cihazlarda g\u00f6r\u00fcnen bir men\u00fc bile\u015fenini yaln\u0131zca mobil ekran boyutlar\u0131nda y\u00fckleyebilirsiniz.\n\n\n\n        <\/pre>\n<\/code>\n    <\/li>\n<\/ul>\n
Bu direktifler, Astro'nun JavaScript kod b\u00f6lme (code splitting) \u00f6zelli\u011fini de tetikler. Her client:<\/code> direktifiyle i\u015faretlenmi\u015f bile\u015fen, kendi JavaScript paketine (bundle) b\u00f6l\u00fcn\u00fcr. Bu, taray\u0131c\u0131n\u0131n yaln\u0131zca o anda ihtiya\u00e7 duydu\u011fu k\u00fc\u00e7\u00fck JavaScript par\u00e7alar\u0131n\u0131 indirmesini sa\u011flar ve t\u00fcm uygulaman\u0131n JavaScript'ini tek bir b\u00fcy\u00fck dosya olarak indirme gereklili\u011fini ortadan kald\u0131r\u0131r. Dolay\u0131s\u0131yla, kullan\u0131c\u0131 sadece etkile\u015fimde bulunaca\u011f\u0131 bile\u015fenin JS iste\u011fini yapar.<\/p>\n
Dinamik \u0130\u00e7e Aktarma (import()<\/code>) ve Kullan\u0131lmayan JavaScript'i Erteleme<\/h3>\nAstro Islands mimarisi d\u0131\u015f\u0131nda, JavaScript'te dinamik i\u00e7e aktarma (import()<\/code>) \u00f6zelli\u011fini kullanarak da kod b\u00f6lme ve erteleme yapabilirsiniz. Bu teknik, belirli bir JavaScript mod\u00fcl\u00fcn\u00fc yaln\u0131zca ihtiya\u00e7 duyuldu\u011funda (\u00f6rne\u011fin, bir d\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda veya bir kullan\u0131c\u0131 belirli bir etkile\u015fimi tetikledi\u011finde) y\u00fcklemenizi sa\u011flar. Bu, \u00f6zellikle b\u00fcy\u00fck k\u00fct\u00fcphaneler veya az kullan\u0131lan \u00f6zellikler i\u00e7in faydal\u0131d\u0131r.<\/p>\n
\n\n<\/div>\n\n