{"id":31422,"date":"2025-10-09T20:31:29","date_gmt":"2025-10-09T17:31:29","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/astro-ile-buyuk-veri-sayfalama-kapsamli-rehber\/"},"modified":"2025-10-09T20:31:29","modified_gmt":"2025-10-09T17:31:29","slug":"astro-ile-buyuk-veri-sayfalama-kapsamli-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/astro-ile-buyuk-veri-sayfalama-kapsamli-rehber\/","title":{"rendered":"Astro ile B\u00fcy\u00fck Veri Sayfalama: Kapsaml\u0131 Rehber"},"content":{"rendered":"<p><body><\/p>\n<p>Web sitenizdeki b\u00fcy\u00fck veri setlerini y\u00f6netmek ve kullan\u0131c\u0131lar\u0131n\u0131za ak\u0131c\u0131 bir deneyim sunmak karma\u015f\u0131k g\u00f6r\u00fcnebilir. Bu rehber, Astro kullanarak milyonlarca \u00f6\u011feyi i\u00e7eren sayfalar\u0131n\u0131z\u0131 nas\u0131l optimize edece\u011finizi ve web performans\u0131n\u0131 en \u00fcst d\u00fczeye \u00e7\u0131karaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131kl\u0131yor.<\/p>\n<p>G\u00fcn\u00fcm\u00fcz\u00fcn dijital d\u00fcnyas\u0131nda, kullan\u0131c\u0131lar h\u0131z ve verimlilik bekliyor. Bir e-ticaret sitesindeki binlerce \u00fcr\u00fcn, bir blogdaki y\u00fczlerce makale veya bir veri g\u00f6rselle\u015ftirme uygulamas\u0131ndaki devasa veri setleri, web sitelerinin performans\u0131n\u0131 ciddi \u015fekilde etkileyebilir. T\u00fcm bu veriyi tek bir sayfada y\u00fcklemeye \u00e7al\u0131\u015fmak, sayfa y\u00fckleme s\u00fcrelerinin a\u015f\u0131r\u0131 uzamas\u0131na, taray\u0131c\u0131n\u0131n donmas\u0131na ve nihayetinde kullan\u0131c\u0131 deneyiminin felaketle sonu\u00e7lanmas\u0131na neden olur. Bu durum, hem ziyaret\u00e7ilerin sitenizden ayr\u0131lmas\u0131na yol a\u00e7ar hem de arama motoru s\u0131ralamalar\u0131n\u0131z\u0131 olumsuz etkiler. Arama motorlar\u0131, \u00f6zellikle Google, sayfa h\u0131z\u0131n\u0131 ve kullan\u0131c\u0131 deneyimini s\u0131ralama fakt\u00f6rleri aras\u0131nda \u00f6nemli bir yere koyar. Yava\u015f y\u00fcklenen bir sayfa, d\u00fc\u015f\u00fck d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131, y\u00fcksek hemen \u00e7\u0131kma oranlar\u0131 ve k\u00f6t\u00fc bir marka alg\u0131s\u0131 demektir.<\/p>\n<p>\u0130\u015fte bu noktada sayfalama (pagination) devreye girer. Sayfalama, b\u00fcy\u00fck veri setlerini daha k\u00fc\u00e7\u00fck, y\u00f6netilebilir par\u00e7alara b\u00f6lerek web sitenizin performans\u0131n\u0131 art\u0131rman\u0131n ve kullan\u0131c\u0131 deneyimini iyile\u015ftirmenin temel yollar\u0131ndan biridir. Kullan\u0131c\u0131lar, ihtiyac\u0131n\u0131 olan bilgiye h\u0131zl\u0131ca ula\u015f\u0131rken, taray\u0131c\u0131 da \u00e7ok daha az veri i\u015flemek zorunda kal\u0131r. Bu durum, \u00f6zellikle mobil cihazlarda, s\u0131n\u0131rl\u0131 bant geni\u015fli\u011fi ve i\u015flem g\u00fcc\u00fc olan kullan\u0131c\u0131lar i\u00e7in hayati \u00f6neme sahiptir. Astro, statik site olu\u015fturucu (SSG) yetenekleriyle, bu t\u00fcr b\u00fcy\u00fck veri sorunlar\u0131na performans odakl\u0131 \u00e7\u00f6z\u00fcmler sunar. Geleneksel dinamik sayfalama y\u00f6ntemlerinin aksine, Astro ile her bir sayfa \u00f6nceden olu\u015fturulabilir ve bu da sunucu taraf\u0131ndaki y\u00fck\u00fc azalt\u0131rken, inan\u0131lmaz derecede h\u0131zl\u0131 y\u00fckleme s\u00fcreleri sa\u011flar. Bu sayede, ziyaret\u00e7ileriniz i\u00e7eri\u011fe an\u0131nda eri\u015febilir ve sitenizdeki etkile\u015fimleri kesintisiz bir \u015fekilde s\u00fcrd\u00fcrebilirler. Peki, Astro bu s\u00fcreci nas\u0131l bu kadar verimli hale getiriyor?<\/p>\n<p>Bu makalede, Astro&#8217;nun g\u00fc\u00e7l\u00fc sayfalama \u00f6zelliklerini kullanarak b\u00fcy\u00fck veri setlerinizi nas\u0131l etkili bir \u015fekilde y\u00f6netece\u011finizi, performans optimizasyonlar\u0131n\u0131 nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 ve kullan\u0131c\u0131lar\u0131n\u0131za kesintisiz bir deneyim sunaca\u011f\u0131n\u0131z\u0131 ayr\u0131nt\u0131l\u0131 bir \u015fekilde inceleyece\u011fiz. Astro&#8217;nun modern web geli\u015ftirme paradigmalar\u0131yla birle\u015fen yetenekleri, b\u00fcy\u00fck veri setlerini y\u00f6netirken kar\u015f\u0131la\u015f\u0131lan zorluklar\u0131n \u00fcstesinden gelmek i\u00e7in e\u015fsiz f\u0131rsatlar sunar.<\/p>\n<h2>Astro ve Sayfalama: Temelleri Anlayal\u0131m m\u0131?<\/h2>\n<p>Astro, modern web siteleri olu\u015fturmak i\u00e7in tasarlanm\u0131\u015f, i\u00e7eri\u011fe \u00f6ncelik veren bir statik site olu\u015fturucudur (SSG). En b\u00fcy\u00fck avantajlar\u0131ndan biri, varsay\u0131lan olarak JavaScript&#8217;i minimum d\u00fczeyde, hatta hi\u00e7 g\u00f6ndermemesidir. Bu, ultra h\u0131zl\u0131 web siteleri olu\u015fturulmas\u0131n\u0131 sa\u011flar. Astro, farkl\u0131 UI k\u00fct\u00fcphaneleri (React, Vue, Svelte vb.) ile entegre olabilme \u00f6zelli\u011fi sayesinde geli\u015ftiricilere esneklik sunar. &#8220;Astro Adalar\u0131&#8221; ad\u0131 verilen benzersiz mimarisi sayesinde, etkile\u015fimli bile\u015fenlerin yaln\u0131zca ihtiya\u00e7 duyuldu\u011funda JavaScript y\u00fcklemesini sa\u011flar, bu da sayfa h\u0131z\u0131n\u0131 maksimuma \u00e7\u0131kar\u0131r.<\/p>\n<p>Peki, sayfalama nedir? Sayfalama, b\u00fcy\u00fck bir veri setini (\u00f6rne\u011fin, 1000 \u00fcr\u00fcn, 500 makale) daha k\u00fc\u00e7\u00fck, y\u00f6netilebilir sayfalara b\u00f6lme i\u015flemidir. Her sayfa genellikle belirli say\u0131da \u00f6\u011fe i\u00e7erir (\u00f6rne\u011fin, sayfa ba\u015f\u0131na 10 \u00fcr\u00fcn). Bu, kullan\u0131c\u0131n\u0131n t\u00fcm veriyi tek seferde indirmesini engeller ve web sitesi performans\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Sayfalama, geleneksel olarak iki ana yakla\u015f\u0131mla uygulan\u0131r: istemci taraf\u0131 (client-side) ve sunucu taraf\u0131 (server-side).<\/p>\n<ul>\n<li><strong>\u0130stemci Taraf\u0131 Sayfalama:<\/strong> T\u00fcm veri taray\u0131c\u0131ya tek seferde g\u00f6nderilir ve JavaScript kullanarak sayfalara ayr\u0131l\u0131r. Bu, ilk y\u00fckleme s\u00fcresini art\u0131rabilir ancak sayfa ge\u00e7i\u015fleri genellikle daha h\u0131zl\u0131d\u0131r. B\u00fcy\u00fck veri setleri i\u00e7in uygun de\u011fildir.<\/li>\n<li><strong>Sunucu Taraf\u0131 Sayfalama:<\/strong> Yaln\u0131zca o anda g\u00f6r\u00fcnt\u00fclenen sayfan\u0131n verisi sunucu taraf\u0131ndan g\u00f6nderilir. Bu, ilk y\u00fckleme s\u00fcresini azalt\u0131r ve b\u00fcy\u00fck veri setleri i\u00e7in idealdir. Astro, bu yakla\u015f\u0131m\u0131 statik olarak uygulayarak performans\u0131 zirveye ta\u015f\u0131r.<\/li>\n<\/ul>\n<p>Astro, <code>getStaticPaths<\/code> fonksiyonu ve <code>paginate<\/code> yard\u0131mc\u0131 fonksiyonu arac\u0131l\u0131\u011f\u0131yla sunucu taraf\u0131 sayfalama konseptini statik site olu\u015fturma s\u00fcrecine entegre eder. Bu sayede, sitenizdeki her bir sayfa (\u00f6rne\u011fin, \u00fcr\u00fcn listesinin 1. sayfas\u0131, 2. sayfas\u0131 vb.) derleme zaman\u0131nda ayr\u0131 ayr\u0131 olu\u015fturulur. Yani, kullan\u0131c\u0131 bir sayfadan di\u011ferine ge\u00e7ti\u011finde, asl\u0131nda \u00f6nceden olu\u015fturulmu\u015f statik bir HTML dosyas\u0131na y\u00f6nlendirilir. Bu durum, her sayfa iste\u011finde sunucu taraf\u0131nda veri taban\u0131 sorgusu veya karma\u015f\u0131k hesaplamalar yapma ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r. Sonu\u00e7 olarak, inan\u0131lmaz derecede h\u0131zl\u0131 sayfa ge\u00e7i\u015fleri ve d\u00fc\u015f\u00fck sunucu y\u00fck\u00fc elde edilir. \u00d6zellikle SEO a\u00e7\u0131s\u0131ndan da bu durum avantajl\u0131d\u0131r; arama motoru botlar\u0131 her bir sayfay\u0131 ba\u011f\u0131ms\u0131z olarak tarayabilir ve indeksleyebilir.<\/p>\n<p>Astro&#8217;nun bu yakla\u015f\u0131m\u0131, \u00f6zellikle i\u00e7erik a\u011f\u0131rl\u0131kl\u0131 siteler, e-ticaret platformlar\u0131 veya bloglar i\u00e7in b\u00fcy\u00fck veri y\u00f6netimi konusunda e\u015fsiz bir \u00e7\u00f6z\u00fcm sunar. D\u00fc\u015f\u00fcn\u00fcn ki, binlerce \u00fcr\u00fcn\u00fcn\u00fcz var ve her \u00fcr\u00fcn\u00fcn kendi sayfas\u0131 ve listeleme sayfas\u0131 olmas\u0131 gerekiyor. Astro ile bu listeleme sayfalar\u0131n\u0131n her birini kolayca, performans endi\u015fesi ya\u015famadan olu\u015fturabilirsiniz. Bu sayede hem geli\u015ftirici deneyimi kolayla\u015f\u0131r hem de son kullan\u0131c\u0131lar i\u00e7in ak\u0131c\u0131 bir gezinme sa\u011flan\u0131r. Astro&#8217;nun sayfalama yetenekleri, web sitenizin gelece\u011fe y\u00f6nelik performans gereksinimlerini kar\u015f\u0131lamak i\u00e7in g\u00fc\u00e7l\u00fc bir temel olu\u015fturur.<\/p>\n<h2>Astro&#8217;da Statik Sayfa Olu\u015fturma ve Sayfalama Ad\u0131mlar\u0131<\/h2>\n<p>Astro&#8217;nun en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri, <code>getStaticPaths<\/code> fonksiyonu ve <code>paginate<\/code> yard\u0131mc\u0131 fonksiyonu arac\u0131l\u0131\u011f\u0131yla dinamik rotalar\u0131 statik olarak olu\u015fturabilmesidir. Bu, b\u00fcy\u00fck veri setlerini sayfalara ay\u0131rmak ve her bir sayfay\u0131 derleme zaman\u0131nda ayr\u0131 bir HTML dosyas\u0131 olarak \u00fcretmek i\u00e7in m\u00fckemmel bir y\u00f6ntemdir. \u0130\u015fte ad\u0131m ad\u0131m Astro&#8217;da statik sayfalama nas\u0131l yap\u0131l\u0131r:<\/p>\n<h3>1. Veri Kayna\u011f\u0131n\u0131 Haz\u0131rlama<\/h3>\n<p>\u00d6ncelikle, sayfalara ay\u0131rmak istedi\u011finiz veri setine ihtiyac\u0131n\u0131z var. Bu, bir API&#8217;den \u00e7ekilen veriler, yerel bir JSON dosyas\u0131 veya Markdown dosyalar\u0131 olabilir. \u00d6rnek olarak, yerel bir veri dosyas\u0131n\u0131 kullanal\u0131m:<\/p>\n<pre><code class=\"language-js\">\n\/\/ src\/data\/urunler.js\nexport const urunler = [\n  { id: 1, ad: \"Ak\u0131ll\u0131 Telefon X\", fiyat: 12000, kategori: \"Elektronik\" },\n  { id: 2, ad: \"Laptop Pro\", fiyat: 25000, kategori: \"Elektronik\" },\n  \/\/ ... 1000'lerce \u00fcr\u00fcn devam ediyor\n  { id: 1000, ad: \"Ak\u0131ll\u0131 Saat Ultra\", fiyat: 5000, kategori: \"Elektronik\" },\n  \/\/ ... di\u011fer kategorilerden \u00fcr\u00fcnler\n  { id: 2500, ad: \"Bluetooth Kulakl\u0131k\", fiyat: 800, kategori: \"Aksesuar\" }\n];\n    <\/pre>\n<p><\/code><\/p>\n<h3>2. Dinamik Rota Olu\u015fturma ve getStaticPaths Kullan\u0131m\u0131<\/h3>\n<p>Astro'da dinamik sayfalar olu\u015fturmak i\u00e7in dosya adlar\u0131n\u0131 k\u00f6\u015feli parantez i\u00e7inde tan\u0131mlar\u0131z. Sayfalama i\u00e7in genellikle <code>src\/pages\/[...page].astro<\/code> veya <code>src\/pages\/blog\/[...page].astro<\/code> gibi bir yap\u0131 kullan\u0131l\u0131r. Bu, Astro'ya bu rota kal\u0131b\u0131n\u0131n birden fazla sayfa \u00fcretebilece\u011fini belirtir.<\/p>\n<p>\u015eimdi <code>src\/pages\/urunler\/[...page].astro<\/code> dosyas\u0131n\u0131 olu\u015ftural\u0131m ve <code>getStaticPaths<\/code> fonksiyonunu kullanarak \u00fcr\u00fcnlerimizi sayfalara ay\u0131ral\u0131m:<\/p>\n<pre><code class=\"language-astro\">\n---\nimport { paginate } from 'astro';\nimport { urunler } from '..\/..\/data\/urunler';\nimport UrunKart from '..\/..\/components\/UrunKart.astro';\nimport SayfalamaNavigasyon from '..\/..\/components\/SayfalamaNavigasyon.astro';\n\n\/\/ Her sayfada g\u00f6sterilecek \u00fcr\u00fcn say\u0131s\u0131\nconst ITEMS_PER_PAGE = 25;\n\nexport async function getStaticPaths({ paginate }) {\n  \/\/ urunler listesini paginate fonksiyonuna veriyoruz\n  \/\/ Bu fonksiyon, veriyi sayfalara b\u00f6ler ve her sayfa i\u00e7in gerekli bilgileri (page, totalPages, currentPage, etc.) olu\u015fturur.\n  const paginatedPages = paginate(urunler, { pageSize: ITEMS_PER_PAGE });\n\n  \/\/ paginate fonksiyonu, her bir sayfa i\u00e7in \"params\" ve \"props\" i\u00e7eren bir dizi d\u00f6nd\u00fcr\u00fcr.\n  \/\/ params: dinamik rota par\u00e7ac\u0131\u011f\u0131n\u0131 olu\u015fturur (\u00f6rne\u011fin, \/urunler\/2).\n  \/\/ props: o sayfan\u0131n kendine \u00f6zg\u00fc verilerini (\u00fcr\u00fcnler, sayfa numaras\u0131 vb.) i\u00e7erir.\n  return paginatedPages;\n}\n\n\/\/ Astro.props, getStaticPaths'ten d\u00f6nen props de\u011ferlerini al\u0131r.\nconst { page } = Astro.props;\n---\n\n<html lang=\"tr\">\n<head>\n    <meta charset=\"utf-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    <title>\u00dcr\u00fcn Listesi - Sayfa {page.currentPage}<\/title>\n    <link rel=\"stylesheet\" href=\"\/global.css\" \/>\n<\/head>\n<body>\n    <main>\n        <h1>\u00dcr\u00fcnler - Sayfa {page.currentPage}<\/h1>\n        <div class=\"urun-grid\">\n            {page.data.map((urun) => (\n                <UrunKart urun={urun} \/>\n            ))}\n        <\/div>\n\n        <SayfalamaNavigasyon page={page} \/>\n    <\/main>\n<\/body>\n<\/html>\n\n<style>\n    .urun-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n        gap: 1rem;\n        margin-top: 2rem;\n    }\n    h1 {\n        text-align: center;\n        margin-bottom: 2rem;\n        color: #333;\n    }\n    \/* Mobil uyumluluk i\u00e7in *\/\n    @media (max-width: 768px) {\n        .urun-grid {\n            grid-template-columns: 1fr;\n        }\n    }\n<\/style>\n    <\/pre>\n<p><\/code><\/p>\n<div class=\"expert-tip\">\n        Uzman \u0130pucu: Astro'nun <code>paginate<\/code> fonksiyonu, b\u00fcy\u00fck veri setlerini etkili bir \u015fekilde b\u00f6lmek i\u00e7in tasarlanm\u0131\u015ft\u0131r. <code>pageSize<\/code> parametresi ile her sayfada ka\u00e7 \u00f6\u011fe g\u00f6sterilece\u011fini kontrol edebilirsiniz. Bu, sayfa y\u00fckleme s\u00fcrelerini optimize etmek ve kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in kritik bir ayard\u0131r.\n    <\/div>\n<h3>3. Sayfalama Navigasyon Komponenti Olu\u015fturma<\/h3>\n<p>Kullan\u0131c\u0131lar\u0131n sayfalar aras\u0131nda ge\u00e7i\u015f yapabilmesi i\u00e7in bir navigasyon komponentine ihtiyac\u0131m\u0131z var. <code>src\/components\/SayfalamaNavigasyon.astro<\/code> dosyas\u0131n\u0131 olu\u015ftural\u0131m:<\/p>\n<pre><code class=\"language-astro\">\n---\nconst { page } = Astro.props;\n---\n\n<nav class=\"pagination\" aria-label=\"Sayfalama navigasyonu\">\n    <ul class=\"pagination-list\">\n        {page.url.prev && (\n            <li><a href={page.url.prev} class=\"pagination-link\">\u00d6nceki<\/a><\/li>\n        )}\n        {page.url.all.map((urlItem) => (\n            <li key={urlItem.text}>\n                <a\n                    href={urlItem.url}\n                    class:list={[\n                        \"pagination-link\",\n                        {\"active\": urlItem.current}\n                    ]}\n                    aria-current={urlItem.current ? \"page\" : undefined}\n                >\n                    {urlItem.text}\n                <\/a>\n            <\/li>\n        ))}\n        {page.url.next && (\n            <li><a href={page.url.next} class=\"pagination-link\">Sonraki<\/a><\/li>\n        )}\n    <\/ul>\n<\/nav>\n\n<style>\n    .pagination {\n        display: flex;\n        justify-content: center;\n        margin-top: 3rem;\n        margin-bottom: 2rem;\n    }\n    .pagination-list {\n        list-style: none;\n        padding: 0;\n        margin: 0;\n        display: flex;\n        flex-wrap: wrap; \/* K\u00fc\u00e7\u00fck ekranlarda sarmalama *\/\n        gap: 0.5rem;\n    }\n    .pagination-link {\n        display: inline-block;\n        padding: 0.75rem 1.25rem;\n        border: 1px solid #ddd;\n        border-radius: 4px;\n        text-decoration: none;\n        color: #007bff;\n        background-color: #fff;\n        transition: background-color 0.3s ease, color 0.3s ease;\n    }\n    .pagination-link:hover {\n        background-color: #007bff;\n        color: #fff;\n    }\n    .pagination-link.active {\n        background-color: #007bff;\n        color: #fff;\n        border-color: #007bff;\n        pointer-events: none; \/* Aktif sayfan\u0131n t\u0131klanmas\u0131n\u0131 engelle *\/\n    }\n\n    \/* Mobil uyumluluk i\u00e7in medya sorgular\u0131 *\/\n    @media (max-width: 600px) {\n        .pagination-list {\n            justify-content: center;\n        }\n        .pagination-link {\n            padding: 0.5rem 0.8rem; \/* Daha k\u00fc\u00e7\u00fck butonlar *\/\n            font-size: 0.9em;\n        }\n    }\n<\/style>\n    <\/pre>\n<p><\/code><\/p>\n<p>Bu ad\u0131mlarla, binlerce \u00fcr\u00fcn\u00fcn\u00fcz olsa bile Astro, her bir sayfalama sayfas\u0131n\u0131 statik olarak olu\u015fturacak ve sitenizin performans\u0131n\u0131 inan\u0131lmaz derecede art\u0131racakt\u0131r. Kullan\u0131c\u0131lar, sayfa ge\u00e7i\u015flerinde neredeyse an\u0131nda y\u00fckleme s\u00fcreleri deneyimleyecekler.<\/p>\n<h2>Ger\u00e7ek D\u00fcnya Senaryolar\u0131nda B\u00fcy\u00fck Veriyle \u00c7al\u0131\u015fmak: Performans \u0130pu\u00e7lar\u0131 Nelerdir?<\/h2>\n<p>B\u00fcy\u00fck veri setleriyle \u00e7al\u0131\u015fmak, sadece veriyi sayfalara ay\u0131rmakla bitmez; ayn\u0131 zamanda performans optimizasyonlar\u0131n\u0131 da beraberinde getirir. Ger\u00e7ek d\u00fcnya senaryolar\u0131nda, Astro'nun statik site olu\u015fturma yeteneklerini kullanarak web sitenizin h\u0131z\u0131n\u0131 ve verimlili\u011fini maksimuma \u00e7\u0131karman\u0131z i\u00e7in baz\u0131 \u00f6nemli ipu\u00e7lar\u0131 bulunmaktad\u0131r.<\/p>\n<h3>1. Veri \u00c7ekme Stratejileri ve \u00d6nbellekleme<\/h3>\n<p>B\u00fcy\u00fck bir API'den veya veritaban\u0131ndan veri \u00e7ekerken, derleme s\u00fcresini optimize etmek kritik \u00f6neme sahiptir. E\u011fer verileriniz s\u0131k s\u0131k de\u011fi\u015fmiyorsa, derleme zaman\u0131nda (build time) veriyi \u00e7ekip statik olarak kullanmak en verimli yoldur. Ancak verileriniz dinamikse, baz\u0131 stratejiler uygulayabiliriz:<\/p>\n<ul>\n<li><strong>Derleme Zaman\u0131 \u00d6nbellekleme:<\/strong> Uzun s\u00fcren API \u00e7a\u011fr\u0131lar\u0131 i\u00e7in, veriyi yerel bir dosyaya (\u00f6rne\u011fin, JSON) \u00f6nbelle\u011fe almak ve bir sonraki derlemede bu \u00f6nbellekten okumak, derleme s\u00fcrelerini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde k\u0131saltabilir. Pop\u00fcler \u00f6nbellekleme k\u00fct\u00fcphaneleri veya basit bir dosya yazma\/okuma mekanizmas\u0131 kullan\u0131labilir.<\/li>\n<li><strong>K\u0131smi Yeniden Derleme (Partial Rebuilds):<\/strong> E\u011fer sadece belirli bir veri setindeki k\u00fc\u00e7\u00fck bir k\u0131s\u0131m de\u011fi\u015fiyorsa, t\u00fcm sitenin yeniden derlenmesini engellemek i\u00e7in ak\u0131ll\u0131 derleme stratejileri d\u00fc\u015f\u00fcnmek \u00f6nemlidir. Astro, bu alanda do\u011frudan yerle\u015fik bir \u00f6zellik sunmasa da, d\u0131\u015f kaynaklar veya CI\/CD boru hatlar\u0131 arac\u0131l\u0131\u011f\u0131yla y\u00f6netilebilir.<\/li>\n<li><strong>API Gateway Kullan\u0131m\u0131:<\/strong> Karma\u015f\u0131k veri \u00e7ekme i\u015flemlerini basitle\u015ftirmek ve optimize etmek i\u00e7in bir API Gateway kullanmak, derleme zaman\u0131nda \u00e7a\u011fr\u0131lan u\u00e7 noktalar\u0131n daha h\u0131zl\u0131 yan\u0131t vermesini sa\u011flayabilir.<\/li>\n<\/ul>\n<h3>2. G\u00f6rsel ve Medya Optimizasyonu<\/h3>\n<p>B\u00fcy\u00fck veri i\u00e7eren listeleme sayfalar\u0131nda g\u00f6rseller, genellikle en b\u00fcy\u00fck performans sorunlar\u0131ndan biridir. Astro Image komponenti bu sorunu \u00e7\u00f6zmek i\u00e7in harika bir ara\u00e7t\u0131r:<\/p>\n<pre><code class=\"language-astro\">\n---\nimport { Image } from 'astro:assets';\nimport productPlaceholder from '..\/assets\/product-placeholder.png'; \/\/ Varsay\u0131lan g\u00f6rsel\nconst { urun } = Astro.props;\n---\n<div class=\"urun-kart\">\n    <Image\n        src={urun.resimUrl || productPlaceholder}\n        alt={urun.ad}\n        width={300}\n        height={300}\n        quality={80}\n        loading=\"lazy\"\n        decoding=\"async\"\n    \/>\n    <h3>{urun.ad}<\/h3>\n    <p>{urun.fiyat.toLocaleString('tr-TR', { style: 'currency', currency: 'TRY' })}<\/p>\n    <a href={<code>\/urun\/${urun.id}<\/code>} class=\"detay-link\">Detaylar<\/a>\n<\/div>\n    <\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki \u00f6rnekte <code>Image<\/code> komponenti:<\/p>\n<ul>\n<li>G\u00f6rselleri otomatik olarak optimize eder (boyutland\u0131rma, s\u0131k\u0131\u015ft\u0131rma).<\/li>\n<li><code>loading=\"lazy\"<\/code> \u00f6zelli\u011fi sayesinde, g\u00f6rsel taray\u0131c\u0131 penceresine yak\u0131n olana kadar y\u00fcklenmez.<\/li>\n<li><code>decoding=\"async\"<\/code> g\u00f6rselin ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 engellemeden y\u00fcklenmesini sa\u011flar.<\/li>\n<\/ul>\n<p>    Bu t\u00fcr optimizasyonlar, sayfalama sayfalar\u0131nda \u00f6zellikle y\u00fczlerce g\u00f6rselin oldu\u011fu durumlarda fark yarat\u0131r.<\/p>\n<h3>3. Sayfalama ve Filtreleme\/S\u0131ralama Entegrasyonu<\/h3>\n<p>Ger\u00e7ek d\u00fcnya uygulamalar\u0131nda kullan\u0131c\u0131lar sadece sayfalama yapmakla kalmaz, ayn\u0131 zamanda \u00fcr\u00fcnleri filtrelemek veya s\u0131ralamak isterler. Bu durumda, her bir filtreleme\/s\u0131ralama kombinasyonu i\u00e7in ayr\u0131 bir statik sayfa olu\u015fturmak pratik olmayabilir. Bu senaryolarda:<\/p>\n<ul>\n<li><strong>Client-side Filtreleme\/S\u0131ralama:<\/strong> E\u011fer filtreleme se\u00e7enekleri k\u0131s\u0131tl\u0131ysa ve veri seti sayfa baz\u0131nda \u00e7ok b\u00fcy\u00fck de\u011filse, o sayfan\u0131n verisini JavaScript ile filtreleyip s\u0131ralayabilirsiniz. Ancak bu, performans\u0131 olumsuz etkileyebilir.<\/li>\n<li><strong>Hibrit Yakla\u015f\u0131m (SSG + API):<\/strong> Sayfalama Astro ile statik olarak yap\u0131l\u0131rken, filtreleme ve s\u0131ralama i\u00e7in JavaScript kullanarak bir API'ye istek g\u00f6nderebilir ve sonu\u00e7lar\u0131 mevcut sayfa i\u00e7erisinde dinamik olarak g\u00fcncelleyebilirsiniz. Bu, en yayg\u0131n ve dengeli yakla\u015f\u0131md\u0131r.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">\n\/\/ \u00d6rnek: Bir Astro adas\u0131nda filtreleme\/s\u0131ralama yap\u0131s\u0131\n\/\/ src\/components\/UrunFiltreleme.jsx (React komponenti olarak d\u00fc\u015f\u00fcn\u00fclebilir)\nimport React, { useState, useEffect } from 'react';\n\nfunction UrunFiltreleme({ initialUrunler, currentPage }) {\n    const [urunler, setUrunler] = useState(initialUrunler);\n    const [filtreKategori, setFiltreKategori] = useState('');\n    const [siralama, setSiralama] = useState('fiyat-asc');\n\n    useEffect(() => {\n        \/\/ API'den filtreli\/s\u0131ral\u0131 veri \u00e7ekme \u00f6rne\u011fi\n        const fetchFiltreUrunler = async () => {\n            const response = await fetch(<code>\/api\/urunler?page=${currentPage}&kategori=${filtreKategori}&siralama=${siralama}<\/code>);\n            const data = await response.json();\n            setUrunler(data.urunler);\n        };\n        fetchFiltreUrunler();\n    }, [filtreKategori, siralama, currentPage]); \/\/ Filtreleme veya sayfa de\u011fi\u015fti\u011finde yeniden \u00e7ek\n\n    return (\n        <div>\n            {\/* Filtre ve s\u0131ralama UI elemanlar\u0131 *\/}\n            {\/* urunler'i burada render edin *\/}\n        <\/div>\n    );\n}\n\n\/\/ Astro sayfas\u0131nda kullan\u0131m\u0131\n\/\/ <UrunFiltreleme client:load initialUrunler={page.data} currentPage={page.currentPage} \/>\n    <\/pre>\n<p><\/code><\/p>\n<p>Bu yakla\u015f\u0131mda, temel sayfalama statik olarak Astro taraf\u0131ndan ele al\u0131n\u0131rken, daha dinamik olan filtreleme ve s\u0131ralama i\u015flemleri Astro adalar\u0131 arac\u0131l\u0131\u011f\u0131yla istemci taraf\u0131nda ger\u00e7ekle\u015ftirilir. B\u00f6ylece hem ba\u015flang\u0131\u00e7 performans\u0131 korunur hem de kullan\u0131c\u0131ya interaktif bir deneyim sunulur.<\/p>\n<h2>Astro Sayfalaman\u0131z\u0131 UX ve SEO \u0130\u00e7in Nas\u0131l Geli\u015ftirirsiniz?<\/h2>\n<p>Web sitenizde sayfalama uygulamak, yaln\u0131zca teknik bir gereklilik de\u011fildir; ayn\u0131 zamanda kullan\u0131c\u0131 deneyimi (UX) ve arama motoru optimizasyonu (SEO) a\u00e7\u0131s\u0131ndan da dikkatle ele al\u0131nmas\u0131 gereken bir konudur. \u0130yi tasarlanm\u0131\u015f bir sayfalama, kullan\u0131c\u0131lar\u0131n i\u00e7eri\u011fi kolayca bulmas\u0131n\u0131 sa\u011flarken, arama motorlar\u0131n\u0131n da sitenizi daha verimli bir \u015fekilde taramas\u0131na yard\u0131mc\u0131 olur.<\/p>\n<h3>1. Eri\u015filebilirlik (Accessibility) Odakl\u0131 Sayfalama<\/h3>\n<p>Sayfalama navigasyonu, t\u00fcm kullan\u0131c\u0131lar i\u00e7in eri\u015filebilir olmal\u0131d\u0131r, bu engelli kullan\u0131c\u0131lar\u0131 da kapsar. \u0130\u015fte dikkat etmeniz gerekenler:<\/p>\n<ul>\n<li><strong>Semantik HTML Kullan\u0131m\u0131:<\/strong> Sayfalama navigasyonu i\u00e7in <code><br \/>\n<nav><\/code> ve <code><\/p>\n<ul><\/code>\/<code><\/p>\n<li><\/code> etiketlerini kullanmak, ekran okuyucular\u0131n i\u00e7eri\u011fi do\u011fru anlamas\u0131na yard\u0131mc\u0131 olur.<\/li>\n<li><strong>ARIA Nitelikleri:<\/strong> <code>aria-label=\"Sayfalama navigasyonu\"<\/code> gibi niteliklerle navigasyonun amac\u0131n\u0131 belirtin. Aktif sayfay\u0131 belirtmek i\u00e7in <code>aria-current=\"page\"<\/code> niteli\u011fini kullan\u0131n.\n<pre><code class=\"language-html\">\n<a href=\"\/urunler\/2\" class=\"pagination-link active\" aria-current=\"page\">2<\/a>\n            <\/pre>\n<p><\/code>\n        <\/li>\n<li><strong>Klavye Navigasyonu:<\/strong> Klavyeyle (Tab tu\u015fu ile) t\u00fcm sayfalama ba\u011flant\u0131lar\u0131na eri\u015filebildi\u011finden ve enter tu\u015fuyla \u00e7al\u0131\u015ft\u0131r\u0131labildi\u011finden emin olun.<\/li>\n<li><strong>Yeterli Kontrast:<\/strong> Ba\u011flant\u0131 metinleri ve arka plan aras\u0131nda yeterli renk kontrast\u0131 sa\u011flay\u0131n.<\/li>\n<\/ul>\n<h3>2. SEO \u0130\u00e7in Optimize Edilmi\u015f Sayfalama<\/h3>\n<p>Arama motorlar\u0131n\u0131n sayfalanm\u0131\u015f i\u00e7eri\u011finizi do\u011fru bir \u015fekilde anlamas\u0131 ve dizine eklemesi i\u00e7in baz\u0131 SEO uygulamalar\u0131 \u00f6nemlidir:<\/p>\n<ul>\n<li><strong>Benzersiz Ba\u015fl\u0131klar ve Meta A\u00e7\u0131klamalar\u0131:<\/strong> Her sayfalama sayfas\u0131n\u0131n benzersiz bir <code><title><\/code> etiketi ve meta a\u00e7\u0131klamas\u0131 oldu\u011fundan emin olun (\u00f6rne\u011fin, \"\u00dcr\u00fcnler - Sayfa 2\"). Bu, arama motorlar\u0131na sayfan\u0131n i\u00e7eri\u011fi hakk\u0131nda bilgi verir.<\/li>\n<li><strong>Rel=\"next\" ve Rel=\"prev\" (Art\u0131k Az Kullan\u0131l\u0131yor ama Bilmekte Fayda Var):<\/strong> Eskiden <code><link rel=\"next\"><\/code> ve <code><link rel=\"prev\"><\/code> etiketleri, arama motorlar\u0131na sayfalama ili\u015fkisini belirtmek i\u00e7in kullan\u0131l\u0131rd\u0131. Google art\u0131k bu etiketleri bir sinyal olarak g\u00f6rmese de, di\u011fer arama motorlar\u0131 i\u00e7in hala bir miktar faydas\u0131 olabilir. Yine de, odak noktan\u0131z\u0131n canonical URL'ler ve i\u00e7eri\u011fin kalitesi olmas\u0131 daha \u00f6nemlidir.<\/li>\n<li><strong>Canonical URL'ler:<\/strong> Sayfalama serisinin \"ana\" sayfas\u0131 (genellikle ilk sayfa) i\u00e7in bir <code><link rel=\"canonical\"><\/code> etiketi kullanmak isteyebilirsiniz, ancak bu duruma g\u00f6re de\u011fi\u015fir. E\u011fer her sayfalama sayfas\u0131 kendi ba\u015f\u0131na de\u011ferli i\u00e7erik i\u00e7eriyorsa, her sayfa i\u00e7in kendi canonical URL'sini kullanmak daha iyidir. E\u011fer sayfalama sadece ayn\u0131 i\u00e7eri\u011fin farkl\u0131 bir g\u00f6r\u00fcn\u00fcm\u00fcyse ve arama motorlar\u0131n\u0131n sadece ilk sayfay\u0131 indekslemesini istiyorsan\u0131z, t\u00fcm sayfalardan ilk sayfay\u0131 canonical olarak g\u00f6stermek mant\u0131kl\u0131 olabilir.\n<pre><code class=\"language-html\">\n<!-- \u00dcr\u00fcnler sayfas\u0131 2 i\u00e7in >\n<link rel=\"canonical\" href=\"https:\/\/www.ornek.com\/urunler\/2\" \/>\n<!-- E\u011fer t\u00fcm sayfalamay\u0131 tek bir ana sayfa olarak g\u00f6stermek isterseniz: >\n<link rel=\"canonical\" href=\"https:\/\/www.ornek.com\/urunler\" \/>\n            <\/pre>\n<p><\/code>\n        <\/li>\n<li><strong>Dostu URL Yap\u0131s\u0131:<\/strong> URL'lerinizin okunakl\u0131 ve anlaml\u0131 oldu\u011fundan emin olun (\u00f6rne\u011fin, <code>\/urunler\/sayfa\/2<\/code> yerine <code>\/urunler\/2<\/code>). Astro'nun <code>paginate<\/code> fonksiyonu varsay\u0131lan olarak temiz URL'ler \u00fcretir.<\/li>\n<\/ul>\n<h3>3. Mobil Uyumluluk ve Duyarl\u0131 Tasar\u0131m<\/h3>\n<p>Sayfalama navigasyonu, farkl\u0131 ekran boyutlar\u0131nda iyi g\u00f6r\u00fcnmeli ve kullan\u0131labilir olmal\u0131d\u0131r. K\u00fc\u00e7\u00fck ekranlarda \u00e7ok fazla sayfa numaras\u0131 g\u00f6stermek yerine, \"\u00d6nceki\", \"Sonraki\" ve belki birka\u00e7 sayfa numaras\u0131 ile \"...\" (ellipsis) kullanmak daha iyi bir kullan\u0131c\u0131 deneyimi sunar.<\/p>\n<pre><code class=\"language-css\">\n\/* Sayfalama navigasyonu i\u00e7in mobil uyumlu CSS \u00f6rne\u011fi *\/\n.pagination-list {\n    display: flex;\n    flex-wrap: wrap; \/* Sayfa numaralar\u0131 s\u0131\u011fmazsa alt sat\u0131ra ge\u00e7sin *\/\n    justify-content: center;\n    gap: 0.5rem; \/* Butonlar aras\u0131nda bo\u015fluk *\/\n}\n\n@media (max-width: 600px) {\n    .pagination-link {\n        padding: 0.5rem 0.8rem; \/* Daha k\u00fc\u00e7\u00fck butonlar *\/\n        font-size: 0.9em;\n    }\n    .pagination-list li:not(:first-child):not(:last-child):nth-child(n+4):nth-last-child(n+4) {\n        \/* K\u00fc\u00e7\u00fck ekranlarda ortadaki \u00e7ok fazla sayfa numaras\u0131n\u0131 gizle *\/\n        display: none;\n    }\n    \/* \"...\" g\u00f6sterimi i\u00e7in JavaScript veya daha karma\u015f\u0131k CSS gerekebilir *\/\n}\n    <\/pre>\n<p><\/code><\/p>\n<p>Bu CSS medya sorgusu \u00f6rne\u011fi, belirli bir ekran boyutunun alt\u0131nda sayfalama ba\u011flant\u0131lar\u0131n\u0131n boyutunu k\u00fc\u00e7\u00fclt\u00fcr ve gereksiz sayfa numaralar\u0131n\u0131 gizleyerek daha temiz bir g\u00f6r\u00fcn\u00fcm sa\u011flar. Bu t\u00fcr detaylar, kullan\u0131c\u0131lar\u0131n mobil cihazlarda sitenizde rahat\u00e7a gezinmesini garantiler.<\/p>\n<h2>Astro'da Dinamik Sayfalama ve Daha Fazlas\u0131<\/h2>\n<p>Astro'nun statik sayfalama yetenekleri b\u00fcy\u00fck veri setleri i\u00e7in harika olsa da, baz\u0131 senaryolarda tamamen dinamik, istemci taraf\u0131 sayfalama veya sonsuz kayd\u0131rma (infinite scroll) gibi yakla\u015f\u0131mlara ihtiya\u00e7 duyulabilir. \u00d6zellikle kullan\u0131c\u0131lar\u0131n yo\u011fun filtreleme, arama ve s\u0131ralama i\u015flemleri yapmas\u0131 beklenen durumlarda bu alternatifler devreye girer. Astro, bu t\u00fcr dinamik ihtiya\u00e7lar\u0131 \"Astro Adalar\u0131\" mimarisiyle kar\u015f\u0131lar.<\/p>\n<h3>1. \u0130stemci Taraf\u0131 Sayfalama ve Astro Adalar\u0131<\/h3>\n<p>E\u011fer veri seti \u00e7ok b\u00fcy\u00fck de\u011filse (\u00f6rne\u011fin, 100-200 \u00f6\u011fe) ve kullan\u0131c\u0131 etkile\u015fimi (filtreleme, s\u0131ralama) \u00e7ok dinamik olacaksa, t\u00fcm veriyi istemci taraf\u0131na g\u00f6nderip JavaScript ile sayfalama yapmak bir se\u00e7enek olabilir. Astro'da bu, bir UI \u00e7er\u00e7evesi (React, Vue, Svelte) kullan\u0131larak olu\u015fturulmu\u015f bir komponentin \"Astro Adas\u0131\" olarak i\u015faretlenmesiyle yap\u0131l\u0131r.<\/p>\n<pre><code class=\"language-astro\">\n---\nimport ClientSidePagination from '..\/components\/ClientSidePagination.jsx'; \/\/ Bir React veya Vue komponenti\nimport { tumVeriler } from '..\/data\/tum-veriler'; \/\/ T\u00fcm veri seti\n---\n\n<html lang=\"tr\">\n<head>\n    <meta charset=\"utf-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    <title>Dinamik \u00dcr\u00fcn Listesi<\/title>\n<\/head>\n<body>\n    <main>\n        <h1>Dinamik \u00dcr\u00fcn Listesi<\/h1>\n        <ClientSidePagination client:load data={tumVeriler} itemsPerPage={10} \/>\n    <\/main>\n<\/body>\n<\/html>\n    <\/pre>\n<p><\/code><\/p>\n<p>Burada <code>ClientSidePagination.jsx<\/code>, t\u00fcm veriyi prop olarak al\u0131r ve kendi i\u00e7inde sayfalama mant\u0131\u011f\u0131n\u0131 (state y\u00f6netimi, sayfa de\u011fi\u015ftirme fonksiyonlar\u0131) y\u00f6netir. <code>client:load<\/code> y\u00f6nergesi, bu React komponentinin sadece taray\u0131c\u0131 y\u00fcklendi\u011finde JavaScript'ini indirmesini ve \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Bu yakla\u015f\u0131m, ilk y\u00fcklemede daha fazla JavaScript g\u00f6nderse de, sayfa i\u00e7i etkile\u015fimleri \u00e7ok ak\u0131c\u0131 hale getirir.<\/p>\n<h3>2. Sonsuz Kayd\u0131rma (Infinite Scroll)<\/h3>\n<p>Sonsuz kayd\u0131rma, sayfalama navigasyonunu ortadan kald\u0131rarak kullan\u0131c\u0131 kayd\u0131rd\u0131k\u00e7a yeni i\u00e7eri\u011fin otomatik olarak y\u00fcklenmesini sa\u011flar. \u00d6zellikle sosyal medya ak\u0131\u015flar\u0131 veya foto\u011fraf galerileri gibi uygulamalarda pop\u00fclerdir. Astro'da bunu uygulamak i\u00e7in:<\/p>\n<ul>\n<li>Bir \"Daha Fazla Y\u00fckle\" butonu veya bir g\u00f6zlemci (Intersection Observer API) kullan\u0131n.<\/li>\n<li>Kullan\u0131c\u0131 sayfan\u0131n sonuna yakla\u015ft\u0131\u011f\u0131nda veya butona t\u0131klad\u0131\u011f\u0131nda, bir API'den (veya statik olarak \u00f6nceden olu\u015fturulmu\u015f JSON dosyalar\u0131ndan) bir sonraki sayfa verisini dinamik olarak \u00e7ekin.<\/li>\n<li>\u00c7ekilen veriyi mevcut i\u00e7eri\u011fe JavaScript ile ekleyin.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">\n\/\/ \u00d6rnek: Astro adas\u0131 i\u00e7inde sonsuz kayd\u0131rma mant\u0131\u011f\u0131\n\/\/ src\/components\/InfiniteScrollList.jsx\nimport React, { useState, useEffect, useRef } from 'react';\n\nfunction InfiniteScrollList({ initialData, endpoint }) {\n    const [items, setItems] = useState(initialData);\n    const [page, setPage] = useState(1);\n    const [loading, setLoading] = useState(false);\n    const [hasMore, setHasMore] = useState(true);\n    const observerTarget = useRef(null);\n\n    const fetchMoreItems = async () => {\n        setLoading(true);\n        try {\n            const response = await fetch(<code>${endpoint}?page=${page + 1}<\/code>);\n            const newItems = await response.json();\n            if (newItems.length > 0) {\n                setItems((prevItems) => [...prevItems, ...newItems]);\n                setPage((prevPage) => prevPage + 1);\n            } else {\n                setHasMore(false);\n            }\n        } catch (error) {\n            console.error('Failed to fetch more items:', error);\n        } finally {\n            setLoading(false);\n        }\n    };\n\n    useEffect(() => {\n        if (!observerTarget.current || !hasMore || loading) return;\n\n        const observer = new IntersectionObserver(\n            (entries) => {\n                if (entries[0].isIntersecting) {\n                    fetchMoreItems();\n                }\n            },\n            { threshold: 1.0 }\n        );\n\n        observer.observe(observerTarget.current);\n\n        return () => {\n            if (observerTarget.current) {\n                observer.unobserve(observerTarget.current);\n            }\n        };\n    }, [hasMore, loading, page, endpoint]); \/\/ Ba\u011f\u0131ml\u0131l\u0131klar\u0131 g\u00fcncelliyoruz\n\n    return (\n        <div>\n            {items.map((item) => (\n                <div key={item.id} className=\"item-card\">\n                    {\/* Item i\u00e7eri\u011fi *\/}\n                    <h3>{item.ad}<\/h3>\n                    <p>{item.aciklama}<\/p>\n                <\/div>\n            ))}\n            {hasMore && (\n                <div ref={observerTarget} style={{ height: '50px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>\n                    {loading ? <p>Y\u00fckleniyor...<\/p> : <p>Daha fazla \u00f6\u011fe y\u00fcklemek i\u00e7in a\u015fa\u011f\u0131 kayd\u0131r\u0131n<\/p>}\n                <\/div>\n            )}\n            {!hasMore && <p style={{ textAlign: 'center' }}>T\u00fcm \u00f6\u011feler y\u00fcklendi.<\/p>}\n        <\/div>\n    );\n}\n    <\/pre>\n<p><\/code><\/p>\n<p>Bu y\u00f6ntem, \u00f6zellikle g\u00f6rsel a\u011f\u0131rl\u0131kl\u0131 veya s\u00fcrekli ak\u0131\u015f gerektiren i\u00e7erikler i\u00e7in cazip olsa da, SEO ve eri\u015filebilirlik a\u00e7\u0131s\u0131ndan baz\u0131 zorluklar\u0131 beraberinde getirebilir. Arama motoru botlar\u0131n\u0131n t\u00fcm i\u00e7eri\u011fi g\u00f6rebilmesi i\u00e7in dikkatli bir \u015fekilde uygulanmas\u0131 ve alternatif bir sayfalama navigasyonu sunulmas\u0131 \u00f6nemlidir.<\/p>\n<p>Astro'nun hibrit mimarisi sayesinde, sitenizin performans gereksinimlerine ve kullan\u0131c\u0131 etkile\u015fim beklentilerine g\u00f6re statik sayfalama, istemci taraf\u0131 sayfalama veya sonsuz kayd\u0131rma aras\u0131nda en uygun \u00e7\u00f6z\u00fcm\u00fc se\u00e7me esnekli\u011fine sahip olursunuz.<\/p>\n<h2>Astro ile B\u00fcy\u00fck Veri Sayfalama Yolculu\u011funuz<\/h2>\n<p>Astro ile b\u00fcy\u00fck veri setlerini y\u00f6netmek ve sayfalama uygulamak, web sitenizin performans\u0131n\u0131 ve kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirmenin g\u00fc\u00e7l\u00fc bir yoludur. Bu makale boyunca, Astro'nun <code>getStaticPaths<\/code> ve <code>paginate<\/code> fonksiyonlar\u0131n\u0131 kullanarak binlerce \u00f6\u011feyi i\u00e7eren statik sayfalar\u0131 nas\u0131l olu\u015fturaca\u011f\u0131m\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6rd\u00fck. Ger\u00e7ek d\u00fcnya senaryolar\u0131nda veri \u00e7ekme stratejilerinden g\u00f6rsel optimizasyonuna, filtreleme entegrasyonundan eri\u015filebilir ve SEO dostu sayfalama ipu\u00e7lar\u0131na kadar bir\u00e7ok konuyu ele ald\u0131k.<\/p>\n<p>Astro'nun i\u00e7eri\u011fe \u00f6ncelik veren ve JavaScript'i minimumda tutan mimarisi, b\u00fcy\u00fck veri setleriyle bile ultra h\u0131zl\u0131 ve verimli web siteleri olu\u015fturman\u0131za olanak tan\u0131r. \u0130ster statik olarak olu\u015fturulmu\u015f sayfalarla en y\u00fcksek performans\u0131 hedefleyin, ister Astro Adalar\u0131 arac\u0131l\u0131\u011f\u0131yla dinamik etkile\u015fimleri entegre edin, Astro size bu s\u00fcre\u00e7te esneklik ve g\u00fc\u00e7 sunar. Unutmay\u0131n ki, iyi bir sayfalama uygulamas\u0131 sadece teknik bir mesele de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131lar\u0131n i\u00e7eri\u011finize kolayca ula\u015fmas\u0131n\u0131 sa\u011flayan bir UX ve SEO stratejisidir.<\/p>\n<p>Art\u0131k Astro'nun sayfalama yeteneklerini kullanarak kendi b\u00fcy\u00fck veri projelerinizi hayata ge\u00e7irmek i\u00e7in sa\u011flam bir temeliniz var. Bu bilgileri kendi projelerinize uyarlayarak, kullan\u0131c\u0131lar\u0131n\u0131za h\u0131zl\u0131, eri\u015filebilir ve keyifli bir deneyim sunabilirsiniz. Gelece\u011fin webini in\u015fa ederken, performans ve kullan\u0131c\u0131 deneyimini her zaman \u00f6n planda tutmaya devam edin.<\/p>\n<h2>S\u0131k\u00e7a Sorulan Sorular<\/h2>\n<h3>Astro'da sayfalama neden performansl\u0131d\u0131r?<\/h3>\n<p>Astro, <code>getStaticPaths<\/code> fonksiyonu ile derleme zaman\u0131nda her bir sayfalama sayfas\u0131n\u0131 statik HTML dosyalar\u0131 olarak olu\u015fturur. Bu, kullan\u0131c\u0131n\u0131n bir sayfaya eri\u015fti\u011finde sunucunun herhangi bir i\u015flem yapmas\u0131na gerek kalmadan, \u00f6nceden olu\u015fturulmu\u015f h\u0131zl\u0131 bir dosya sunuldu\u011fu anlam\u0131na gelir. Bu da sayfa y\u00fckleme s\u00fcrelerini dramatik \u015fekilde k\u0131salt\u0131r.<\/p>\n<h3>B\u00fcy\u00fck veri setleri i\u00e7in Astro mu, yoksa Next.js gibi bir framework m\u00fc tercih etmeliyim?<\/h3>\n<p>Her iki framework de b\u00fcy\u00fck veri setlerini y\u00f6netebilir. Astro, \u00f6zellikle i\u00e7eri\u011fe \u00f6ncelik veren, performans\u0131n kritik oldu\u011fu ve statik olarak \u00f6nceden olu\u015fturulabilecek veri setleri i\u00e7in harikad\u0131r. Next.js ise daha \u00e7ok dinamik, sunucu taraf\u0131nda veri \u00e7ekme ve yo\u011fun istemci taraf\u0131 etkile\u015fimleri gerektiren uygulamalar i\u00e7in tercih edilebilir. Se\u00e7im, projenizin spesifik gereksinimlerine ba\u011fl\u0131d\u0131r.<\/p>\n<h3>Sayfalama URL'leri SEO i\u00e7in nas\u0131l olmal\u0131?<\/h3>\n<p>URL'leriniz temiz ve okunakl\u0131 olmal\u0131d\u0131r (\u00f6rne\u011fin, <code>\/urunler\/2<\/code>). Her sayfalama sayfas\u0131n\u0131n benzersiz bir ba\u015fl\u0131\u011f\u0131 ve meta a\u00e7\u0131klamas\u0131 olmal\u0131d\u0131r. <code>rel=\"canonical\"<\/code> etiketini dikkatli kullanarak arama motorlar\u0131n\u0131n i\u00e7eri\u011finizi do\u011fru \u015fekilde anlamas\u0131n\u0131 sa\u011flay\u0131n. Ayr\u0131ca, <code>rel=\"next\"<\/code> ve <code>rel=\"prev\"<\/code> etiketleri art\u0131k Google i\u00e7in bir s\u0131ralama sinyali olmasa da, di\u011fer arama motorlar\u0131 ve genel site yap\u0131s\u0131 i\u00e7in kullan\u0131labilir.<\/p>\n<h3>Sonsuz kayd\u0131rma ile geleneksel sayfalama aras\u0131nda ne fark var?<\/h3>\n<p>Geleneksel sayfalama, i\u00e7eri\u011fi numaraland\u0131r\u0131lm\u0131\u015f sayfalara b\u00f6ler ve kullan\u0131c\u0131lar\u0131n navigasyon ba\u011flant\u0131lar\u0131na t\u0131klayarak ilerlemesini sa\u011flar. Sonsuz kayd\u0131rma ise, kullan\u0131c\u0131 sayfan\u0131n sonuna yakla\u015ft\u0131\u011f\u0131nda yeni i\u00e7eri\u011fi otomatik olarak y\u00fckler. Geleneksel sayfalama SEO ve eri\u015filebilirlik a\u00e7\u0131s\u0131ndan genellikle daha \u00f6ng\u00f6r\u00fclebilirdir, sonsuz kayd\u0131rma ise \u00f6zellikle g\u00f6rsel odakl\u0131 i\u00e7eriklerde daha ak\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi sunabilir ancak SEO ve performans zorluklar\u0131 olabilir.<\/p>\n<h3>Astro'da sayfalama yaparken resim optimizasyonu neden bu kadar \u00f6nemli?<\/h3>\n<p>B\u00fcy\u00fck veri setleri genellikle \u00e7ok say\u0131da g\u00f6rsel i\u00e7erir. Resimler, bir sayfan\u0131n toplam boyutunun \u00f6nemli bir k\u0131sm\u0131n\u0131 olu\u015fturabilir ve yava\u015f y\u00fckleme s\u00fcrelerinin ana nedeni olabilir. Astro'nun <code>Image<\/code> komponenti gibi ara\u00e7lar kullanarak resimleri otomatik olarak optimize etmek (boyutland\u0131rma, s\u0131k\u0131\u015ft\u0131rma, lazy loading), sayfa y\u00fckleme s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirerek web performans\u0131n\u0131 art\u0131r\u0131r ve kullan\u0131c\u0131 deneyimini zenginle\u015ftirir.<\/p>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Web sitenizdeki b\u00fcy\u00fck veri setlerini y\u00f6netmek ve kullan\u0131c\u0131lar\u0131n\u0131za ak\u0131c\u0131 bir deneyim sunmak karma\u015f\u0131k g\u00f6r\u00fcnebilir. Bu rehber, Astro kullanarak&hellip;","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-31422","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Astro ile B\u00fcy\u00fck Veri Sayfalama: Kapsaml\u0131 Rehber<\/title>\n<meta name=\"description\" content=\"Web sitenizdeki b\u00fcy\u00fck veri setlerini y\u00f6netmek ve kullan\u0131c\u0131lar\u0131n\u0131za ak\u0131c\u0131 bir deneyim sunmak karma\u015f\u0131k g\u00f6r\u00fcnebilir. Bu rehber, Astro kullanarak milyonlarca \u00f6\u011feyi i\u00e7eren sayfalar\u0131n\u0131z\u0131 nas\u0131l optimize edece\u011finizi ve web performans\u0131n\u0131 en \u00fcst d\u00fczeye \u00e7\u0131karaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131kl\u0131yor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/astro-ile-buyuk-veri-sayfalama-kapsamli-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Astro ile B\u00fcy\u00fck Veri Sayfalama: Kapsaml\u0131 Rehber\" \/>\n<meta property=\"og:description\" content=\"Web sitenizdeki b\u00fcy\u00fck veri setlerini y\u00f6netmek ve kullan\u0131c\u0131lar\u0131n\u0131za ak\u0131c\u0131 bir deneyim sunmak karma\u015f\u0131k g\u00f6r\u00fcnebilir. Bu rehber, Astro kullanarak milyonlarca \u00f6\u011feyi i\u00e7eren sayfalar\u0131n\u0131z\u0131 nas\u0131l optimize edece\u011finizi ve web performans\u0131n\u0131 en \u00fcst d\u00fczeye \u00e7\u0131karaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131kl\u0131yor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/astro-ile-buyuk-veri-sayfalama-kapsamli-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-09T17:31:29+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/astro-ile-buyuk-veri-sayfalama-kapsamli-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/astro-ile-buyuk-veri-sayfalama-kapsamli-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Astro ile B\u00fcy\u00fck Veri Sayfalama: Kapsaml\u0131 Rehber\",\"datePublished\":\"2025-10-09T17:31:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/astro-ile-buyuk-veri-sayfalama-kapsamli-rehber\/\"},\"wordCount\":3496,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/astro-ile-buyuk-veri-sayfalama-kapsamli-rehber\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/astro-ile-buyuk-veri-sayfalama-kapsamli-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/astro-ile-buyuk-veri-sayfalama-kapsamli-rehber\/\",\"name\":\"Astro ile B\u00fcy\u00fck Veri Sayfalama: Kapsaml\u0131 Rehber\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-09T17:31:29+00:00\",\"description\":\"Web sitenizdeki b\u00fcy\u00fck veri setlerini y\u00f6netmek ve kullan\u0131c\u0131lar\u0131n\u0131za ak\u0131c\u0131 bir deneyim sunmak karma\u015f\u0131k g\u00f6r\u00fcnebilir. Bu rehber, Astro kullanarak milyonlarca \u00f6\u011feyi i\u00e7eren sayfalar\u0131n\u0131z\u0131 nas\u0131l optimize edece\u011finizi ve web performans\u0131n\u0131 en \u00fcst d\u00fczeye \u00e7\u0131karaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131kl\u0131yor.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/astro-ile-buyuk-veri-sayfalama-kapsamli-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/astro-ile-buyuk-veri-sayfalama-kapsamli-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/astro-ile-buyuk-veri-sayfalama-kapsamli-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Astro ile B\u00fcy\u00fck Veri Sayfalama: Kapsaml\u0131 Rehber\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Astro ile B\u00fcy\u00fck Veri Sayfalama: Kapsaml\u0131 Rehber","description":"Web sitenizdeki b\u00fcy\u00fck veri setlerini y\u00f6netmek ve kullan\u0131c\u0131lar\u0131n\u0131za ak\u0131c\u0131 bir deneyim sunmak karma\u015f\u0131k g\u00f6r\u00fcnebilir. Bu rehber, Astro kullanarak milyonlarca \u00f6\u011feyi i\u00e7eren sayfalar\u0131n\u0131z\u0131 nas\u0131l optimize edece\u011finizi ve web performans\u0131n\u0131 en \u00fcst d\u00fczeye \u00e7\u0131karaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131kl\u0131yor.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/astro-ile-buyuk-veri-sayfalama-kapsamli-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"Astro ile B\u00fcy\u00fck Veri Sayfalama: Kapsaml\u0131 Rehber","og_description":"Web sitenizdeki b\u00fcy\u00fck veri setlerini y\u00f6netmek ve kullan\u0131c\u0131lar\u0131n\u0131za ak\u0131c\u0131 bir deneyim sunmak karma\u015f\u0131k g\u00f6r\u00fcnebilir. Bu rehber, Astro kullanarak milyonlarca \u00f6\u011feyi i\u00e7eren sayfalar\u0131n\u0131z\u0131 nas\u0131l optimize edece\u011finizi ve web performans\u0131n\u0131 en \u00fcst d\u00fczeye \u00e7\u0131karaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131kl\u0131yor.","og_url":"https:\/\/fatihsoysal.com\/blog\/astro-ile-buyuk-veri-sayfalama-kapsamli-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-09T17:31:29+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"13 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/astro-ile-buyuk-veri-sayfalama-kapsamli-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/astro-ile-buyuk-veri-sayfalama-kapsamli-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Astro ile B\u00fcy\u00fck Veri Sayfalama: Kapsaml\u0131 Rehber","datePublished":"2025-10-09T17:31:29+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/astro-ile-buyuk-veri-sayfalama-kapsamli-rehber\/"},"wordCount":3496,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/astro-ile-buyuk-veri-sayfalama-kapsamli-rehber\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/astro-ile-buyuk-veri-sayfalama-kapsamli-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/astro-ile-buyuk-veri-sayfalama-kapsamli-rehber\/","name":"Astro ile B\u00fcy\u00fck Veri Sayfalama: Kapsaml\u0131 Rehber","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-09T17:31:29+00:00","description":"Web sitenizdeki b\u00fcy\u00fck veri setlerini y\u00f6netmek ve kullan\u0131c\u0131lar\u0131n\u0131za ak\u0131c\u0131 bir deneyim sunmak karma\u015f\u0131k g\u00f6r\u00fcnebilir. Bu rehber, Astro kullanarak milyonlarca \u00f6\u011feyi i\u00e7eren sayfalar\u0131n\u0131z\u0131 nas\u0131l optimize edece\u011finizi ve web performans\u0131n\u0131 en \u00fcst d\u00fczeye \u00e7\u0131karaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131kl\u0131yor.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/astro-ile-buyuk-veri-sayfalama-kapsamli-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/astro-ile-buyuk-veri-sayfalama-kapsamli-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/astro-ile-buyuk-veri-sayfalama-kapsamli-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Astro ile B\u00fcy\u00fck Veri Sayfalama: Kapsaml\u0131 Rehber"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=31422"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31422\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=31422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=31422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=31422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}