- Référence : ASTR
- Durée : 3 jours (21h)
- Lieu : Au choix. À distance ou en présentiel, à Paris ou en Régions
2090€ HT
Choisir une date et Réserver- NEW
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
Classe à distance
Possible
Vous pouvez suivre cette formation en direct depuis votre domicile ou votre lieu de travail. Plus d'informations sur notre solution de classe à distance...
Référence
ASTR
Éligible CPF
Non
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.
Objectif opérationnel :
Savoir développer en autonomie des sites web statiques et dynamiques performants avec le framework Astro.
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
Public :
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.
Jour 1
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 ?
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 pratiquesObjectif : Créer un site statique avec des composants Astro.
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.Jour 2
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 ?
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 pratiquesObjectif : Construire un site multi-pages avec intégration de composants interactifs.
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.Jour 3
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 ?
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 pratiquesObjectif : Finaliser et déployer un site dynamique Astro.
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.
Comprendre Astro et initialiser un projet
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 ?
Syntaxe Astro et création de composants
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 pratiquesObjectif : Créer un site statique avec des composants Astro.
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.Jour 2
Gestion du routage et navigation
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 ?
Intégrer des composants React, Vue, Svelte
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 pratiquesObjectif : Construire un site multi-pages avec intégration de composants interactifs.
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.Jour 3
Données dynamiques avec Markdown, JSON et API
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 ?
Déploiement, SEO et optimisation des performances
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 pratiquesObjectif : Finaliser et déployer un site dynamique Astro.
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.
Dates et lieux
Ces formations peuvent aussi vous intéresser :
Représenter les données sous forme graphique et interactive avec Data-Driven Documents
- Niveau : Fondamental
- Référence : D3JS
Polymer JS v3
- 3 jrsRéaliser des applications web dernière génération avec Polymer JS v3
- Niveau : Intermédiaire
- Référence : PJS3
Formations Informatique
et Management
en ligne à ce jour
+
Stagiaires dans nos salles
de cours sur
l'année
%
De participants satisfaits
ou très satisfaits de nos
formations
Formateurs experts
validés par
PLB
