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 out there 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 part 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 '../elements/GearShopList.astro';
const gearShops = (
{ identify: "Journey Outfitters", class: "Mountain climbing" },
{ identify: "Peak Efficiency Gear", class: "Climbing" },
{ identify: "River Rat Leases", class: "Kayaking" },
{ identify: "The Trailhead", class: "Mountain climbing" },
{ identify: "Vertical Ventures", class: "Climbing" }
);
---
We’ll see the GearShopList part 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 an area 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 out there as stay JSON on the consumer, the place Alpine can use it.
