Next.js à la rescousse de mon frontend !

Comment moderniser un frontend PHP/jQuery vers Next.js

Transcript

1. Next.js à la rescousse de mon frontend ! Nordwin HOFF
2. Nordwin HOFF Senior Frontend Developer @dedalusium dedalusium dedalusium
4. Timeline
5. 2014 premières lignes de code PHP/Symfony/JQuery 2018 React (+ SSR custom symfony) 2020 Next.js 5
6. D'où part-on ?
7. Un mono-repository Un monolithe + 7
8. Browser twig templates + Page A Page B Server 8
9. Un équipe back qui fait beaucoup de choses 9
10. 20GB of RAM 15min build VPN AWS credentials 10
11. 20GB of RAM 15min build VPN AWS credentials 11
12. 1.5GB of RAM  1min build Client API 12
13. 1.5GB of RAM Client API  1min build 13
14. Browser Monolith Server REST API ?? ?? Server 14
16. Les besoins
17. Analytics/Tracking SEO Internationalisation (i18n) Webperf Web Core Vitals Accessibilité (a11y) UX Design system Atomic Design Live reload Time To Market GTM Compatible Code base existante (React) 17
18. Analytics/Tracking SEO Internationalisation (i18n) Webperf Web Core Vitals Accessibilité (a11y) UX Design system Atomic Design Live reload Time To Market GTM Compatible Code base existante (React) 18
19. Analytics/Tracking SEO Internationalisation (i18n) Webperf Web Core Vitals Accessibilité (a11y) UX Design system Atomic Design Live reload Time To Market GTM Compatible Code base existante (React) 19
20. Analytics/Tracking SEO Internationalisation (i18n) Webperf Web Core Vitals Accessibilité (a11y) UX Design system Atomic Design Live reload Time To Market GTM Compatible Code base existante (React) 20
21. Analytics/Tracking SEO Internationalisation (i18n) Webperf Web Core Vitals Accessibilité (a11y) UX Design system Atomic Design Live reload Time To Market GTM Compatible Code base existante (React) 21
22. Analytics/Tracking SEO Internationalisation (i18n) Webperf Web Core Vitals Accessibilité (a11y) UX Design system Atomic Design Live reload Time To Market GTM Compatible Code base existante (React) 22
24. Pourquoi Next.js ?
25. React redux react-i18next Styled component 25
26. npm install + npm run dev - Setup Webpack 5 - React + Typescript - Fast refresh + hot module replacement - ESlint nextjs + core web vitals 26
27. npm run build + npm start - SSR / SSG / ISR - SPA - Routing (+ internationalization) - Code splitting / Lazy-loading - Prefetching - Image optimization - Polyfills - AMP 27
28. Gratuit + Open-source 28
29. Comment gérer la codebase existante ?
30. Option 1
31. Shared-lib Next.js React Monolith npm install npm install 31
32. Shared-lib Next.js React Monolith npm install npm install 32
33. Option 2
34. Shared-lib directory Next.js directory React Monolithe directory module resolution module resolution 34
35. Shared-lib directory Next.js directory React Monolithe directory module resolution module resolution 35
36. Option 3
37. Next.js directory React Monolithe directory 37
38. Next.js directory React Monolithe directory 38
39. Qu’est-ce qui change ?
41. - Lib tiers compatible SSR - Attention à l’utilisation de “window” ou “document” Pas d’appels bloquants Blocking calls) 41
42. - Composant intégrés: <Img/>, Link />, Script />, Head />... - Examples: https://github.com/vercel/next.js/tree/canary/ examples 42
43. Code GetStaticProps Static Bundle DB API build deploy Static Site Generation 43
44. Routeur Pages statiques API Routes Pages dynamiques API routes requête http 44
45. On ajoute un serveur Node.js 45
46. Par quoi commencer ?
50. Requêter des données
51. (Static Site Generation / Incremental Static Regeneration) - Rapidité d'exécution - Pour des pages edito/contributives - Générées au build - Temps de build augmentés - Pas de personnalisation par utilisateur Au build 51
52. Pas (ou Peu) applicable sur GensDeConfiance 52
53. Server Side Rendering - Optimisation SEO - Pas de layout shift - First Interaction Delay (FID  élevé - Charge CPU côté serveur - Cache HTTP compliqué - Aucune possibilité UX à l’affichage Coté serveur 53
54. Client Side Rendering - Cache HTTP simple - Serveur très peu sollicité - Possibilité UX de gestion d’affichage - Layout shift dépend de l’implémentation - SEO lent Coté client 54
55. Choix spécifique à chaque use-case 55
56. Tout ça pour 1 page. 56
57. Navigation & Localisation
58. Arborescence dossier “pages” pages/ |___ index.tsx |___ error.tsx |___ classifieds |___ [id].tsx Plan du site pages pages/error pages/classifieds pages/classifieds/2421 58
59. Chargement initial SSR Puis navigation SPA Link /> router.push() Détection de la locale navigateur Forçage de la locale via un prefix (ex: https://gensdeconfiance/fr ⇒ locale fr) Mapping (prefix;locale) configurable 59
60. Chargement initial SSR Puis navigation SPA Link /> router.push() Détection de la locale navigateur Forçage de la locale via un prefix (ex: https://gensdeconfiance/fr ⇒ locale fr) Mapping (prefix;locale) configurable 60
61. Chargement initial SSR Puis navigation SPA Link /> router.push() Détection de la locale navigateur Forçage de la locale via un prefix (ex: https://gensdeconfiance/fr ⇒ locale fr) Mapping (prefix;locale) configurable 61
62. Chargement initial SSR Puis navigation SPA Link /> router.push() Détection de la locale navigateur Forçage de la locale via un prefix (ex: https://gensdeconfiance.com/fr ⇒ locale fr) Mapping (prefix;locale) configurable 62
63. En cas de liens externes <a href={‘’Mon lien</a> 63
64. Redirections
65. Coté serveur pour avoir un effet immédiat Possible côté client uniquement après le premier render Fonctionne en SPA getServerSideProps exécuté à chaque changement de route Sans logique custom, Next.js “Redirects” 65
66. Coté serveur pour avoir un effet immédiat Possible côté client uniquement après le premier render Fonctionne en SPA getServerSideProps exécuté à chaque changement de route Sans logique custom, Next.js “Redirects” 66
67. Coté serveur pour avoir un effet immédiat Possible côté client uniquement après le premier render Fonctionne en SPA getServerSideProps exécuté à chaque changement de route Sans logique custom, Next.js “Redirects” 67
68. Coté serveur pour avoir un effet immédiat Possible côté client uniquement après le premier render Fonctionne en SPA getServerSideProps exécuté à chaque changement de route Sans logique custom, Next.js “Redirects” 68
69. Coté serveur pour avoir un effet immédiat Possible côté client uniquement après le premier render Fonctionne en SPA getServerSideProps exécuté à chaque changement de route Sans logique custom, Next.js “Redirects” 69
70. La Localisation
71. Traductions compatibles SSR Integration custom (react-i18next seul) next-i18next next-translate 71
72. Attention Lazy loading des traductions par page Traduction coté serveur également (get[ServerSide|Statics]Props) Compatible SSG/SSR 72
73. Traduction d’URL Ne faites pas ça Utilisez votre infra Reverse proxy “interne” Next.js “Rewrites” 73
74. Source === URL navigateur Destination === arborescence file system 74
75. C’est bon ? 75
77. Browser Monolith Server REST API Server 77
78. Browser Monolith Server REST API Server 78
80. Browser Stateful twig Page + API 5x ALB Cloudfront 80
81. Problèmes
82. Comment je gère l’authentification ? La preuve est contenue dans le session cookie Comment je gère l’analytics ? 2 données d’identification à partager Comment avoir des données cohérentes entre le monolithe et Next.js ? 82
83. Comment je gère l’authentification ? La preuve est contenue dans le session cookie Comment je gère l’analytics ? 2 données d’identification à partager Comment avoir des données cohérentes entre le monolithe et Next.js ? 83
84. Comment je gère l’authentification ? La preuve est contenue dans le session cookie Comment je gère l’analytics ? 2 données d’identification à partager Comment avoir des données cohérentes entre le monolithe et Next.js ? 84
85. Propager les données partagées
86. Browser Page + API 1 2 3 4 1/ Login 2/ Envoi session cookie 3/ Propagation du cookie 4/ Utilisation pour les calls API 86
87. 1/ Init si absent 2/ Envoi du cookie 3/ Propagation du cookie 4/ Ajout en header de call API Si la première page est dans le monolithe Browser Page + API 1 2 3 4 87
88. Si la première page est dans Next.js 1/ Init si absent 2/ Envoi du cookie 3/ Propagation du cookie Browser Page + API 1 2 3 88
89. SSR & Utilisateur connecté
90. Call API côté serveur sur chaque page Factorisation de code risquée Un getServerSideProps unique désactive le SSG définitivement High order function redondante si on veut le SSG Next.js ne distingue pas le mode de navigation pas de cache possible (via context ou autre) en mode SPA pas de cache sur les “page props” (shallow routing possible) Cache applicatif Node.js compliqué (et non souhaitable) 90
91. Call API côté serveur sur chaque page Factorisation de code risquée Un getServerSideProps unique désactive le SSG définitivement High order function redondante si on veut le SSG Next.js ne distingue pas le mode de navigation pas de cache possible (via context ou autre) en mode SPA pas de cache sur les “page props” (shallow routing possible) Cache applicatif Node.js compliqué (et non souhaitable) 91
92. Call API côté serveur sur chaque page Factorisation de code risquée Un getServerSideProps unique désactive le SSG définitivement High order function redondante si on veut le SSG Next.js ne distingue pas le mode de navigation pas de cache possible (via context ou autre) en mode SPA pas de cache sur les “page props” (shallow routing possible) Cache applicatif Node.js compliqué (et non souhaitable) 92
93. Call API côté serveur sur chaque page Factorisation de code risquée Un getServerSideProps unique désactive le SSG définitivement High order function redondante si on veut le SSG Next.js ne distingue pas le mode de navigation pas de cache possible (via context ou autre) en mode SPA pas de cache sur les “page props” (shallow routing possible) Cache applicatif Node.js non souhaitable 93
97. Pourquoi pas Serverless ?
98. AWS Fargate 98
99. Déploiement transparent
100. Monolithe GET /ma/page Override ? 100
101. Monolithe GET /ma/page override: false 101
102. Monolithe GET /ma/page override: true 102
103. Conflits de routes
104. URL publiques distribuées dans l’infra 104
105. CORS vs. Reverse proxy local Conflits reverse proxy / API routes 105
106. Du coup ?
107. mobile desktop Avant Après 107
108. Continuer la migration next/image next/link Intégration dans le DS / Storybook Next auth Serverless Multi frontend Vercel 108
111. Merci ! Des questions ? @dedalusium