Vamos construir um site estático com conteúdo externo.
Neste post vou mostrar como você pode renderizar dados estáticos de qualquer fonte de dados com GatsbyJS.

Gatsby JS

Se você gosta do React e deseja uma web de alto desempenho e compatível com os padrões, você deve dar uma olhada no GatsbyJS.

O que isso faz?

Ele compilará seu código React em uma coleção de arquivos HTML estáticos.

Por que você deveria se importar?

1. Desempenho máximo - quando um usuário acessa sua web, nenhum código é executado no cliente ou no servidor!
2. Imagens mais rápidas - carregamento progressivo de imagens na resolução certa para o dispositivo do usuário.
3. SEO - HTML estático é compatível com o Google (robôs). Sites lentos são penalizados pela pesquisa do Google!
4. React - desenvolvimento front-end produtivo.
5. Typescript - detecte erros antes que seus usuários os vejam (opcional, mas altamente recomendado)!
6. Conteúdo - conecte e use muitas fontes de conteúdo prontas para uso ou adicione a sua própria!

Conteúdo Gatsby JS

GatsbyJS representa o conteúdo como uma árvore de nós. Um nó pode ser uma imagem, um bloco de texto.
Por exemplo, uma postagem de blog é uma coleção de nós de texto e imagem.

Você pode criar nós manualmente em seu arquivo gatsby-node.js. Mas existem maneiras mais fáceis.

Plug-ins

Os nós são criados por plug-ins. O plugin que você precisa depende do CMS de sua escolha.
A opção mais direta é o plugin do sistema de arquivos, que transforma arquivos em nós.
Para encontrar o plugin certo para você, dê uma olhada aqui

Plug-in não encontrado

Se você tiver uma fonte de dados que não é coberta pelos plug-ins existentes, vamos construir a nossa própria.

O processo é bastante simples, a única parte complexa são as imagens.

Carregando nós

Crie o arquivo gatsby-node.ts (ou js) na pasta raiz do projeto gatsby.

Adicione este código para começar. O método sourceNodes é chamado automaticamente quando o projeto gatsby é construído.

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

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

Agora vamos buscar nossos dados. Aqui eu uso a plataforma de aplicativos https://inuko.net, mas o processo é semelhante para qualquer fonte.

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

E também vamos buscar as imagens que precisaremos.

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

Agora temos uma lista de postagens (blog) e uma lista de imagens (links).
Neste exemplo temos uma estrutura simples onde cada post possui algum conteúdo de texto e um id de uma única imagem.

A próxima etapa é converter os dados que obtivemos de nosso servidor em dados que Gatsby possa usar.
Os dados em gatsby são representados por *node*s, então vamos ver como converter os dados do nosso servidor em um nó.

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 as postagens e criamos um nó correspondente para cada uma.
Se uma postagem tiver uma imagem post.image_id, também criamos um nó remoteFileNode e
anexe-o ao nó de postagem
post.mediaFile___NODE = fileNode.id

Nota importante: gatsby criará automaticamente nós de imagem a partir de nossos nós de arquivo, mas precisa de uma maneira de detectar que é uma imagem.
Se seus URLs contiverem extensões de arquivo ou se seu servidor responder com um tipo de conteúdo de imagem, está tudo pronto.
Se esse não for o caso, você pode definir uma extensão explícita no nó do arquivo (png, jpg) para acionar a criação do nó da imagem.
ext: nome.substring(nome.lastIndexOf("."))

Nós de imagem

Talvez você esteja se perguntando por que nos damos tanto trabalho ao carregar imagens como nós. Poderíamos simplesmente usar os URLs das imagens diretamente.
Bem, às vezes as imagens podem estar atrás de um serviço autenticado, por exemplo.
Mas o verdadeiro motivo é que queremos usar o fantástico plugin de imagem fornecido por Gatsby.
Ele converterá automaticamente as imagens no melhor formato e tamanho para qualquer dispositivo que visualizará nossa web.
Isso significa que as imagens carregarão mais rápido e terão melhor aparência (e obterão uma pontuação melhor no Google :).

Consumindo nós em páginas

Agora estamos prontos para consumir os nós que criamos.
Há muitas maneiras de fazer isso. Neste exemplo, iremos renderizar algumas postagens em uma página de recursos.

Primeiro precisamos carregar os nós de dados nos quais estamos interessados. Usaremos useStaticQuery.
Em seguida, passaremos os dados para nosso componente reutilizável chamado SectionGrid, que renderizará todas as postagens carregadas.

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

Tempo de renderização!

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 irá iterar em todos os nós que obtivemos de nossa consulta. E renderizará dois divs, um para a imagem do post e outro para o conteúdo do texto.

Isso é um embrulho

Construir um site de ótima aparência e desempenho nunca foi tão fácil.
Ferramentas como Gatsbyjs (e seus plug-ins) farão a maior parte do trabalho pesado para nós.
Assim podemos dedicar 100% do nosso tempo ao conteúdo e ao design.

Espero que, com esta postagem, você consiga automatizar ainda mais seu fluxo de trabalho.
Agora você pode trazer seu catálogo de produtos, base de conhecimento ou outro conteúdo valioso para o seu site.
Sem copy-pasta e com processamento de imagem totalmente automatizado.

Feliz hacking!