Astro ile Querystring Kullanmak

Querystring nedir?

Querystring, URL’nin sonunda yer alan ve URL’nin parametrelerini belirten bir dizedir. Querystring, URL’nin sonunda yer alan ? karakterinden sonra başlar ve parametreler & karakteri ile ayrılır. Her parametre, = karakteri ile birbirinden ayrılmış bir anahtar ve değer çiftidir.

Örneğin, https://example.com/?name=John&age=30 URL’sinde, name ve age adında iki parametre bulunmaktadır. name parametresinin değeri John, age parametresinin değeri ise 30’dur.

Astro da Querystring için gerekenler

Astro’da, querystring için SSR (Sunucu Tarafı Rendeleme) kullanılıyor. SSR, sayfa yüklendiğinde sunucu tarafında çalışan bir JavaScript işlemidir. Bu işlem, sayfanın içeriğini oluşturur ve tarayıcıya gönderir. SSR, sayfa içeriğini oluştururken, querystring’deki parametreleri kullanabilir.

Bunu etkinleştirmek için Bu Sayfadan mevcut projenize ekleyiniz ve astro.config.mjs dosyası içinden de output:server veya output:hybrid olarak ayarlayınız.

Querystring’i Astro ile kullanma

Astro’da, querystring için kullanacağımız şey bir ara uygulama (middleware) oluşturmak olacaktır. Bu ara uygulamayı oluşturmak için Astronun src/ klasörü içine middleware.ts adında bir dosya oluşturalım ve aşağıdaki kodları ekleyelim:

import { defineMiddleware } from "astro/middleware";

export const onRequest = defineMiddleware((context, next) => {
    let query = new URLSearchParams(context.url.search);
    context.locals.sayfa = Number(query.get('sayfa')) || 1;
    return next();

Bu kodda, URL’deki querystring’i almak için URLSearchParams sınıfını kullanıyoruz. Bu sınıf, URL’deki querystring’i almak ve işlemek için kullanılır. get metodu ile querystring’deki parametrelerin değerlerini alabiliriz. Eğer parametre bulunmazsa, null döner. Bu yüzden Number fonksiyonunu kullanarak değeri sayıya çeviriyoruz. Eğer parametre bulunmazsa veya değeri sayıya çevrilemezse, sayfa numarasını 1 olarak ayarlıyoruz.

context.locals.sayfa kısmına veri gönderdiğimizde tip hatası almaya başlayacağız o yüzden env.d.ts dosyasına aşağıdaki kodları ekleyelim:

declare App {
        interface Locals {
            sayfa: number;
        }
}

bu kodlar ile sayfanın içine gelecek verinin türünü belirledik.

daha sonra sayfamıza gidip sayfa değişkenini kullanabiliriz.

---
console.log("sayfa",Astro.locals.sayfa);
---

şeklinde sayfa verisini konsola yazdırabiliriz.

Querystring ile sayfa numaralandırma

Örneğin, bir blog sayfasında sayfa numaralandırma yapmak istediğimizi düşünelim. Sayfa numaralandırma için querystring kullanabiliriz. Örneğin, https://example.com/blog?sayfa=2 URL’sinde, sayfa parametresi ile sayfa numarasını belirleyebiliriz.

---
let sayfa = Astro.locals.sayfa;
---
<div>
    <h1>Blog</h1>
    <p>Sayfa: {sayfa}</p>
</div>

Bu örnekte, Astro.locals.sayfa değişkeni ile sayfa numarasını alıyoruz ve sayfa numarasını ekrana yazdırıyoruz.

Daha fazla bilgi

Daha fazla bilgi için Astro Middleware belgelerine bakabilirsiniz.