Créons un site Web statique avec du contenu externe.
Dans cet article, je vais vous montrer comment rendre des données statiques à partir de n'importe quelle source de données avec GatsbyJS.

GatsbyJS

Si vous appréciez React et souhaitez un Web conforme aux normes et hautes performances, vous devriez consulter GatsbyJS.

À quoi ça sert ?

Il compilera votre code React dans une collection de fichiers HTML statiques.

Pourquoi devriez-vous vous en soucier ?

1. Performances maximales : lorsqu'un utilisateur consulte votre site Web, aucun code n'est exécuté côté client ou serveur !
2. Images les plus rapides - chargement progressif des images dans la bonne résolution pour l'appareil de l'utilisateur.
3. SEO : le HTML statique est compatible avec Google (robots). Les sites Web lents sont pénalisés par la recherche Google !
4. React - développement front-end productif.
5. Typescript - détectez les erreurs avant que vos utilisateurs ne les voient (facultatif, mais fortement recommandé) !
6. Contenu : connectez et utilisez de nombreuses sources de contenu prêtes à l'emploi ou ajoutez les vôtres !

Contenu Gatsby JS

GatsbyJS représente le contenu comme une arborescence de nœuds. Un nœud peut être une image, un bloc de texte.
Par exemple, un article de blog est une collection de nœuds de texte et d’image.

Vous pouvez créer des nœuds à la main dans votre fichier gatsby-node.js. Mais il existe des moyens plus simples.

Plugins

Les nœuds sont créés par des plugins. Le plugin dont vous avez besoin dépend du CMS de votre choix.
L'option la plus simple est le plugin du système de fichiers, qui transforme les fichiers en nœuds.
Pour trouver le plugin qui vous convient, jetez un œil ici

Plugin introuvable

Si vous disposez d'une source de données qui n'est pas couverte par les plugins existants, créons la nôtre.

Le processus est assez simple, la seule partie complexe sont les images.

Chargement des nœuds

Créez le fichier gatsby-node.ts (ou js) dans le dossier racine de votre projet Gatsby.

Ajoutez ce code pour commencer. La méthode sourceNodes est appelée automatiquement lors de la construction du projet Gatsby.

import { GatsbyNode } from "gatsby"
import { createRemoteFileNode } from "gatsby-source-filesystem"

export const sourceNodes: GatsbyNode["sourceNodes"] = async ({
    actions: { createNode },
    createNodeId,
    createContentDigest,
    store,
    cache,
}) => {
}

Récupérons maintenant nos données. Ici, j'utilise la plateforme d'application https://inuko.net, mais le processus est similaire pour n'importe quelle source.

interface IPost {
    id: string;
    title: string;
    content: string;
    image_id: string;
}
const fetchPosts = async () => {
    const postQuery = {
        entity: {
            name: "cms_content",
            allattrs: true,
            links: [{
                name: "cms_site", from: "siteid", to: "id", alias: "cs",
                filter: { conditions: [{ attribute: "name", operator: "eq", value: "NAME_OF_MY_WEB" }] }
            }]
        }
    };
    const posts = await fetchJson("/api/fetch", postQuery) as IPost[];
    return posts;
}

Et récupérons également les images dont nous aurons besoin.

interface IImage {
    id: string;
    name: string; // sunset.jpg
    image_url: string; // https://sample.com/54565735235464322
}
const fetchImages = async () {
    const imageQuery = {
        entity: {
            name: "cms_image",
            allattrs: true,
            links: [{
                name: "cms_site", from: "siteid", to: "id", alias: "cs",
                filter: { conditions: [{ attribute: "name", operator: "eq", value: "NAME_OF_MY_WEB" }] }
            }]
        }
    };
    const images = await fetchJson("/api/fetch", imageQuery) as IImage[];
    return images;
}

Nous avons maintenant une liste d'articles (de blog) et une liste d'images (liens).
Dans cet exemple, nous avons une structure simple dans laquelle chaque publication contient du texte et l'identifiant d'une seule image.

L'étape suivante consiste à convertir les données que nous avons obtenues de notre serveur en données que Gatsby peut utiliser.
Les données dans Gatsby sont représentées par des *nœuds*, voyons donc comment convertir les données de notre serveur en nœud.

