gatsbyjs

Jamstack, SSR et GraphQL avec Gatsby JS

Jamstack

• Jamstack wtf (en)
• Jamstack wtf - explication en fr

SSR

Server side rendering, rendu côté serveur, le markup est généré en build - ceci n'est pas le cas de CRA.

Render at build time, not at runtime

GraphQL

GraphQL est une alternative à REST API. C'est un language de queries et un runtime:

• un seul endpoint

• deux opérations: query et mutation (pour modifier les données)

• retourne uniquement les champs demandés (optimisation en volumetrie des données)

• permet de fetch plusieurs ressources dans une seule requête

• GRAPHQL : UNE APPROCHE API PAS EN REST

• GraphQL - documentation officielle

https://codepen.io/pehaa/pen/GRWJMJO

https://codepen.io/pehaa/pen/zYZvwEG

Gatsby JS

Un framework basé sur React et le concept SSR.

Pour commencer nous allons installer Gatsby CLI

npm install -g gatsby-cli
gatsby --version

Ensuite nous allons démarrer avec un des "starters" officiels

gatsby new my-gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog.git

et ensuite

cd my-blog-gatsby
yarn start

(yarn start appelle la commande gatsby develop).

Notre todo :

1. Ajouter un nouvel article (content/blog/xyx/index.md)

2. Ajouter une page About disponible sous /about (tutorial Gatsby)

   mkdir src/pages/about.js

3. Modifier la component Bio, remplacer le lien twitter pas le lien vers la page about

4. Modifier l'affichage de l'article - ajouter Time to Read

5. Ajouter un nouvel champs frontmatter, featured (true ou false)

6. Ajouter un component <FeaturedArticles /> qui listera 3 derniers articles qui sont featured

7. Intégrer Chakra UI

   yarn add @chakra-ui/gatsby-plugin @chakra-ui/react @emotion/react @emotion/styled framer-motion

   et ensuite

   // gatsby-config.js
   module.exports = {
     plugins: [
       //  ....
       "@chakra-ui/gatsby-plugin",
     ],
   }

---

⚠️ Si vous rencontrez des erreurs de type Can't resolve '../../public/page-data/sq/d/45754215878.json', vous devez supprimer le .cache de gatsby, vous pouvez le faire dans le terminal avec la commande

gatsby clean

et ensuite refaire yarn start

---