Lassen Sie uns eine statische Website mit externen Inhalten erstellen.
In diesem Beitrag zeige ich Ihnen, wie Sie mit GatsbyJS Daten aus jeder Datenquelle statisch rendern können.

GatsbyJS

Wenn Sie React mögen und ein standardkonformes und leistungsstarkes Web wünschen, sollten Sie sich GatsbyJS ansehen.

Was macht es?

Es kompiliert Ihren React-Code in eine Sammlung statischer HTML-Dateien.

Warum sollte es dich interessieren?

1. Maximale Leistung – wenn ein Benutzer Ihre Website betrachtet, wird kein Code client- oder serverseitig ausgeführt!
2. Schnellste Bilder – progressives Laden von Bildern in der richtigen Auflösung für das Gerät des Benutzers.
3. SEO – statisches HTML ist Google (Roboter)-freundlich. Langsame Websites werden von der Google-Suche abgestraft!
4. React – produktive Frontend-Entwicklung.
5. Typescript – Fehler erkennen, bevor Ihre Benutzer sie sehen (optional, aber dringend empfohlen)!
6. Inhalt – verbinden und nutzen Sie viele sofort einsatzbereite Inhaltsquellen oder fügen Sie Ihre eigenen hinzu!

Gatsby JS-Inhalte

GatsbyJS stellt Inhalte als Baum von Knoten dar. Ein Knoten kann ein Bild oder ein Textblock sein.
Ein Blogbeitrag ist beispielsweise eine Sammlung von Text- und Bildknoten.

Sie können Knoten manuell in Ihrer Datei gatsby-node.js erstellen. Aber es gibt einfachere Wege.

Plugins

Knoten werden durch Plugins erstellt. Welches Plugin Sie benötigen, hängt vom CMS Ihrer Wahl ab.
Die einfachste Option ist das Dateisystem-Plugin, das Dateien in Knoten umwandelt.
Um das richtige Plugin für Sie zu finden, schauen Sie hier

Plugin nicht gefunden

Wenn Sie eine Datenquelle haben, die nicht von den vorhandenen Plugins abgedeckt wird, erstellen wir unsere eigene.

Der Prozess ist ziemlich einfach, der einzige komplexe Teil sind Bilder.

Knoten werden geladen

Erstellen Sie die Datei gatsby-node.ts (oder js) im Stammordner Ihres Gatsby-Projekts.

Fügen Sie diesen Code hinzu, um loszulegen. Die Methode „sourceNodes“ wird automatisch aufgerufen, wenn das Gatsby-Projekt erstellt wird.

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

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

Jetzt holen wir unsere Daten ab. Hier verwende ich die App-Plattform https://inuko.net, aber der Vorgang ist für jede Quelle ähnlich.

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

Und holen wir uns auch die Bilder, die wir brauchen.

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

Wir haben jetzt eine Liste mit (Blog-)Beiträgen und eine Liste mit Bildern (Links).
In diesem Beispiel haben wir eine einfache Struktur, in der jeder Beitrag einen Textinhalt und eine ID eines einzelnen Bildes enthält.

Der nächste Schritt besteht darin, die Daten, die wir von unserem Server erhalten haben, in Daten umzuwandeln, die Gatsby verwenden kann.
Daten in Gatsby werden durch *Knoten* dargestellt, also schauen wir uns an, wie wir unsere Serverdaten in einen Knoten umwandeln.

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

Wir durchlaufen alle Beiträge und erstellen für jeden einen entsprechenden Knoten.
Wenn ein Beitrag ein Bild post.image_id hat, erstellen wir auch einen RemoteFileNode-Knoten und
hänge es an den Post-Knoten an
post.mediaFile___NODE = fileNode.id

Wichtiger Hinweis: Gatsby erstellt automatisch Bildknoten aus unseren Dateiknoten, muss aber erkennen, dass es sich um ein Bild handelt.
Wenn Ihre URLs Dateierweiterungen enthalten oder Ihr Server mit einem Bildinhaltstyp antwortet, sind Sie bereit.
Wenn dies nicht der Fall ist, können Sie eine explizite Erweiterung für den Dateiknoten (png, jpg) festlegen, um die Erstellung des Bildknotens auszulösen.
ext: name.substring(name.lastIndexOf("."))

Bildknoten

Vielleicht fragen Sie sich, warum wir uns solche Mühe machen, Bilder als Knoten zu laden. Wir könnten einfach die Bild-URLs direkt verwenden.
Nun, manchmal befinden sich die Bilder beispielsweise hinter einem authentifizierten Dienst.
Aber der wahre Grund ist, dass wir das fantastische Bild-Plugin verwenden möchten, das Gatsby bereitstellt.
Die Bilder werden automatisch in das beste Format und die beste Größe für jedes Gerät konvertiert, das unsere Website ansieht.
Das bedeutet, dass die Bilder schneller geladen werden und besser aussehen (und von Google eine bessere Bewertung erhalten:).

Konsumieren von Knoten in Seiten

Wir sind jetzt bereit, die von uns erstellten Knoten zu nutzen.
Es gibt viele Möglichkeiten, wie Sie dies tun können. In diesem Beispiel werden wir einige Beiträge erstellen und sie auf einer Seite mit Funktionen rendern.

Zuerst müssen wir die Datenknoten laden, die uns interessieren. Wir werden useStaticQuery verwenden.
Anschließend übergeben wir die Daten an unsere wiederverwendbare Komponente namens SectionGrid, die alle geladenen Beiträge rendert.

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

Renderzeit!

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

Diese Komponente iteriert über alle Knoten, die wir aus unserer Abfrage erhalten haben. Und es werden zwei Divs gerendert, eines für das Beitragsbild und eines für den Textinhalt.

Das ist ein Wrap

Es war noch nie so einfach, eine gut aussehende und leistungsstarke Website zu erstellen.
Tools wie Gatsbyjs (und seine Plugins) werden uns die meiste Arbeit abnehmen.
So können wir 100 % unserer Zeit dem Inhalt und der Gestaltung widmen.

Ich hoffe, dass Sie mit diesem Beitrag Ihren Arbeitsablauf weiter automatisieren können.
Jetzt können Sie Ihren Produktkatalog, Ihre Wissensdatenbank oder andere wertvolle Inhalte auf Ihre Website bringen.
Ohne Copy-Pasta und mit vollautomatischer Bildverarbeitung.

Viel Spaß beim Hacken!