\n---\nimport HamburgerMenu from '..\/components\/HamburgerMenu.jsx';\n---\n\n\n \n Ana Sayfa<\/a>\n \n <\/nav>\n<\/header>\n\n\n Astro Blog Ho\u015f Geldiniz<\/h1>\n Bu makale Astro client directives hakk\u0131nda...<\/p>\n<\/main>\n <\/pre>\n <\/code><\/p>\n Bu \u00f6rnekte, HamburgerMenu<\/code> bile\u015feni sayfayla birlikte hemen y\u00fcklenir ve etkile\u015fimli hale gelir. B\u00f6ylece kullan\u0131c\u0131lar, sayfan\u0131n di\u011fer statik i\u00e7eri\u011finin y\u00fcklenmesini beklemeden men\u00fcy\u00fc kullanabilirler.<\/p>\n Vaka Analizi: E-ticaret Sitesi Ba\u015fl\u0131\u011f\u0131<\/h3>\nB\u00fcy\u00fck bir e-ticaret sitesinin \u00fcst k\u0131sm\u0131nda yer alan bir ba\u015fl\u0131k (header) bile\u015feni d\u00fc\u015f\u00fcn\u00fcn. Bu ba\u015fl\u0131kta bir arama \u00e7ubu\u011fu, kullan\u0131c\u0131 sepeti simgesi ve bir kullan\u0131c\u0131 profili men\u00fcs\u00fc gibi bir\u00e7ok etkile\u015fimli \u00f6\u011fe bulunur. Bu \u00f6\u011felerin tamam\u0131n\u0131n sayfa y\u00fcklenir y\u00fcklenmez aktif olmas\u0131, al\u0131\u015fveri\u015f deneyimini kritik derecede etkiler. E\u011fer arama \u00e7ubu\u011fu ge\u00e7 y\u00fcklenirse, kullan\u0131c\u0131 hemen arama yapamaz ve bu da bir hayal k\u0131r\u0131kl\u0131\u011f\u0131na neden olabilir. Bu senaryoda, ba\u015fl\u0131k bile\u015feninin ana konteynerine veya do\u011frudan i\u00e7indeki kritik bile\u015fenlere client:load<\/code> uygulamak, kullan\u0131c\u0131lar\u0131n siteyle an\u0131nda etkile\u015fime ge\u00e7mesini sa\u011flar. Bu, \u00f6zellikle mobil cihazlarda, ilk etkile\u015fime ge\u00e7me s\u00fcresini optimize etmek i\u00e7in \u00e7ok \u00f6nemlidir.<\/p>\n Unutmamak gerekir ki, client:load<\/code> kullanmak, performans maliyeti en y\u00fcksek olan y\u00f6nergedir, \u00e7\u00fcnk\u00fc JavaScript'i olabildi\u011fince erken y\u00fckler. Bu nedenle, ger\u00e7ekten kritik olmayan bile\u015fenler i\u00e7in di\u011fer y\u00f6nergeleri tercih etmek, genel site performans\u0131n\u0131 iyile\u015ftirmek ad\u0131na daha ak\u0131ll\u0131ca olacakt\u0131r. Sadece ger\u00e7ekten gerekli olan yerlerde kullanmak, Astro'nun \"s\u0131f\u0131r JavaScript\" felsefesine uygun hareket etmenizi sa\u011flar.<\/p>\n Client:idle: Bo\u015f Zamanlarda Etkile\u015fim Nas\u0131l Eklenir?<\/h2>\nclient:idle<\/code> y\u00f6nergesi, client:load<\/code>'a g\u00f6re daha nazik bir yakla\u015f\u0131ma sahiptir. Bu y\u00f6nergeye sahip bir bile\u015fen, sayfa y\u00fcklendikten ve taray\u0131c\u0131 ilk ana i\u015f par\u00e7ac\u0131\u011f\u0131 (main thread) bo\u015f kald\u0131\u011f\u0131nda hidrate edilir. Yani, taray\u0131c\u0131 t\u00fcm kritik kaynaklar\u0131 y\u00fcklemeyi bitirip \"nefes ald\u0131\u011f\u0131nda\" JavaScript kodu \u00e7al\u0131\u015ft\u0131r\u0131lmaya ba\u015flar. Bu, genellikle sayfadaki di\u011fer \u00f6nemli kaynaklar\u0131n (resimler, CSS) y\u00fcklenmesinin tamamlanmas\u0131ndan hemen sonra ger\u00e7ekle\u015fir ve sayfan\u0131n ilk anlaml\u0131 i\u00e7eri\u011fi g\u00f6r\u00fcnt\u00fclendikten sonra devreye girer.<\/p>\n Ne Zaman Kullan\u0131lmal\u0131?<\/h3>\nclient:idle<\/code>, kullan\u0131c\u0131 deneyimi i\u00e7in \u00f6nemli olan ancak an\u0131nda etkile\u015fim gerektirmeyen bile\u015fenler i\u00e7in m\u00fckemmeldir. Bu y\u00f6nerge, kullan\u0131c\u0131lar\u0131n ilk anda odaklanaca\u011f\u0131 i\u00e7erik d\u0131\u015f\u0131ndaki, daha ikincil etkile\u015fimler i\u00e7in idealdir:<\/p>\n \nSosyal Medya Payla\u015f\u0131m Butonlar\u0131:<\/strong> Bir blog yaz\u0131s\u0131n\u0131n sonunda yer alan payla\u015f\u0131m butonlar\u0131. Kullan\u0131c\u0131 yaz\u0131y\u0131 okumay\u0131 bitirene kadar bunlar\u0131n etkile\u015fimli olmas\u0131na gerek yoktur.<\/li>\n Cookie Onay \u00c7ubuklar\u0131:<\/strong> Genellikle sayfan\u0131n alt k\u0131sm\u0131nda g\u00f6r\u00fcnen, hemen etkile\u015fime ge\u00e7ilmesi gerekmeyen uyar\u0131lar.<\/li>\n K\u00fc\u00e7\u00fck Widget'lar:<\/strong> Hava durumu widget'\u0131 veya d\u00f6viz kuru g\u00f6stergesi gibi, ana i\u00e7eri\u011fin okunmas\u0131n\u0131 engellemeyecek, ancak bir s\u00fcre sonra g\u00fcncellenebilecek veya t\u0131klanabilecek bile\u015fenler.<\/li>\n Yorum Formlar\u0131:<\/strong> Bir makalenin alt\u0131ndaki yorum formu. Kullan\u0131c\u0131 makaleyi okumay\u0131 bitirip a\u015fa\u011f\u0131 kayd\u0131rd\u0131\u011f\u0131nda haz\u0131r olmas\u0131 yeterlidir.<\/li>\n<\/ul>\nKod \u00d6rne\u011fi: Bir Blog Yaz\u0131s\u0131 Yorum B\u00f6l\u00fcm\u00fc<\/h3>\nBir blog yaz\u0131s\u0131n\u0131n sonunda, bir React bile\u015feni olarak yaz\u0131lm\u0131\u015f CommentSection<\/code> oldu\u011funu d\u00fc\u015f\u00fcnelim:<\/p>\n \n---\nimport CommentSection from '..\/components\/CommentSection.jsx';\n---\n\n\n Astro Client Directives Rehberi<\/h1>\n Makale i\u00e7eri\u011fi burada...<\/p>\n<\/main>\n\n \n \n<\/footer>\n <\/pre>\n<\/code><\/p>\n Bu kurulumda, CommentSection<\/code> bile\u015feni, sayfa tamamen y\u00fcklendikten ve taray\u0131c\u0131 bo\u015fta kald\u0131ktan sonra hidrate edilir. Kullan\u0131c\u0131 makaleyi okurken performans etkilenmez ve yorum b\u00f6l\u00fcm\u00fc ancak kullan\u0131c\u0131 i\u00e7eri\u011fi t\u00fcketmeyi bitirdi\u011finde veya taray\u0131c\u0131n\u0131n kaynaklar\u0131 m\u00fcsait oldu\u011funda haz\u0131r olur.<\/p>\n Vaka Analizi: Makale Sayfas\u0131ndaki \u0130lgili Yaz\u0131lar Bile\u015feni<\/h3>\nBir haber veya blog sitesinde, her makalenin alt\u0131nda \"\u0130lgili Yaz\u0131lar\" veya \"En \u00c7ok Okunanlar\" gibi dinamik olarak y\u00fcklenen bir b\u00f6l\u00fcm bulunur. Bu b\u00f6l\u00fcm, genellikle bir API'den veri \u00e7eker ve etkile\u015fimli bir carousel veya basit bir liste \u015feklinde sunulur. Bu b\u00f6l\u00fcm\u00fcn hemen y\u00fcklenmesi, kullan\u0131c\u0131n\u0131n ana makale i\u00e7eri\u011fini okuma deneyimini kesintiye u\u011fratabilir. Bu nedenle, bu t\u00fcr bir RelatedArticles<\/code> bile\u015feni i\u00e7in client:idle<\/code> kullanmak ak\u0131ll\u0131ca bir stratejidir. Kullan\u0131c\u0131 makaleyi okumay\u0131 bitirip sayfan\u0131n alt\u0131na indi\u011finde veya taray\u0131c\u0131 bo\u015fta kald\u0131\u011f\u0131nda bu bile\u015fen hidrate edilir. Bu, hem ana i\u00e7eri\u011fin h\u0131zl\u0131 y\u00fcklenmesini sa\u011flar hem de kullan\u0131c\u0131n\u0131n ilgisini \u00e7ekebilecek ek i\u00e7eri\u011fi sunar, ancak bunu performans maliyetiyle yapmaz.<\/p>\n client:idle<\/code>, client:load<\/code>'a g\u00f6re daha iyi bir performans dengesi sunar. Ancak yine de, bile\u015feninizin JavaScript'inin bir noktada y\u00fcklenip \u00e7al\u0131\u015ft\u0131r\u0131laca\u011f\u0131 anlam\u0131na gelir. Bu nedenle, bile\u015feninizin ger\u00e7ekten etkile\u015fime ihtiya\u00e7 duyup duymad\u0131\u011f\u0131n\u0131 ve bu etkile\u015fimin ne kadar acil oldu\u011funu dikkatlice de\u011ferlendirmek \u00f6nemlidir. M\u00fcmk\u00fcn oldu\u011funca az JavaScript y\u00fcklemek, Astro'nun temel felsefesidir.<\/p>\n Client:visible: G\u00f6r\u00fcn\u00fcr Oldu\u011funda Y\u00fckleme Stratejileri Nelerdir?<\/h2>\nclient:visible<\/code> y\u00f6nergesi, bir bile\u015feni yaln\u0131zca kullan\u0131c\u0131 taray\u0131c\u0131da o bile\u015fenin oldu\u011fu konuma geldi\u011finde (yani viewport'a girdi\u011finde) hidrate eder. Bu, Lazy Loading (tembel y\u00fckleme) prensibinin etkile\u015fimli bile\u015fenler i\u00e7in Astro'daki kar\u015f\u0131l\u0131\u011f\u0131d\u0131r ve performans optimizasyonu i\u00e7in son derece g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bile\u015fenin JavaScript'i, ancak kullan\u0131c\u0131n\u0131n onu g\u00f6rmesi muhtemel oldu\u011funda y\u00fcklenir ve \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r.<\/p>\n Ne Zaman Kullan\u0131lmal\u0131?<\/h3>\nclient:visible<\/code>, sayfan\u0131n \"fold\" (ilk ekran) alt\u0131nda kalan ve hemen g\u00f6r\u00fcnmesi gerekmeyen, ancak g\u00f6r\u00fcnd\u00fc\u011f\u00fcnde etkile\u015fimli olmas\u0131 beklenen her t\u00fcrl\u00fc bile\u015fen i\u00e7in idealdir:<\/p>\n \nG\u00f6rsel Galeriler ve Carousel'ler:<\/strong> Sayfan\u0131n ortas\u0131nda veya alt k\u0131sm\u0131nda yer alan, kullan\u0131c\u0131 a\u015fa\u011f\u0131 kayd\u0131rd\u0131\u011f\u0131nda g\u00f6r\u00fcnen resim veya video galerileri.<\/li>\n \"Daha Fazla Y\u00fckle\" Butonlar\u0131:<\/strong> Bir liste veya feed'in sonunda bulunan, t\u0131klan\u0131nca daha fazla i\u00e7erik getiren butonlar.<\/li>\n Haritalar ve Grafikler:<\/strong> Google Maps widget'lar\u0131 veya interaktif veri grafikleri gibi yo\u011fun kaynak t\u00fcketen bile\u015fenler. Bu t\u00fcr bile\u015fenlerin sadece kullan\u0131c\u0131 bunlar\u0131 g\u00f6rmek istedi\u011finde y\u00fcklenmesi performans\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/li>\n Reklam Birimleri:<\/strong> \u00c7o\u011fu zaman sayfan\u0131n alt k\u0131sm\u0131nda veya i\u00e7eri\u011fin aras\u0131nda yer alan, belirli bir konumda g\u00f6r\u00fcn\u00fcr hale geldiklerinde aktifle\u015fen reklamlar.<\/li>\n<\/ul>\nKod \u00d6rne\u011fi: \u00dcr\u00fcn Sayfas\u0131ndaki Yorumlar ve Derecelendirmeler<\/h3>\nBir \u00fcr\u00fcn sayfas\u0131nda, \u00fcr\u00fcn\u00fcn detaylar\u0131 ve g\u00f6rselleri \u00fcstte yer al\u0131rken, yorumlar ve derecelendirmeler b\u00f6l\u00fcm\u00fc sayfan\u0131n daha alt k\u0131sm\u0131nda bulunur. Kullan\u0131c\u0131lar\u0131n \u00e7o\u011fu \u00f6nce \u00fcr\u00fcn bilgilerini inceleyece\u011finden, yorum b\u00f6l\u00fcm\u00fcn\u00fcn hemen y\u00fcklenmesi gereksiz olabilir:<\/p>\n \n---\nimport ProductReviews from '..\/components\/ProductReviews.jsx';\n---\n\n\n \u00dcr\u00fcn Ad\u0131<\/h1>\n \n \u00dcr\u00fcn a\u00e7\u0131klamas\u0131...<\/p>\n\n \n \u00d6zellikler<\/h2>\n \n \u00d6zellik 1<\/li>\n \u00d6zellik 2<\/li>\n <\/ul>\n <\/div>\n\n \n<\/main>\n <\/pre>\n<\/code><\/p>\n Bu senaryoda, ProductReviews<\/code> bile\u015feni, kullan\u0131c\u0131 sayfay\u0131 a\u015fa\u011f\u0131 kayd\u0131r\u0131p yorumlar b\u00f6l\u00fcm\u00fc g\u00f6r\u00fcn\u00fcr hale geldi\u011finde hidrate edilir. Bu, ilk y\u00fckleme performans\u0131n\u0131 iyile\u015ftirir ve kullan\u0131c\u0131 yorumlara ilgi duydu\u011funda sorunsuz bir etkile\u015fim sa\u011flar.<\/p>\n Vaka Analizi: Haber Sitesindeki Video Oynat\u0131c\u0131<\/h3>\nBir haber sitesinde, makale i\u00e7eri\u011finin ortas\u0131nda veya sonunda bir video oynat\u0131c\u0131 bile\u015feni (\u00f6rne\u011fin YouTube embed veya \u00f6zel bir video player) bulunabilir. Video oynat\u0131c\u0131lar genellikle kendi JavaScript paketleriyle birlikte gelir ve \u00f6nemli miktarda kaynak t\u00fcketir. E\u011fer video oynat\u0131c\u0131 sayfan\u0131n alt k\u0131sm\u0131nda yer al\u0131yorsa ve kullan\u0131c\u0131 onu hemen g\u00f6rm\u00fcyorsa, client:visible<\/code> y\u00f6nergesi kullanmak mant\u0131kl\u0131 olacakt\u0131r. Video oynat\u0131c\u0131, ancak kullan\u0131c\u0131 sayfay\u0131 kayd\u0131r\u0131p oynat\u0131c\u0131 g\u00f6r\u00fcn\u00fcr hale geldi\u011finde y\u00fcklenir ve etkile\u015fimli hale gelir. Bu, ilk sayfa y\u00fckleme s\u00fcresini h\u0131zland\u0131r\u0131r ve yaln\u0131zca ilgili i\u00e7eri\u011fe ula\u015fan kullan\u0131c\u0131lar i\u00e7in kaynak harcanmas\u0131n\u0131 sa\u011flar, b\u00f6ylece genel performans puanlar\u0131 artar.<\/p>\n \n Uzman \u0130pucu: client:visible<\/code> y\u00f6nergesi, bir bile\u015fenin ne kadar \u00f6nceden veya ne kadar ge\u00e7 alg\u0131lanaca\u011f\u0131n\u0131 ayarlamak i\u00e7in rootMargin<\/code> ve threshold<\/code> gibi se\u00e7enekler sunan bir Intersection Observer API kullan\u0131r. Astro bunu dahili olarak y\u00f6netse de, bu mekanizmay\u0131 bilmek, \u00f6zel durumlar i\u00e7in stratejinizi geli\u015ftirmenize yard\u0131mc\u0131 olabilir.\n <\/div>\nclient:visible<\/code>, performans\u0131 optimize etme konusunda en \u00e7ok kullan\u0131lan ve en etkili y\u00f6nergelerden biridir. Do\u011fru kullan\u0131ld\u0131\u011f\u0131nda, web sitenizin \u00e7ok daha h\u0131zl\u0131 hissettirmesini sa\u011flayabilir ve gereksiz JavaScript y\u00fcklemelerini ortadan kald\u0131rarak kaynak t\u00fcketimini azalt\u0131r.<\/p>\n Client:media: Duyarl\u0131 Bile\u015fenlerin Y\u00fcklenmesinde Medya Sorgular\u0131 Nas\u0131l Kullan\u0131l\u0131r?<\/h2>\nclient:media<\/code> y\u00f6nergesi, belirtilen bir CSS medya sorgusu ko\u015fulu kar\u015f\u0131land\u0131\u011f\u0131nda bir bile\u015feni hidrate eder. Bu, \u00f6zellikle farkl\u0131 ekran boyutlar\u0131 veya cihaz \u00f6zellikleri i\u00e7in farkl\u0131 etkile\u015fimli davran\u0131\u015flar veya bile\u015fenler sunman\u0131z gerekti\u011finde inan\u0131lmaz derecede kullan\u0131\u015fl\u0131d\u0131r. \u00d6rne\u011fin, mobil cihazlarda farkl\u0131 bir men\u00fc bile\u015feni, masa\u00fcst\u00fcnde farkl\u0131 bir bile\u015fen y\u00fcklemek isteyebilirsiniz.<\/p>\n Ne Zaman Kullan\u0131lmal\u0131?<\/h3>\nclient:media<\/code>, duyarl\u0131 tasar\u0131m yakla\u015f\u0131mlar\u0131n\u0131z\u0131 etkile\u015fimli bile\u015fenlerin y\u00fcklenmesiyle birle\u015ftirmek istedi\u011finizde tercih edilmelidir:<\/p>\n \nMobil ve Masa\u00fcst\u00fc Men\u00fcleri:<\/strong> K\u00fc\u00e7\u00fck ekranlarda a\u00e7\u0131lan bir hamburger men\u00fc (max-width: 768px<\/code>) ve b\u00fcy\u00fck ekranlarda sabit bir navigasyon \u00e7ubu\u011fu (min-width: 769px<\/code>) gibi.<\/li>\n Cihaza \u00d6zel Bile\u015fenler:<\/strong> Dokunmatik ekranl\u0131 cihazlarda farkl\u0131 kayd\u0131rma mekanizmalar\u0131na sahip bir galeri bile\u015feni, dokunmatik olmayan cihazlarda ise fare odakl\u0131 bir galeri.<\/li>\n Farkl\u0131 Ekran Boyutlar\u0131 \u0130\u00e7in Widget'lar:<\/strong> Belirli bir ekran boyutunun alt\u0131nda veya \u00fcst\u00fcnde devreye girmesi gereken etkile\u015fimli haritalar veya grafikler.<\/li>\n<\/ul>\nKod \u00d6rne\u011fi: Mobil ve Masa\u00fcst\u00fc Navigasyonu<\/h3>\nBir web sitesinde, mobil cihazlar i\u00e7in bir MobileNav<\/code> (hamburger men\u00fc) ve masa\u00fcst\u00fc cihazlar i\u00e7in bir DesktopNav<\/code> oldu\u011funu varsayal\u0131m:<\/p>\n \n---\nimport MobileNav from '..\/components\/MobileNav.jsx';\nimport DesktopNav from '..\/components\/DesktopNav.jsx';\n---\n\n\n \n \n <\/div>\n \n \n <\/div>\n<\/header>\n\n\n Ho\u015f Geldiniz<\/h1>\n Bu i\u00e7erik t\u00fcm cihazlarda ayn\u0131d\u0131r.<\/p>\n<\/main>\n\n