L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Vanilla Astro, aucun cadre nécessaire
Découvrez comment utiliser Astro seul pour répondre aux besoins de votre application SSR.
Astro est un framework JavaScript beau et simple qui vous permet de créer des applications full-stack. Alors que la plupart des gens utilisent Astro pour brancher et lire des composants écrits pour d’autres frameworks, vous pouvez utiliser un fichier Astro vanille pour répondre à vos besoins. Astro est conçu d’abord comme un cadre SSR ou statique, puis pour la réactivité.
TL;DR
Astro est son propre framework, mais c’est un framework SSR avec des plugins pour d’autres composants du framework. Si vous avez besoin d’une réactivité fine, Vanilla Astro n’est probablement pas pour vous. Si vous aimez écrire du JavaScript pur, vanilla Astro est fait pour vous. Vanilla Astro est destiné aux applications SSR qui ont très peu de réactivité.
Vent arrière
Premièrement, Tailwind est facilement accessible en utilisant npx.
npx astro add tailwind
Fichiers Astro
Les fichiers Astro se terminent par le .astro syntaxe, vous permettant de générer du HTML rapidement sur le serveur. Les composants sont réutilisables et composables.
Script de composant
Astro utilise une clôture de code (- - -), similaire à celui de Markdown matière premièrequi vous permet de travailler avec JavaScript sur le serveur. L’objectif est d’écrire du JavaScript sûr et sécurisé uniquement disponible sur le serveur.
import AstroComponent from '../components/astro-component.astro';
import data from '../src/data.json';
const data = await fetch('/some-url/users').then(r => r.json());
const { title } = Astro.props;
<!
JSX
Les composants génèrent du code HTML sur le serveur à l’aide d’une syntaxe similaire à JSX. Cela signifie que vous pouvez utiliser vos variables à l’intérieur { } et affichez-les avec ternairesle carte fonction et autres astuces JSX.
<h2>{title ? 'Some Title' : 'Default Title'}</h2>
📝 N’oubliez pas que ce n’est pas réactif et généré uniquement à partir du backend.
Dispositions et emplacements
Comme Svelte 4 et versions antérieures, vous pouvez utiliser des emplacements et des emplacements nommés pour transmettre et empiler des composants.
// layouts/main-layout.astro
---
const { title } = Astro.props;
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<h1>{title}</h1>
<slot />
</body>
</html>
Cependant, vous devez vous assurer d’utiliser la mise en page manuellement.
---
import Counter1 from "../components/counter1.astro";
import Counter2 from "../components/counter2.astro";
import Counter3 from "../components/counter3.astro";
import MainLayout from "../layouts/main-layout.astro";
---
<MainLayout title="Home">
<Counter1 />
<Counter2 />
<Counter3 />
</MainLayout>
📝 Les mises en page sont généralement stockées dans le layouts répertoire, bien qu’ils ne soient pas significativement différents du répertoire slots.
Routage
Le routage fonctionne également de la même manière que d’autres frameworks avec un routage basé sur des fichiers en plaçant votre .astro fichiers dans le pages annuaire.
# Example Routes
src/pages/index.astro -> mysite.com/
src/pages/about.astro -> mysite.com/about
src/pages/about/index.astro -> mysite.com/about
src/pages/about/me.astro -> mysite.com/about/me
src/pages/posts/1.md -> mysite.com/posts/1
src/pages/posts/[name].astro -> mysite.com/posts/name-of-post
src/pages/posts/[...tree].astro -> mysite.com/posts/this/is/a/tree
📝 Il existe des méthodes statiques spécifiques utilisant getStaticProps()mais dans cet article, je vais me concentrer sur l’utilisation d’Astro comme framework dynamique.
Points de terminaison
Vous pouvez également créer des points de terminaison dynamiques comme d’autres frameworks SSR.
// src/pages/api/urn:uuid:4b595b84-be22-49d5-9ad6-9874fe226eac.json.ts
import type { APIRoute } from 'astro';
const usernames = ["Sarah", "Chris", "Yan", "Elian"]
export const GET: APIRoute = ({ params, request }) => {
const id = params.id;
return new Response(
JSON.stringify({
name: usernamesurn:uuid:4b595b84-be22-49d5-9ad6-9874fe226eac
})
)
}
Actes
Les actions de formulaire sont relativement nouvelles dans Astro, mais elles fonctionnent comme prévu.
// some-page.astro
---
import { actions } from "astro:actions";
---
<form name="greetingForm" action={actions.greet} class="flex flex-col gap-3">
<input
class="..."
name="name"
placeholder="Your name..."
/>
<Button color="orange" type="submit">Get greeting</Button>
</form>
La clé consiste à ajouter manuellement le HTML.
<script>
import { actions } from "astro:actions";
const form = document.forms.namedItem("greetingForm")!;
form.onsubmit = async (event) => {
event.preventDefault();
const formData = new FormData(form);
const { data, error } = await actions.greet(formData);
if (!error) alert(data);
};
</script>
Réactivité
La réactivité se fait uniquement côté client. Cela signifie que vous devez utiliser script balises séparées du Script du composant Astro.
Obtenir des éléments du document
N’oubliez pas et pratiquez les techniques JS pures pour éviter d’importer Vue, Svelte, React ou d’autres fichiers de framework.
// getting a form element directly returns type HTMLFormElement
const form = document.forms.namedItem('formName')!;
// get other items
const counterSpan = document.getElementById("counterSpan")!;
// notice the null assertions... we assume the items exist
Éléments cliquables
Une façon de gérer les événements de clic consiste à utiliser onclick.
<Button onclick="increment()">Increment</Button>
Cependant, vous ne pouvez pas appeler increment() directement dans votre scriptvous devez le déclarer sur l’objet window.
window.increment = () => {
// handle increment on click
};
Cela vous obligera également à ajouter une fonction d’incrémentation globale à l’objet window dans TS.
// env.d.ts
declare global {
interface Window {
increment: () => void
}
}
export { };
📝 Pensez à exporter quelque chose pour que le TS soit disponible partout dans votre application.
Même si tu peux obtenir onclick pour travailler de cette façon, ce n’est pas nécessairement mieux que d’utiliser un gestionnaire d’événements.
// method 2
const counterButton = document.getElementById("counterButton")!;
counterButton.onclick = () => {
// handle increment
};
// OR method 3
const increment = () => {
// handle increment
};
counterButton3.addEventListener("click", increment);
// removing onclick is not always necessary, but good practice
window.addEventListener("beforeunload", () => {
counterButton.removeEventListener("click", increment);
// OR
counterButton.removeAttribute('onclick');
// OR
counterButton.onclick = null;
});
Mise à jour du DOM
Si la mise à jour du DOM sur le serveur est extrêmement simple, elle nécessite plus de contrôle en JS pur.
<span id="my-text">Some Text</span>
<script>
const spanEl = document.getElementById('my-text')!;
spanEL.textContent = 'Some New Text';
</script>
Variables réactives
Astro vous recommande d’utiliser nanostoresun petit pack basé sur des signaux, pour gérer les variables réactives qui changent.
npm i nanostores
Voici un compteur simple.
export const useCounter = () => {
const _counter = atom(0);
return {
increment: () => {
_counter.set(_counter.get() + 1);
},
atomCounter: _counter
};
};
Encapsuler des variables dans des fonctions comme celle-ci est une bonne pratique, car vous avez un meilleur contrôle sur ce qui est disponible.
<span id="counterSpan">0</span>
<script>
import { useCounter } from "./use-counter";
const counter = useCounter();
const counterSpan = document.getElementById("counterSpan")!;
window.onbeforeunload = counter.atomCounter.subscribe((count) => {
counterSpan.textContent = count.toString();
});
</script>
Vous pouvez utiliser le code compteur autant de fois que vous le souhaitez en important le useCounter fonction. Vous devez souscrire aux modifications apportées au atom et mettre à jour le textContent chaîne.
export const sharedCounter = useCounter();
Pour tout état partagé, vous devez exporter la variable directement dans un fichier externe .ts déposer.
Quand NE PAS utiliser Vanilla Astro
Vous pouvez toujours utiliser un .astro fichier pour tout, mais plus votre réactivité est complexe, plus l’écriture de JavaScript vanille peut devenir difficile. Les frameworks comme Svelte et SolidJS sont optimisés pour ces cas d’utilisation et sont compilés pour mettre à jour uniquement les éléments modifiés nécessaires. Par exemple, une liste de tous les éléments n’ont pas besoin d’être mis à jour à chaque fois qu’il y a des changements. Il devrait y avoir une réactivité fine à appendChild, removeChildetc., pour uniquement les modifications tous éléments à l’intérieur des balises HTML modifiées. Bien que toujours possible avec JS, l’expérience du développeur sera meilleure avec un composant Svelte ou SolidJS.
Meilleure utilisation
Astro est mieux utilisé avec une combinaison de tous les frameworks. Si vous souhaitez utiliser la merveilleuse fonctionnalité SSR d’Astro et avez besoin de très peu de réactivité, utilisez vanilla Astro. Utilisez un composant Svelte ou SolidJS si vous avez besoin d’une réactivité complexe pour certaines routes. Si vous devez utiliser un package personnalisé disponible uniquement pour React, vous devrez peut-être utiliser un composant React pour cette route.
Astro est extrêmement polyvalent et peut être utilisé par tous les développeurs JavaScript. Vanilla Astro s’adresse à ceux qui souhaitent optimiser.
Source link