---
title: Rendering & NextJS
theme: ./_themes/5ika.css
highlightTheme: github
verticalSeparator:
revealOptions:
transition: 'fade'
---
# Rendering & NextJS
---
De base, React (et alt.) fonctionne avec le principe du **Client-Side Rendering** (CSR):
Le serveur envoi un fichier HTML simpliste et un bundle Javascript. Le navigateur génère ensuite toute l’app React côté client.
---
---
**Avantages**
- 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.
- Facilité de faire des webapps qui fonctionnent en mode offline
**Inconvénients**
- 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.
- Sur des systèmes lents, on a un effet de page blanche le temps que le navigateur lise et interprète le JS.
---
# Frameworks
- React "Vanilla"
- [ViteJS](https://vitejs.dev/)
---
Le **Server-side Rendering** (SSR) consiste à utiliser un serveur pour interpréter le React et générer du HTML côté backend.
Ainsi, on peut envoyer directement du contenu et des méta-données au client, dès la première requête.
Le navigateur peut donc rapidement afficher le visuel du site (HTML+CSS) puis ajouter l'interactivité en interprétant le JS dans un second temps.
---
---
**Avantages**
- Meilleures performances car le travail est fait par le backend essentiellement
- Meilleure SEO
**Inconvénients**
- Nécessaire de faire tourner un serveur pour générer les pages (plus complexe qu'un serveur Web)
---
# Frameworks
- [NextJS](https://nextjs.org/)
- [Remix](https://remix.run/)
---
Le **Static-Site Generation** (SSG) est une méthode qui croise les 2 précédentes:
On 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.
---
---
**Avantages**
- On peut utiliser un serveur Web simple (pas de “serveur frontend”) car on a uniquement des fichiers HTML+CSS+JS
- On renvoi des pages HTML lisibles par les indexeurs et les navigateurs (SEO)
**Inconvénients**
- 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
- C’est impossible à utiliser pour des pages nécessitant une authentification ou des données dynamiques
---
# Frameworks
- [NextJS](https://nextjs.org/)
- [Gatsby](https://www.gatsbyjs.com/)
- [Astro](https://astro.build/)
---
**Démo**: SSR et SSG avec NextJS
> Cette manière de faire est en train d'être remplacée mais beaucoup de projets fonctionnent encore comme cela.
---
# Server Components
Depuis cette année, la nouvelle manière de faire du React est d'utiliser
des *Server Components* (SC).
C'est une manière de faire du SSR ou du SSG de manière propre et officielle.
---
## Comment ça fonctionne ?
On distingue deux types de composants:
- Les *Client Components*, que l'on connaît déjà et qui sont executés au niveau du navigateur Web
- Les *Server Components*, qui sont executés côté serveur (NodeJS)
---
## Pourquoi les Server Components ?
Comme le code des SC est exécuté côté serveur, ils ont d'autres caractéristiques:
- Possible de faire des appels à une base de données, utiliser des secrets sans que le client ait accès
- Certains modules externes sont utilisés uniquement côté serveur et n'alourdissent pas le code envoyé au client
- **Pas possible d'utiliser les hooks** car ils sont faits pour intéragir avec l'UI
- On peut utiliser async / await directement dans notre composant
---
---
---
En utilisant correctement les *Server* Components et les *Client* Components dans notre app,
on augmente grandement les performances:
- Les SC génèrent du code HTML / CSS, un peu comme on le fait avec PHP
- Seul le code JS utile (correspondant aux CC) est envoyé au navigateur
---
# NextJS
The React Framework for the Web
---
NextJS est le framework React le plus complet et le plus utilisé aujourd'hui.
Il permet de faire du SSG, SSR, ISR et s'est orienté récemment
vers l'utilisation des Server Components avec un remaniement complet.
---
## Créer un projet NextJS
```bash
npx create-next-app@latest
```
```
What is your project named? my-app
Would you like to use TypeScript with this project? No
Would you like to use ESLint with this project? Yes
Would you like to use Tailwind CSS with this project? Yes
Would you like to use `src/` directory with this project? Yes
Use App Router (recommended)? Yes
Would you like to customize the default import alias? Yes
```
---
NextJS a un système de routage puissant:
- Chaque fichier `page.jsx` dans le dossier `app/` correspond à une page
- On peut organiser ces pages en dossiers pour définir une arborescence
- Au niveau de chaque dossier, on peut définir des fichiers `layout.jsx` qui
encadrent les pages contenu dans le même dossier et ses sous-dossiers.
---
---
# Server Components & Client Components
Par défaut, tous les composants sont des Server Components.
Quand on veut faire un Client Component, on ajoute `'use client'`
à la toute première ligne du fichier.
Ainsi, le composant et tous ses descendants seront rendus
sur le client plutôt que le serveur.
---
## Server Component
```javascript
import Item from "./Item";
export default async function Home() {
const response = await fetch("https://rickandmortyapi.com/api/character");
const { results = [] } = await response.json();
console.log(results); // Uniquement dans le terminal
return (
{results?.map(character => (
setClicked(true)}>
{character.name}
);
}
export default Item;
```
---
# Routes dynamiques
Il est possible de gérer des routes avec une ou plusieurs parties
correspondants à un paramètre.
Par exemple, faire en sorte que `/species/Human` et `/species/Alien`
correspondent à la même page mais avec une props `kind` qui vaut
`Human` ou `Alien`.
Pour cela, on nomme les dossiers avec des `[]` pour définir les paramètres.
Par exemple, la page qui permettra de gérer cela aura le chemin
`src/app/species/[kind]/page.jsx`.
---
## Paramètre de route dynamique
```javascript
export default function Page({ params }) {
const response = await fetch(
`https://rickandmortyapi.com/api/character/?species=${params.kind}`);
const { results = [] } = await response.json();
return
Liste des {params.kind}
...
}
```
---
# Variables d'environnement
Toutes les variables définies dans un fichier `.env` ou `.env.local`
sont chargées par NextJS.
- Les *Server* Components peuvent récupérer toutes les variables d'env.
- Les *Client* Components peuvent uniquement récupérer les variables qui commencent par `NEXT_PUBLIC_`
Cela permet de gérer proprement les secrets.
---
```javascript
const {DATABASE_PASSWORD} = process.env;
const NEXT_PUBLIC_API_KEY = process.env.NEXT_PUBLIC_API_KEY;
```
---
# Travail pratique
En équipe sur le Gitpod, développé une app simpliste permettant de:
- Afficher la météo pour Genève quand on arrive sur la page
- Entrer le nom d'une ville ou une adresse pour laquelle afficher la météo
Pour cela, plusieurs tâches sont nécessaires:
- Développer une fonction pour récupérer la météo depuis https://open-meteo.com/
- Développer une fonction pour récupérer la latitude/longitude d'une ville ou d'une adresse (OpenStreetMap)
- Développer le composant qui affiche la météo d'une ville
- Générer le composant qui affiche le formulaire pour entrer du texte
- Probablement +