Slides de ma conférence "Rendez-moi mon front" au JUG Summercamp de La Rochelle le 8 septembre 2023.

1. Speaker : Olivier THIERRY - @OThierryBzh
Rendez-moi mon front !

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

8. #JugSummerCamp Rendez-moi mon front !
Client Side Rendering
Démo

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

15. #JugSummerCamp Rendez-moi mon front !
Server Side Rendering
Démo

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

19. #JugSummerCamp Rendez-moi mon front !
Static Site Generation
Démo

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

22. #JugSummerCamp Rendez-moi mon front !
Incremental Static Regeneration
Démo

23. #JugSummerCamp Rendez-moi mon front !
Mixer les modes de rendu
Home
(SSR)
Details
(SSG)
Details
(SSG)
Details
(SSG)
Details
(SSG)
Recherche
(SSG)
Résultats
(CSR)

24. #JugSummerCamp Rendez-moi mon front !
Solutions

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

27. #JugSummerCamp Rendez-moi mon front !
Islands Architecture
Démo

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

30. #JugSummerCamp Rendez-moi mon front !
React Server Components
Démo

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

32. #JugSummerCamp Rendez-moi mon front !
React Server Components

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

35. #JugSummerCamp Rendez-moi mon front !
Liens
● Repo Github : https://github.com/chawax/render-my-front
● Next.js : https://nextjs.org/
● Astro : https://astro.build/
● Gatsby : https://www.gatsbyjs.com/
● Nuxt : https://nuxt.com/
● SvelteKit : https://kit.svelte.dev/
● Analog : https://analogjs.org/

36. @OThierryBzh
Merci !