Les News pour novembre 2022

Next 13

On pose les bases du futur de Next.js et de React. Next 13 est utilisable avec l’ancien système de page.

2 gros changement obligatoires :

• Link (on a plus besoin d’utiliser l’ancre en enfant. Enfin !!)
• Image (utilise l’API native des browsers, plus efficace et rapide)

Il y a un codemod pour migrer les projets sur les 2 changements.

New App directory (Beta) :

• Layout (juste le contenu est updaté pas le layout)
• Server component (Moins de JS dans le browser !)
• Streaming (rendu progressif et incrémental) Avec les servers components, permet de rendre les éléments qui ne fetch pas de data directement et les autres une fois que les data sont arrivés.
• Data Fetching dans les components. N’importe quel component peut fetcher des data SSG, SSR, ISR en une seule API ⇒ fetch (API étendu dans NextJS) réglage du cache et revalidate.
• Nouveau plugin TypeScript (better suggestions and auto-complete)

TurboPack

Attention, il est en alpha !

Fonctionnement global :

• Écrit en Rust
• Pas d’ESM en dev contrairement à ViteJS
• Pas de compatibilité avec l’écosystème WebPack
• Que dev pour le moment. Le build n’utilise pas turbopack
• Système de Memory Cache. Dans le futur, cache persistant via file ou remote
• Pour le moment, que NextJS, Svelte prévu et pour les autres c’est en discussion

En gros, il passe en cache les fichiers et recompile le bundle avec le cache. Si un fichier change, il update le cache que de ce fichier et recompile avec le cache des autres fichiers.

• Réaction d’Evan You -> Evan test réellement la différence entre Turbopack et Vite.

Gatsby 5

• Slice API : Permet de créer des slices : Header, Footer, Layout et de déployer uniquement les éléments qui changent.
• Partial Hydratation (Beta) via React Server Component
• Head API
• Script component
• Node 18 et React 18

Gastby Valhalla Content Hub

Pour le moment que dispo pour les Entreprises

C’est un agrégateur de sources comme on peut trouver dans Gatsby mais via un service accessible via le net.

On peut donc concentrer plusieurs sources de différents services pour l’interroger avec une API GraphQL

WordPress 6.1

• Cache query !!
• Extend query loop block
• Typographie Fluide (clamp)
• WebP
• Gutenberg → Améliorations de blocs
• etc…

Bonne écoute !