export const sourceNodes: GatsbyNode["sourceNodes"] = async ({
    actions: { createNode },
    createNodeId,
    createContentDigest,
    store,
    cache,
}) => {

    const posts = await fetchPosts();
    const images = await fetchImages();
    // create an object for image by id lookup
    const imageDict = images.reduce((d, c) => (d[c.id] = c, d), {} as { [name: string]: IImage });

    for (const post of posts) {
        // create a node from post
        const postNodeId = createNodeId(`XPost-${post.id}`)

        if (post.image_id && imageDict[post.image_id]) {
            const image = imageDict[post.image_id];
            const name = image.name;
            const url = image.image_url;
            const fileNode = await createRemoteFileNode({
                url: url,
                //store,
                cache,
                createNode,
                createNodeId,
                // !!! important !!!
                // If your image url does not have a valid image extension, this will tell the system what type of image we are adding
                ext: name.substring(name.lastIndexOf(".")),
            });

            post.mediaFile___NODE = fileNode.id

            post.internalId = post.id; // copy our internal post. id is replaced by gatsbyjs

            const nodeMeta = {
                id: postNodeId,
                parent: null,
                children: [],
                internal: {
                    type: `XPosts`,
                    mediaType: `text/json`,
                    content: JSON.stringify(post),
                    contentDigest: createContentDigest(post),
                },
            }
            createNode(Object.assign({}, post, nodeMeta))
        }
    }
}

Nous parcourons toutes les publications et créons un nœud correspondant pour chacune.
Si une publication a une image post.image_id, nous créons également un nœud remoteFileNode et
ajoutez-le au nœud de publication
post.mediaFile___NODE = fileNode.id

Remarque importante : Gatsby créera automatiquement des nœuds d'image à partir de nos nœuds de fichiers, mais il a besoin d'un moyen de détecter qu'il s'agit d'une image.
Si vos URL contiennent des extensions de fichiers ou si votre serveur répondra avec un type de contenu d'image, vous êtes prêt.
Si ce n'est pas le cas, vous pouvez définir une extension explicite sur le nœud de fichier (png, jpg) pour déclencher la création du nœud d'image.
ext : nom.substring(name.lastIndexOf("."))

Nœuds d'images

Vous vous demandez peut-être pourquoi nous nous donnons tant de mal à charger des images en tant que nœuds. Nous pourrions simplement utiliser les URL des images directement.
Eh bien, parfois, les images peuvent se trouver derrière un service authentifié par exemple.
Mais la vraie raison est que nous voulons utiliser le fantastique plugin d'image fourni par Gatsby.
Il convertira automatiquement les images au meilleur format et à la meilleure taille pour tout appareil qui consultera notre site Web.
Cela signifie que les images se chargeront plus rapidement et seront plus belles (et obtiendront un meilleur score par Google :).

Consommer des nœuds dans les pages

Nous sommes maintenant prêts à consommer les nœuds que nous avons créés.
Il existe de nombreuses façons de procéder. Pour cet exemple, nous allons publier quelques articles et les afficher sur une page fonctionnalités.

Nous devons d'abord charger les nœuds de données qui nous intéressent. Nous utiliserons useStaticQuery.
Ensuite, nous transmettrons les données à notre composant réutilisable appelé SectionGrid qui restituera toutes les publications chargées.

const FeaturePage = (props:{}) => {
    const data = useStaticQuery(graphql`
        query featuresQueryEn {
            allXPosts(
                filter: {language: {eq: "en"}, pageid: {label: {eq: "features"}}}
                sort: {position: ASC}
                ) {
              edges {
                node {
                  id
                  content
                  title
                  mediaFile {
                    childImageSharp {
                      gatsbyImageData
                    }
                  }
                }
              }
            }
          }
    `);

    return Features} />
}

Temps de rendu !

import { Link } from "gatsby";
import { GatsbyImage } from "gatsby-plugin-image";
import React from "react";

export const SectionGrid = (props: {data: any, title: string}) => {
    const edges = props.data.allXPosts.edges as any[];

    return 

        

            {props.title}
        
        {edges.map(edge => {
            const node = edge.node;
            return 

                

                    
                

                    
{node.title}
                    
{node.content}
                
            
        })}
    
}

Ce composant parcourra tous les nœuds que nous avons obtenus à partir de notre requête. Et il affichera deux divs, un pour l'image de la publication et un pour le contenu du texte.

C'est fini

Créer un site Web élégant et performant n'a jamais été aussi simple.
Des outils comme Gatsbyjs (et ses plugins) feront le gros du travail pour nous.
Nous pouvons ainsi consacrer 100 % de notre temps au contenu et au design.

J'espère qu'avec cet article, vous pourrez automatiser davantage votre flux de travail.
Vous pouvez désormais intégrer votre catalogue de produits, votre base de connaissances ou tout autre contenu précieux sur votre site Web.
Sans copier-coller et avec traitement d'image entièrement automatisé.

Bon piratage !