Implementasi Live Search & Filter URL Query Tanpa Client-Side JavaScript

Banyak developer frontend modern terbiasa menggunakan client-side state (seperti `useState` React) untuk memfilter daftar artikel di browser. Meskipun interaktif, metode ini memiliki kelemahan:

• Harus mendownload seluruh daftar data artikel ke client.
• URL tidak dapat dibagikan (shareable) bersama filter yang aktif.
• Search engine bot kesulitan mengindeks hasil filter.

Pendekatan SSR First

Dengan Astro SSR, kita cukup memanfaatkan form HTML standar dengan method `GET`:

<form method="GET" action="/">
  <input type="text" name="q" placeholder="Cari artikel..." value={searchQuery} />
  <button type="submit">Filter</button>
</form>

Di server Astro (`src/pages/index.astro`):

const q = Astro.url.searchParams.get('q') || '';
const filteredPosts = posts.filter(p => p.title.toLowerCase().includes(q.toLowerCase()));

Hasilnya: Setiap pencarian menghasilkan URL bersih seperti `/?q=astro`, difilter langsung di server dalam hitungan milidetik, dan langsung menghasilkan HTML yang sudah terisi.