Creemos un sitio web estático con contenido externo.
En esta publicación, te mostraré cómo puedes renderizar datos de forma estática desde cualquier fuente de datos con GatsbyJS.

GatsbyJS

Si te gusta React y quieres una web compatible con estándares y de alto rendimiento, deberías mirar GatsbyJS.

¿Qué hace?

Compilará su código React en una colección de archivos HTML estáticos.

¿Por qué debería importarte?

1. Máximo rendimiento: cuando un usuario mira su web, ¡no se ejecuta ningún código en el lado del cliente o del servidor!
2. Imágenes más rápidas: carga progresiva de imágenes en la resolución adecuada para el dispositivo del usuario.
3. SEO: HTML estático es compatible con Google (robots). ¡Los sitios web lentos son penalizados por la búsqueda de Google!
4. React: desarrollo front-end productivo.
5. Mecanografiado: detecta errores antes de que los usuarios los vean (opcional, pero muy recomendado).
6. Contenido: conecta y utiliza muchas fuentes de contenido listas para usar o agrega las tuyas propias.

Contenido de Gatsby JS

GatsbyJS representa el contenido como un árbol de nodos. Un nodo puede ser una imagen o un bloque de texto.
Por ejemplo, una publicación de blog es una colección de nodos de texto e imágenes.

Puedes crear nodos a mano en tu archivo gatsby-node.js. Pero hay formas más sencillas.

Complementos

Los nodos se crean mediante complementos. El complemento que necesitas depende del CMS que elijas.
La opción más sencilla es el complemento del sistema de archivos, que convierte los archivos en nodos.
Para encontrar el complemento adecuado para usted, consulte aquí

Complemento no encontrado

Si tiene una fuente de datos que no está cubierta por los complementos existentes, creemos la nuestra propia.

El proceso es bastante sencillo, la única parte compleja son las imágenes.

Cargando nodos

Crea el archivo gatsby-node.ts (o js) en la carpeta raíz de tu proyecto gatsby.

Agregue este código para comenzar. El método sourceNodes se llama automáticamente cuando se construye el proyecto gatsby.

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

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

Ahora busquemos nuestros datos. Aquí uso la plataforma de aplicaciones https://inuko.net, pero el proceso es similar para cualquier fuente.

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;
}

Y también busquemos las imágenes que necesitaremos.

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;
}

Ahora tenemos una lista de publicaciones (de blog) y una lista de imágenes (enlaces).
En este ejemplo tenemos una estructura simple donde cada publicación tiene contenido de texto y una identificación de una sola imagen.

El siguiente paso es convertir los datos que obtuvimos de nuestro servidor en datos que Gatsby pueda usar.
Los datos en gatsby están representados por *nodos*, así que veamos cómo convertir los datos de nuestro servidor en un nodo.

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))
        }
    }
}

Repetimos todas las publicaciones y creamos un nodo correspondiente para cada una.
Si una publicación tiene una imagen post.image_id también creamos un nodo remotoFileNode y
añádelo al nodo de publicación
post.mediaFile___NODE = fileNode.id

Nota importante: gatsby creará automáticamente nodos de imagen a partir de nuestros nodos de archivo, pero necesita una forma de detectar que es una imagen.
Si sus URL contienen extensiones de archivo o su servidor responderá con un tipo de contenido de imagen, ya está todo listo.
Si ese no es el caso, puede establecer una extensión explícita en el nodo del archivo (png, jpg) para activar la creación del nodo de imagen.
text: nombre.subcadena(nombre.lastIndexOf("."))

Nodos de imagen

Tal vez te estés preguntando por qué nos tomamos tantas molestias al cargar imágenes como nodos. Podríamos usar las URL de las imágenes directamente.
Bueno, a veces las imágenes pueden estar detrás de un servicio autenticado, por ejemplo.
Pero la verdadera razón es que queremos utilizar el fantástico complemento de imágenes que proporciona Gatsby.
Convertirá automáticamente las imágenes al mejor formato y tamaño para cualquier dispositivo que acceda a nuestra web.
Esto significa que las imágenes se cargarán más rápido y se verán mejor (y obtendrán una mejor puntuación en Google :).

Consumir nodos en páginas

Ahora estamos listos para consumir los nodos que hemos creado.
Hay muchas formas de hacer esto; para este ejemplo, publicaremos algunas publicaciones y las mostraremos en una página de características.

Primero necesitamos cargar los nodos de datos que nos interesan. Usaremos useStaticQuery.
Luego pasaremos los datos a nuestro componente reutilizable llamado SecciónGrid que representará todas las publicaciones cargadas.

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} />
}

¡Tiempo de renderizado!

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}
                
            
        })}
    
}

Este componente iterará sobre todos los nodos que obtuvimos de nuestra consulta. Y generará dos divs, uno para la imagen de la publicación y otro para el contenido del texto.

eso es un resumen

Crear un sitio web atractivo y eficaz nunca ha sido tan fácil.
Herramientas como Gatsbyjs (y sus complementos) harán la mayor parte del trabajo pesado por nosotros.
Así podemos dedicar el 100% de nuestro tiempo al contenido y al diseño.

Espero que, con esta publicación, puedas automatizar aún más tu flujo de trabajo.
Ahora puedes llevar tu catálogo de productos, base de conocimientos u otro contenido valioso a tu sitio web.
Sin copy-pasta y con procesamiento de imágenes totalmente automatizado.

¡Feliz pirateo!