2. #JugSummerCamp Rendez-moi mon front !
Qui suis-je ?
Olivier THIERRY
Expert technique chez ASI
@OThierryBzh
ASI
www.asi.fr
@ASI_Groupe
3. #JugSummerCamp Rendez-moi mon front !
Au programme …
● Pendant longtemps, la solution pour le web : générer les pages côté
serveur, utilisation Javascript à la marge
● Fin des années 2000, évolution vers des applications web s’appuyant
fortement sur Javascript
○ Progrès de Javascript (ES6, performances côté client)
■ En particulier apparition de Chrome en 2008
○ Javascript côté serveur : Node.js (2009)
○ APIsation des systèmes d’information
● Beaucoup d’activité dans les modes de rendu front ces dernières années :
CSR, SSR, SSG, ISR, Islands Architecture, Server Components, …
4. #JugSummerCamp Rendez-moi mon front !
Multi Page Application
Client Serveur Web Data / Session
/index
HTML + CSS + JS
/page1
HTML + CSS + JS
5. #JugSummerCamp Rendez-moi mon front !
Multi Page Application
● Intérêts
○ Peu d’exigences côté client
○ Chargement initial rapide
○ Bien pour le SEO
● Inconvénients
○ Expérience utilisateur médiocre
■ Manque de fluidité dans la navigation
○ Complexité de l’hébergement
■ Charge importante côté serveur
■ Gestion des sessions côté serveur
○ Complexité du développement front
6. #JugSummerCamp Rendez-moi mon front !
Single Page Application
● Principes
○ Une page HTML unique pour charger une application Javascript
■ Construction du HTML en Javascript côté client
■ Navigation côté client par remplacement de fragments de page
■ Récupération des données par des appels Ajax à des API (REST,
GraphQL, SOAP), de préférence stateless
■ Sessions côté client
○ En Javascript de base (Vanilla) ou le plus souvent avec un framework
ou une librairie UI (React, Angular, Vue, Svelte, …)
7. #JugSummerCamp Rendez-moi mon front !
Client Side Rendering
Client Serveur HTTP API
/index
/data
CSS + JS
JSON, XML
/page1
Fragment
Fragment
9. #JugSummerCamp Rendez-moi mon front !
Client Side Rendering
● Intérêts
○ Bonne expérience utilisateur
■ Richesse de l’UI
■ Fluidité de navigation
○ Hébergement
■ Serveurs moins sollicités
■ Hébergement simple et peu coûteux
■ Bonne montée à l’échelle
○ Bonne séparation front / back
10. #JugSummerCamp Rendez-moi mon front !
Client Side Rendering
● Inconvénients
○ Pénalisant pour le SEO
○ Temps de démarrage initial de l’application
○ Javascript nécessaire et parfois lourd
○ Charge déportée côté client
○ Complexités dans le développement
■ Navigation, état / session, appels de service, …
11. #JugSummerCamp Rendez-moi mon front !
Client Side Rendering
● Bilan du CSR
○ Très bien adapté dans le cadre d’une application web
métier
○ Pas adapté pour un site web public
○ Et l’expérience utilisateur dans tout ça ?
■ Dommage de se passer des avantages d’une SPA !
○ Les dernières technos de rendu front permettent d’y
parvenir !
12. #JugSummerCamp Rendez-moi mon front !
Server Side Rendering
Client Serveur Node API
/index
HTML + CSS + JS
/data
JSON, XML
/page1
HTML + CSS + JS
/data
JSON, XML
13. #JugSummerCamp Rendez-moi mon front !
Server Side Rendering
● C’est comme du PHP, non ?
● Oui, mais
○ Approche composant
○ Même technologie côté serveur et côté client
○ Transformation en SPA après le chargement de la page
initiale : réhydratation
○ Application SSR : SPA dont la page initiale (point d’entrée de
l’utilisateur) est pré-rendue côté serveur
14. #JugSummerCamp Rendez-moi mon front !
Server Side Rendering
Client Serveur Node API
/index
HTML + CSS + JS
/data
JSON, XML
/page1
JSON
/data
JSON, XML
Réhydratation
Fragment
16. #JugSummerCamp Rendez-moi mon front !
Server Side Rendering
● Intérêts
○ Bon pour le SEO
○ Performances initiales
○ Bonne expérience utilisateur
● Inconvénients
○ Quelques complexités de codage
■ Utiliser du JS « isomorphic »
■ Réhydratation = page identique côté client et serveur
○ Compatibilité des librairies
○ On retrouve un peu de charge serveur
17. #JugSummerCamp Rendez-moi mon front !
Static Site Generation
Client Serveur HTTP API
/index
HTML + CSS + JS
/data
JSON, XML
/page1
JSON
Build
Réhydratation
Fragment
Construction
des pages
statiques
18. #JugSummerCamp Rendez-moi mon front !
Static Site Generation
● Intérêts
○ Le top pour le SEO
○ Hébergement simple (statique)
○ Performances (statique)
○ Bonne pratique d’éco-conception
○ Bien adapté aux sites dont le contenu est majoritairement statique
● Inconvénients
○ À chaque modification de donnée on rebuilde l’ensemble du site
■ Risques de temps de build importants
○ Pas adapté à toutes les applications et tous les sites
○ Même contenu pour tous les utilisateurs
20. #JugSummerCamp Rendez-moi mon front !
Incremental Static Regeneration
Client Serveur Node API
/pageX
HTML + CSS + JS
/data
JSON, XML
Build
déploiement
regénération
/data
JSON, XML
Déploiement unitaire
21. #JugSummerCamp Rendez-moi mon front !
Incremental Static Regeneration
● Optimisation du rendu SSG
○ Les pages sont générées de manière statique au build
○ Mais chaque page peut ensuite être regénérée puis redéployée
unitairement
■ Sans reconstruire l’ensemble du site
■ De manière périodique
● Expiration de la page en cache
■ À la demande
● Requête émise vers le système de build, par exemple sur un hook de CMS
25. #JugSummerCamp Rendez-moi mon front !
Bilan de ces technologies
● Permettent de développer
○ Des sites web avec les bénéfices des SPA
■ Bonne expérience utilisateur
○ Des applications web performantes
● Mais cela a un coût
○ Beaucoup de Javascript
○ Défauts de la réhydratation
■ Délai avant que la page soit « réactive »
■ Les librairies utilisées côté serveur doivent être incluses dans les
bundles Javascript
26. #JugSummerCamp Rendez-moi mon front !
Islands Architecture
● Principe
○ Composants « statiques », rendus
côté serveur (SSR ou SSG)
○ Certains composants
« dynamiques », rendus côté client :
des ilots
■ Pré-rendu côté serveur puis
réhydratation partielle de ces ilots
■ Seuls ces composants ont besoin
de Javascript côté client
28. #JugSummerCamp Rendez-moi mon front !
Islands Architecture
● Intérêts
○ Se passer au maximum de Javascript
■ Voire pas du tout de Javascript !
○ Réduire l’impact de la réhydratation
○ Très bien adapté aux sites avec beaucoup de contenu statique (blogs,
catalogues, …)
● Inconvénients
○ Techno encore jeune
○ Ce n’est pas une SPA
29. #JugSummerCamp Rendez-moi mon front !
React Server Components
● SSG / SSR / CSR pour les
composants
○ Composants pré-rendus côté
serveur (SSG ou SSR)
■ Chargement de données
■ Traitements complexes
○ Composants rendus côté client
■ Interactions avec
l’utilisateur
■ Opérations utilisant les
ressources du browser
31. #JugSummerCamp Rendez-moi mon front !
React Server Components
● Intérêts
○ Restriction des traitements coûteux aux composants serveurs
○ Réduction du Javascript envoyé au client
○ Réhydratation en « mode concurrent »
○ Souplesse dans la création des pages : on peut mélanger
différents types de composants, les mieux appropriés au
besoin
○ Bonne expérience développeur
33. #JugSummerCamp Rendez-moi mon front !
React Server Components
● Inconvénients
○ Technologie encore jeune
○ Uniquement dans l’écosystème React aujourd’hui et
uniquement sur Next.js
○ Compatibilité des librairies
○ Risque de complexité architecturale
34. #JugSummerCamp Rendez-moi mon front !
Conclusion
● Les SPA ont été une réelle avancée pour les utilisateurs et les
développeurs
● Mais on est allé trop loin dans le rendu côté client et on embarque
trop de Javascript sur le client !
● Aujourd’hui la tendance est au retour vers le rendu côté serveur
(pages et composants)
● Mais avec des outils plus modernes, dédiés au développement
front, qui améliorent l’expérience utilisateur et développeur