1---
  2title: Rendering & NextJS
  3theme: ./_themes/5ika.css
  4highlightTheme: github
  5verticalSeparator: <!--v-->
  6revealOptions:
  7  transition: 'fade'
  8---
  9
 10# Rendering & NextJS
 11
 12---
 13
 14De base, React (et alt.) fonctionne avec le principe du **Client-Side Rendering** (CSR):
 15
 16Le serveur envoi un fichier HTML simpliste et un bundle Javascript. Le navigateur génère ensuite toute l’app React côté client.
 17
 18---
 19
 20![CSR](./img/client-side-rendering.png)
 21
 22---
 23
 24**Avantages**
 25- Toute l’app tient dans quelques fichiers HTML+CSS+JS statiques qui peuvent être servis par tout serveur Web car la logique est côté frontend.
 26- Facilité de faire des webapps qui fonctionnent en mode offline
 27
 28**Inconvénients**
 29
 30- Difficile voir impossible pour les indexeurs (Google, DuckDuckGo,...) et les réseaux sociaux de lire les méta-données et le contenu car il faut générer toute l’app React pour avoir le contenu.
 31- Sur des systèmes lents, on a un effet de page blanche le temps que le navigateur lise et interprète le JS.
 32
 33---
 34
 35# Frameworks
 36
 37- React "Vanilla"
 38- [ViteJS](https://vitejs.dev/)
 39
 40---
 41
 42Le **Server-side Rendering** (SSR) consiste à utiliser un serveur pour interpréter le React et générer du HTML côté backend.
 43
 44Ainsi, on peut envoyer directement du contenu et des méta-données au client, dès la première requête.
 45
 46Le navigateur peut donc rapidement afficher le visuel du site (HTML+CSS) puis ajouter l'interactivité en interprétant le JS dans un second temps.
 47
 48---
 49
 50![SSR](./img/server-side-rendering.png)
 51
 52---
 53
 54**Avantages**
 55- Meilleures performances car le travail est fait par le backend essentiellement
 56- Meilleure SEO 
 57
 58**Inconvénients**
 59
 60- Nécessaire de faire tourner un serveur pour générer les pages (plus complexe qu'un serveur Web)
 61
 62---
 63
 64# Frameworks
 65
 66- [NextJS](https://nextjs.org/)
 67- [Remix](https://remix.run/)
 68
 69---
 70
 71Le **Static-Site Generation** (SSG) est une méthode qui croise les 2 précédentes:
 72
 73On pré-génère les pages HTML et le code JS minimal, non pas à chaque requête d’un client, mais dans une étape de build.
 74
 75---
 76
 77![SSG](img/static-site-generation.png)
 78
 79---
 80
 81**Avantages**
 82- On peut utiliser un serveur Web simple (pas de “serveur frontend”) car on a uniquement des fichiers HTML+CSS+JS
 83- On renvoi des pages HTML lisibles par les indexeurs et les navigateurs (SEO)
 84
 85**Inconvénients**
 86- Ce n’est pas pratique quand on a du contenu qui bouge souvent car il faut regénérer l’ensemble à chaque modification ou faire des trucs pas propres
 87- C’est impossible à utiliser pour des pages nécessitant une authentification ou des données dynamiques
 88
 89---
 90
 91# Frameworks
 92
 93- [NextJS](https://nextjs.org/)
 94- [Gatsby](https://www.gatsbyjs.com/)
 95- [Astro](https://astro.build/)
 96
 97---
 98
 99**Démo**: SSR et SSG avec NextJS
100
101> Cette manière de faire est en train d'être remplacée mais beaucoup de projets fonctionnent encore comme cela.
102
103---
104
105# Server Components
106
107Depuis cette année, la nouvelle manière de faire du React est d'utiliser
108des *Server Components* (SC).
109
110C'est une manière de faire du SSR ou du SSG de manière propre et officielle.
111
112---
113
114## Comment ça fonctionne ?
115
116On distingue deux types de composants:
117
118- Les *Client Components*, que l'on connaît déjà et qui sont executés au niveau du navigateur Web
119- Les *Server Components*, qui sont executés côté serveur (NodeJS)
120
121---
122
123## Pourquoi les Server Components ?
124
125Comme le code des SC est exécuté côté serveur, ils ont d'autres caractéristiques:
126
127- Possible de faire des appels à une base de données, utiliser des secrets sans que le client ait accès
128- Certains modules externes sont utilisés uniquement côté serveur et n'alourdissent pas le code envoyé au client
129- **Pas possible d'utiliser les hooks** car ils sont faits pour intéragir avec l'UI
130- On peut utiliser async / await directement dans notre composant
131
132---
133
134<center>
135
136![](img/SC%20vs%20CC.png)
137
138</center>
139
140---
141
142![](https://nextjs.org/_next/image?url=%2Fdocs%2Fdark%2Fthinking-in-server-components.png&w=1920&q=75&dpl=dpl_D3xw4qGQxUxVjVbKQoy1MVX3DPRZ)
143
144---
145
146
147En utilisant correctement les *Server* Components et les *Client* Components dans notre app,
148on augmente grandement les performances:
149
150- Les SC génèrent du code HTML / CSS, un peu comme on le fait avec PHP
151- Seul le code JS utile (correspondant aux CC) est envoyé au navigateur
152
153---
154
155# NextJS
156The React Framework for the Web
157
158---
159
160NextJS est le framework React le plus complet et le plus utilisé aujourd'hui.
161
162Il permet de faire du SSG, SSR, ISR et s'est orienté récemment
163vers l'utilisation des Server Components avec un remaniement complet.
164
165---
166
167## Créer un projet NextJS
168
169```bash
170npx create-next-app@latest
171```
172
173```
174What is your project named? my-app
175Would you like to use TypeScript with this project? No
176Would you like to use ESLint with this project? Yes
177Would you like to use Tailwind CSS with this project? Yes
178Would you like to use `src/` directory with this project? Yes
179Use App Router (recommended)? Yes
180Would you like to customize the default import alias? Yes
181```
182
183---
184
185NextJS a un système de routage puissant:
186
187- Chaque fichier `page.jsx` dans le dossier `app/` correspond à une page
188- On peut organiser ces pages en dossiers pour définir une arborescence
189- Au niveau de chaque dossier, on peut définir des fichiers `layout.jsx` qui
190  encadrent les pages contenu dans le même dossier et ses sous-dossiers.
191
192![](https://nextjs.org/_next/image?url=%2Fdocs%2Fdark%2Froute-segments-to-path-segments.png&w=1920&q=75&dpl=dpl_D3xw4qGQxUxVjVbKQoy1MVX3DPRZ)
193
194---
195
196![](https://nextjs.org/_next/image?url=%2Fdocs%2Fdark%2Fnested-file-conventions-component-hierarchy.png&w=1920&q=75&dpl=dpl_D3xw4qGQxUxVjVbKQoy1MVX3DPRZ)
197
198---
199
200# Server Components & Client Components
201
202Par défaut, tous les composants sont des Server Components.
203
204Quand on veut faire un Client Component, on ajoute `'use client'`
205à la toute première ligne du fichier.
206Ainsi, le composant et tous ses descendants seront rendus
207sur le client plutôt que le serveur.
208
209---
210
211## Server Component
212
213```javascript
214import Item from "./Item";
215
216export default async function Home() {
217  const response = await fetch("https://rickandmortyapi.com/api/character");
218  const { results = [] } = await response.json();
219
220  console.log(results); // Uniquement dans le terminal
221
222  return (
223    <main>
224      {results?.map(character => (
225        <Item character={character} key={character.id} />
226      ))}
227    </main>
228  );
229}
230```
231
232---
233
234## Client Component
235
236```javascript
237"use client";
238
239import { useState } from "react";
240
241function Item({ character }) {
242  const [clicked, setClicked] = useState(false);
243  const style = clicked ? "p-2 text-sky-400" : "p-2 cursor-pointer";
244
245  console.log({clicked}); // Dans la console du nav
246
247  return (
248    <div className={style} onClick={() => setClicked(true)}>
249      {character.name}
250    </div>
251  );
252}
253
254export default Item;
255```
256
257---
258
259# Routes dynamiques
260
261Il est possible de gérer des routes avec une ou plusieurs parties
262correspondants à un paramètre.
263
264Par exemple, faire en sorte que `/species/Human` et `/species/Alien`
265correspondent à la même page mais avec une props `kind` qui vaut
266`Human` ou `Alien`.
267
268Pour cela, on nomme les dossiers avec des `[]` pour définir les paramètres.
269Par exemple, la page qui permettra de gérer cela aura le chemin
270`src/app/species/[kind]/page.jsx`.
271
272---
273
274## Paramètre de route dynamique
275
276```javascript
277export default function Page({ params }) {
278  const response = await fetch(
279  `https://rickandmortyapi.com/api/character/?species=${params.kind}`);
280  const { results = [] } = await response.json();
281
282  return <div>
283    <h1>Liste des {params.kind}</h1>
284    ...
285  </div>
286}
287```
288
289---
290
291# Variables d'environnement
292
293Toutes les variables définies dans un fichier `.env` ou `.env.local`
294sont chargées par NextJS.
295
296- Les *Server* Components peuvent récupérer toutes les variables d'env.
297- Les *Client* Components peuvent uniquement récupérer les variables qui commencent par `NEXT_PUBLIC_`
298
299Cela permet de gérer proprement les secrets.
300
301---
302
303```javascript
304const {DATABASE_PASSWORD} = process.env;
305const NEXT_PUBLIC_API_KEY = process.env.NEXT_PUBLIC_API_KEY;
306```
307
308---
309
310# Travail pratique
311
312En équipe sur le Gitpod, développé une app simpliste permettant de:
313
314- Afficher la météo pour Genève quand on arrive sur la page
315- Entrer le nom d'une ville ou une adresse pour laquelle afficher la météo
316
317Pour cela, plusieurs tâches sont nécessaires:
318- Développer une fonction pour récupérer la météo depuis https://open-meteo.com/
319- Développer une fonction pour récupérer la latitude/longitude d'une ville ou d'une adresse (OpenStreetMap)
320- Développer le composant qui affiche la météo d'une ville
321- Générer le composant qui affiche le formulaire pour entrer du texte
322- Probablement +