- Cours pratique
- Informatique
Formation Astro JS : Développez des sites web modernes, rapides et ultra-optimisés
Apprenez à créer des sites web performantes avec le framework JavaScript moderne
- Durée
- 3 jours
- Niveau
- Intermédiaire
- Modalités
- Présentiel / Distanciel
Description de la formation Astro JS
Qu'est-ce que la formation Astro JS ?
Astro est un framework JavaScript moderne conçu pour développer des sites web rapides, statiques ou dynamiques, tout en utilisant une syntaxe simple et des composants issus de plusieurs bibliothèques front-end. Sa philosophie repose sur le principe « Island Architecture », rendant les sites plus performants et moins dépendants du JavaScript côté client.
Pourquoi suivre une formation Astro JS ?
Astro JS est aujourd’hui l’un des frameworks les plus prometteurs pour le développement web moderne. Il permet aux développeurs de produire des sites rapides, facilement indexables, tout en optimisant les performances SEO et l'expérience utilisateur. Cette formation est idéale pour les professionnels du web souhaitant maîtriser une technologie à la fois performante, intuitive et compatible avec des outils comme React, Vue ou Svelte.
Objectifs pédagogiques
Objectifs pédagogiques :
À l'issue de cette formation Astro JS, vous aurez acquis les connaissances et compétences nécessaires pour :
- Comprendre les fondamentaux et l’architecture d’Astro
- Créer des composants Astro et les intégrer à des pages HTML
- Utiliser des composants React, Vue ou Svelte dans Astro
- Maîtriser le routage, le rendu côté serveur (SSR) et la génération statique
- Intégrer une logique côté client de manière optimale
- Gérer les données dynamiques avec Markdown, API ou CMS
Objectifs opérationnels
Objectif opérationnel :
Savoir développer en autonomie des sites web statiques et dynamiques performants avec le framework Astro.
Programme
Contenu du cours, module par module
6 modules
- Présentation du framework Astro et de ses principes clés (Island Architecture, rendu statique).
- Comparaison avec d'autres frameworks (Next.js, Nuxt, SvelteKit...).
- Installation de Node.js, Astro CLI et création d’un premier projet.
- Structure de fichiers et compréhension du fichier astro.config.mjs.
- Pourquoi Astro est-il particulièrement performant sur le plan SEO et UX ?
- Introduction aux fichiers .astro et à la structure du code.
- Création de composants réutilisables.
- Injection de données via frontmatter et scripts set:html.
- Ajout de styles scoped et gestion des assets.
- Comment séparer la logique serveur et client dans Astro ?
Travaux pratiques
Description : Mise en place d’un projet avec une page d’accueil composée de plusieurs composants Astro réutilisables. Validation par rendu dans l’environnement de développement local.
- Comprendre la logique de routage basée sur le dossier pages.
- Création de pages statiques et dynamiques avec paramètres ([slug].astro).
- Mise en place d’une navigation entre pages avec <a> et <Astro.client>.
- Utilisation de layouts globaux pour mutualiser des blocs HTML.
- Quelles sont les bonnes pratiques pour une navigation fluide dans Astro ?
- Installation de bibliothèques externes via @astrojs/renderer-*.
- Importation et affichage de composants issus d’autres frameworks.
- Utilisation des directives client:load, client:idle, client:visible.
- Bonnes pratiques de performance avec les composants interactifs.
- Pourquoi utiliser Astro comme "meta-framework" multi-librairies ?
Travaux pratiques
Description : Création d’un mini-site avec pages dynamiques, menu de navigation et intégration d’un composant React (ou autre). Validation par test fonctionnel du site.
- Lecture de contenu depuis des fichiers Markdown avec Astro.glob.
- Utilisation de JSON local pour alimenter des composants.
- Requêtes vers des API tierces côté serveur.
- Affichage conditionnel et génération de routes dynamiques.
- Comment Astro permet-il de gérer un blog ou un site de documentation ?
- Préparation au déploiement sur Vercel, Netlify, GitHub Pages.
- Introduction aux directives getStaticPaths et getStaticProps.
- Bonnes pratiques de SEO avec balises méta et chargement progressif.
- Optimisation des performances : lazy loading, script splitting, minification.
- Quelles sont les étapes pour publier un site Astro professionnellement ?
Travaux pratiques
Description : Création d’un blog simple avec génération de pages via Markdown, intégration d’un menu dynamique, et déploiement sur Netlify. Validation par mise en ligne et test Lighthouse.
Programme mis à jour le 23/02/2026
Public concerné
Ce cours s'adresse aux développeurs web, intégrateurs, chefs de projet technique et toute personne souhaitant créer des sites performants avec des technologies modernes.
Prérequis
Une bonne maîtrise du HTML, CSS et de JavaScript sont nécessaires pour suivre cette formation. Des connaissances de base en React, Vue ou un autre framework JS faciliteraient l'assimilation des concepts avancés d'Astro.
J’évalue mes connaissances pour vérifier que je dispose des prérequis nécessaires pour profiter pleinement de cette formation en faisant le test de prérequis.
Faire le testFinancement
Cette formation peut être prise en charge par votre entreprise, seule ou avec l’appui de son opérateur de compétences. Nous fournissons le devis et les pièces attendues par l’OPCO.
Formations liées
- Bootstrap : L'essentielRéf. BOOT2 joursFondamentalProchaine session : 12 nov.1 590 €
- Créer des CSS dynamiques avec SassRéf. SECP2 joursIntermédiaireProchaine session : 14 déc.1 590 €
- Deno, runtime moderne et sécurisé pour JavaScript et TypeScriptRéf. DENO3 joursIntermédiaireProchaine session : 25 nov.2 090 €
- Développement d’applications web front-end avec JavaScript - Présentation des frameworks Open SourceRéf. IJSO15 joursIntermédiaireProchaine session : 12 oct.3 050 €