Escopo variável do Astro
Quando você precisa de interatividade front-end, você pode configurá-lo como fizemos usando uma estrutura reativa ou com JavaScript de baunilha. De qualquer maneira, o Astro trabalha no lado do servidor. Uma boa maneira de levar esse ponto para casa é olhar para o apoio da Astro para variáveis que podem ser inseridas nos modelos HTML. Por exemplo, poderíamos criar um valor inicial em index.astro Assim:
---
import ReactCounter from '../components/ReactCounter.jsx';
import SvelteCounter from '../components/SvelteCounter.svelte';
const startingValue = Math.floor(Math.random() * 100);
---
// …
This is on the server: {startingValue}
Isso exibe o valor aleatório gerado no servidor na página do cliente. Lembre -se, porém, que tudo está feito no servidor. Se quiséssemos usar esse valor no cliente, poderíamos passá -lo para os componentes como um parâmetro. Por exemplo, poderíamos fazer o componente esbelto aceitar um parâmetro como assim:
Observe o export let startingValue A sintaxe, que é frouxa para expor um parâmetro pass-in ao seu pai. Para usar isso de volta na página de índice que você digitaria:
