A página da loja de equipamentos
A página da loja de engrenagens é principalmente dados do lado do servidor com filtragem do lado do cliente. Para esta página, queremos pegar um pedaço de dados disponíveis no back -end e renderizá -lo de forma que o cliente possa filtrá -lo. Isso significa que queremos renderizar os dados com o Astro e criar um componente alpino que possa consumi-los, fornecendo a interação dinâmica da interface do usuário.
Primeiro é a própria página:
---
// src/pages/gear-shops.astro
import Layout from '../layouts/Layout.astro';
import GearShopList from '../components/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" }
);
---
Vamos ver o GearShopList Componente em apenas um minuto. Os dados estão no gearShops variável. Isso pode vir de um banco de dados ou uma API externa. Pode vir de um sistema de arquivos local ou das coleções de conteúdo interno da Astro. O ponto é que esses dados são produzidos no servidor. O truque agora é disponibilizá -lo como JSON ao vivo no cliente, onde o Alpine pode usá -lo.
