The gear store web page
The gear-shop web page is especially server-side knowledge with client-side filtering. For this web page, we need to take a bit of knowledge that’s obtainable on the again finish and render it in such a manner that the consumer can filter it. Meaning we’ll need to server-side render the info with Astro and create an Alpine element that may eat it, offering the dynamic UI interplay.
First up is the web page itself:
---
// src/pages/gear-shops.astro
import Structure from '../layouts/Structure.astro';
import GearShopList from '../parts/GearShopList.astro';
const gearShops = [
{ name: "Adventure Outfitters", category: "Hiking" },
{ name: "Peak Performance Gear", category: "Climbing" },
{ name: "River Rat Rentals", category: "Kayaking" },
{ name: "The Trailhead", category: "Hiking" },
{ name: "Vertical Ventures", category: "Climbing" }
];
---
We’ll see the GearShopList element in only a minute. The information is within the gearShops variable. This might come from a database or an exterior API. It might come from a neighborhood filesystem or Astro’s built-in content material collections. The purpose is, this knowledge is produced on the server. The trick now’s to make it obtainable as stay JSON on the consumer, the place Alpine can use it.
