Gatsby.js im Detail

Wie Sie wissen, können Sie mit einigen Boilerplates allein nicht weit kommen. Sie müssen sich also eingehend mit jeder Technologie befassen, um zu lernen, wie man etwas Wertvolles schreibt. Dieser Artikel beschreibt die Details von Gatsby.js , mit deren Wissen Sie komplexe Websites und Blogs erstellen und pflegen können.

Vorheriger Artikel zum Erstellen und Veröffentlichen eines persönlichen Blogs mit JAM-Stack

Nachfolgend behandelte Themen:

• Seitenstruktur und Routing
• Komponenten, Vorlagen und ihre Interaktion
• Mit Daten arbeiten
• Plugins
• Anwendungsstyling
• SEO-Optimierung mit Reaktionshelm
• PWA-Setup

Vorbereitung

yarn global add gatsby-cli 

  npx gatsby new gatsby-tutorial https://github.com/gatsbyjs/gatsby-starter-hello-world cd gatsby-tutorial 

  git init git add . git commit -m "init commit" 

  yarn start 

Seitenstruktur und Routing

Um eine Seite in Gatsby zu erstellen, legen Sie die neue Datei einfach im Ordner / src / pages ab und sie wird in eine separate HTML-Seite kompiliert. Es ist wichtig zu beachten, dass der Pfad zu dieser Seite dem tatsächlichen Pfad mit dem Namen entspricht . Fügen Sie beispielsweise einige weitere Seiten hinzu:

 src └── pages ├── about.js ├── index.js └── tutorial ├── part-four.js ├── part-one.js ├── part-three.js ├── part-two.js └── part-zero.js 

Der Inhalt ist noch nicht wichtig, daher kann jeder Text zur Unterscheidung zwischen Seiten verwendet werden.

 import React from "react"; export default () => <div>Welcome to tutorial/part-one</div>; 

Überprüfen Sie im Browser:

• http: // localhost: 8000 / tutorial / part-one
• http: // localhost: 8000 / about

Auf diese Weise können Sie beim Strukturieren von Dateien Routingprobleme sofort lösen.

Es gibt auch eine spezielle createPage-API, mit der Sie die Pfade und Namen von Seiten flexibler steuern können. Um damit arbeiten zu können, müssen Sie jedoch wissen, wie Daten in Gatsby funktionieren. Daher werden wir dies im Artikel etwas weiter betrachten.

Kombinieren Sie die erstellten Seiten mit den Links. Dazu verwenden wir die <Link /> -Komponente aus dem Gatsby-Paket, die speziell für die interne Navigation erstellt wurde. Verwenden Sie für alle externen Links das reguläre <a> -Tag.

/src/pages/index.js

 import React from "react"; import { Link } from "gatsby"; export default () => ( <div> <ul> <li> <Link to="/about">about</Link> </li> <li> <Link to="/tutorial/part-zero">Part #0</Link> </li> <li> <Link to="/tutorial/part-one">Part #1</Link> </li> <li> <Link to="/tutorial/part-two">Part #2</Link> </li> <li> <Link to="/tutorial/part-three">Part #3</Link> </li> <li> <Link to="/tutorial/part-four">Part #4</Link> </li> </ul> </div> ); 

<Link> unter der Haube verfügt über einen sehr kniffligen Mechanismus zur Optimierung des Seitenladens und wird daher anstelle von <a> zum Navigieren auf der Website verwendet. Weitere Details finden Sie hier .

Es werden Seiten erstellt, Links hinzugefügt und die Navigation beendet.

Komponenten, Vorlagen und ihre Interaktion

Wie Sie wissen, gibt es in jedem Projekt immer wiederkehrende Elemente. Bei Websites handelt es sich um eine Kopf-, Fuß- und Navigationsleiste. Außerdem werden Seiten unabhängig vom Inhalt gemäß einer bestimmten Struktur erstellt. Da Gatsby ein Compiler für React ist, wird zur Lösung dieser Probleme derselbe Komponentenansatz verwendet.

Erstellen Sie die Komponenten für die Kopfzeile und das Navigationsfeld:

/src/components/header.js

 import React from "react"; import { Link } from "gatsby"; /** *         *  ,     React-. *      ,    *  " ".     *    ""  GraphQL  gatsby- */ import logoSrc from "../images/logo.png"; export default () => ( <header> <Link to="/"> <img src={logoSrc} alt="logo" width="60px" height="60px" /> </Link> That is header </header> ); 

/src/components/sidebar.js

 import React from "react"; import { Link } from "gatsby"; export default () => ( <div> <ul> <li> <Link to="/about">about</Link> </li> <li> <Link to="/tutorial/part-zero">Part #0</Link> </li> <li> <Link to="/tutorial/part-one">Part #1</Link> </li> <li> <Link to="/tutorial/part-two">Part #2</Link> </li> <li> <Link to="/tutorial/part-three">Part #3</Link> </li> <li> <Link to="/tutorial/part-four">Part #4</Link> </li> </ul> </div> ); 

und fügen Sie sie zu /src/pages/index.js hinzu

 import React from "react"; import Header from "../components/header"; import Sidebar from "../components/sidebar"; export default () => ( <div> <Header /> <Sidebar /> <h1>Index page</h1> </div> ); 

Wir prüfen:

Alles funktioniert, aber wir müssen Header und Sidebar auf jeder Seite separat importieren, was nicht sehr praktisch ist. Um dieses Problem zu lösen, reicht es aus, eine Layoutkomponente zu erstellen und jede Seite damit zu versehen.

Gatsby Layout == Container reagieren
Ja, es ist keine strikte Gleichheit, weil es "fast" dasselbe ist

/src/components/layout.js

 import React from "react"; import Header from "./header"; import Sidebar from "./sidebar"; export default ({ children }) => ( <> <Header /> <div style={{ margin: `0 auto`, maxWidth: 650, backgroundColor: `#eeeeee` }} > <Sidebar /> {children} </div> </> ); 

/src/pages/index.js (und alle anderen Seiten)

 import React from "react"; import Layout from "../components/layout"; export default () => ( <Layout> <h1>Index page</h1> </Layout> ); 

Fertig, schauen Sie sich den Browser an:

Warum enthält das Projekt alle Dateinamen in Kleinbuchstaben? Lassen Sie uns zunächst feststellen, dass der Namespace für React auf der Tatsache beruht, dass "jede Datei eine Klasse ist und die Klasse immer groß geschrieben wird". In Gatsby enthalten Dateien immer noch Klassen, aber es gibt ein "aber" - "jede Datei ist eine potenzielle Seite und ihr Name ist die URL zu dieser Seite". Die Community kam zu dem Schluss, dass Links wie http://domain.com/User/Settings keine comme-il-faut und genehmigten Kebab-Groß- und Kleinschreibung für Dateinamen sind.

  src ├── components │ ├── header.js │ ├── layout.js │ └── sidebar.js ├── images │ └── logo.png └── pages ├── about.js ├── index.js └── tutorial ├── part-eight.js ├── part-five.js ├── part-four.js ├── part-one.js ├── part-seven.js ├── part-six.js ├── part-three.js ├── part-two.js └── part-zero.js 

Mit Daten arbeiten

Nachdem die Site-Struktur fertig ist, können Sie mit dem Ausfüllen des Inhalts fortfahren. Der klassische "Hardcode" -Ansatz passte nicht zu den Erstellern des JAM-Stacks sowie zum "Rendern von Inhalten aus AJAX-Anforderungen". Daher wurde vorgeschlagen, die Websites zum Zeitpunkt der Kompilierung mit Inhalten zu füllen. Im Fall von Gatsby ist GraphQL dafür verantwortlich, sodass Sie bequem mit Datenströmen aus beliebigen Quellen arbeiten können.

Es ist unmöglich, kurz über GraphQL zu sprechen, daher ist es ratsam, es selbst zu studieren oder auf meinen nächsten Artikel zu warten. Weitere Informationen zur Arbeit mit GraphQL finden Sie hier .

Um mit GraphQL zu arbeiten, verfügt das gatsby Paket ab der zweiten Version über eine gatsby Komponente, die sowohl auf Seiten als auch in einfachen Komponenten verwendet werden kann. Dies ist der Hauptunterschied zu der Vorgänger- Seitenabfrage . Bisher ist unsere Site nicht mit Datenquellen verbunden. Versuchen wir also, beispielsweise die Seitenmetadaten anzuzeigen und dann mit komplexeren Dingen fortzufahren.

Um eine query zu erstellen query Sie http: // localhost: 8000 / ___ graphql öffnen und die Seitenleiste mit der Dokumentation verwenden, um verfügbare Daten über die Site zu finden. Vergessen Sie nicht die automatische Vervollständigung.

/src/components/sidebar.js

 import React from "react"; import { Link, StaticQuery, graphql } from "gatsby"; export default () => ( <StaticQuery query={graphql` { allSitePage { edges { node { id path } } } } `} render={({ allSitePage: { edges } }) => ( <ul> {edges.map(({ node: { id, path } }) => ( <li key={id}> <Link to={path}>{id}</Link> </li> ))} </ul> )} /> ); 

Mithilfe der query wir jetzt Daten zu Seiten, die wir im Navigationsbereich rendern, und wir müssen uns keine Sorgen mehr machen, dass der Link nicht mit dem Namen übereinstimmt, da alle Daten automatisch erfasst werden.

Tatsächlich sind dies alle Daten, die auf unserer Website ohne Verwendung von Plug-Ins von Drittanbietern und ohne den guten alten "Hardcode" verfügbar sein können, sodass wir problemlos zum nächsten Thema unseres Artikels übergehen - Plugins.

Plugins

Im Kern ist Gatsby ein Compiler mit einer Reihe von Extras, die Plugins sind. Mit ihnen können Sie die Verarbeitung bestimmter Dateien, Datentypen und verschiedener Formate anpassen.

Erstellen Sie die Datei /gatsby-config.js auf der Stammebene der Anwendung. Das ist für die Konfiguration des gesamten Compilers verantwortlich und versucht, das erste Plugin für die Arbeit mit Dateien zu konfigurieren:

Plugin Installation:

 yarn add gatsby-source-filesystem 

Konfiguration in der Datei /gatsby-config.js:

 module.exports = { plugins: [ { resolve: `gatsby-source-filesystem`, options: { name: `images`, path: `${__dirname}/src/images/`, } } ], } 

  /** * gatsby-config.js     *     JS *     */ module.exports = { /** *  'plugins'  pipeline  * ,      */ plugins: [ /** *        , *         */ `gatsby-example-plugin`, { resolve: `gatsby-source-filesystem`, options: { name: `images`, path: `${__dirname}/src/images/`, } } ], } 

Erinnern Sie sich, dass wir über den "richtigen" Bildimport in Gatsby gesprochen haben ?

/src/components/header.js

 import React from "react"; import { Link, StaticQuery, graphql } from "gatsby"; export default () => ( <StaticQuery query={graphql` { allFile(filter: { name: { eq: "logo" } }) { edges { node { publicURL } } } } `} render={({ allFile: { edges: [ { node: { publicURL } } ] } }) => ( <header> <Link to="/"> <img src={publicURL} alt="logo" width="60px" height="60px" /> </Link> That is header </header> )} /> ); 

An der Site hat sich nichts geändert, aber jetzt wird das Bild mithilfe von GraphQL anstelle eines einfachen Webpack-Imports ersetzt. Auf den ersten Blick mag es scheinen, dass die Designs zu komplex sind und es unnötige Gesten waren, aber lassen Sie uns nicht zu Schlussfolgerungen eilen, da sich die Sache in denselben Plugins befindet. Wenn wir beispielsweise Tausende von Fotos auf der Website veröffentlichen wollten, mussten wir auf jeden Fall darüber nachdenken, das Laden aller Inhalte zu optimieren. Um unseren Lazy-Load-Prozess nicht von Grund auf neu zu erstellen, würden wir einfach ein Gatsby-Image- Plugin hinzufügen, das das Laden aller Fotos optimiert Bilder, die mit query importiert wurden.

Plugins für das Styling installieren:

 yarn add gatsby-plugin-typography react-typography typography typography-theme-noriega node-sass gatsby-plugin-sass gatsby-plugin-styled-components styled-components babel-plugin-styled-components 

gatsby-config.js

 module.exports = { plugins: [ { resolve: `gatsby-source-filesystem`, options: { name: `images`, path: `${__dirname}/src/images/` } }, // add style plugins below `gatsby-plugin-typography`, `gatsby-plugin-sass`, `gatsby-plugin-styled-components` ] }; 

Auf der offiziellen Website finden Sie ein Plugin für jeden Geschmack.

Anwendungsstyling

Beginnen wir mit der Gestaltung der Anwendung mit verschiedenen Ansätzen. Im vorherigen Schritt haben wir bereits Plugins für die Arbeit mit SASS , Styled-Components und der Bibliothek typography.js installiert. Beachten Sie jedoch, dass css.modules sofort unterstützt werden.

Beginnen wir mit den globalen Stilen, die wie andere Dinge, die sich auf die gesamte Site beziehen, in der Datei /gatsby-browser.js konfiguriert werden müssen:

 import "./src/styles/global.scss"; 

Mehr über gatsby-browser.js

/src/styles/global.scss

 body { background-color: lavenderblush; } 

Aus verschiedenen Gründen tendieren die Trends der letzten Jahre zum "CSS in JS" -Ansatz, daher sollten Sie globale Stile nicht missbrauchen, und es ist besser, sich darauf zu beschränken, die Schriftarten und wiederverwendeten Klassen anzugeben. In diesem speziellen Projekt ist geplant, Typography.js für diese Zwecke zu verwenden, damit globale Stile leer bleiben.

Möglicherweise haben Sie nach dem Hinzufügen der gatsby-plugin-typography zur Konfiguration Änderungen im Erscheinungsbild der Site gatsby-plugin-typography Dies liegt daran, dass die Standardvoreinstellung angewendet wurde und wir sie jetzt für uns selbst konfigurieren.

/src/utils/typography.js

 import Typography from "typography"; import theme from "typography-theme-noriega"; const typography = new Typography(theme); export default typography; 

Sie können jede andere Voreinstellung aus der Liste auswählen oder mithilfe der Paket-API eine eigene erstellen ( Beispiel für die Konfiguration der offiziellen Gatsby-Website).

/gatsby-config.js

 module.exports = { plugins: [ { resolve: `gatsby-source-filesystem`, options: { name: `images`, path: `${__dirname}/src/images/` } }, { resolve: `gatsby-plugin-typography`, options: { pathToConfigModule: `src/utils/typography` } }, `gatsby-plugin-sass`, `gatsby-plugin-styled-components` ] }; 

Abhängig von der ausgewählten Voreinstellung wird der globale Stil der Site geändert. Entscheiden Sie, wie Sie globale Stile für sich selbst festlegen möchten. Aus technischer Sicht sind dies persönliche Vorlieben und Unterschiede. Wir gehen jedoch dazu über, Komponenten mit gestylten Komponenten zu gestalten :

Fügen Sie eine Datei mit den globalen Variablen /src/utils/vars.js hinzu

 export const colors = { main: `#663399`, second: `#fbfafc`, main50: `rgba(102, 51, 153, 0.5)`, second50: `rgba(251, 250, 252, 0.5)`, textMain: `#000000`, textSecond: `#ffffff`, textBody: `#222222` }; 

  import React from "react"; import { Link, StaticQuery, graphql } from "gatsby"; import styled from "styled-components"; import { colors } from "../utils/vars"; const Header = styled.header` width: 100%; height: 3em; display: flex; justify-content: space-between; align-items: center; background-color: ${colors.main}; color: ${colors.textSecond}; padding: 0.5em; `; const Logo = styled.img` border-radius: 50%; height: 100%; `; const logoLink = `height: 100%;`; export default () => ( <StaticQuery query={graphql` { allFile(filter: { name: { eq: "logo" } }) { edges { node { publicURL } } } } `} render={({ allFile: { edges: [ { node: { publicURL } } ] } }) => ( <Header> That is header <Link to="/" css={logoLink}> <Logo src={publicURL} alt="logo" /> </Link> </Header> )} /> ); 

  import React from "react" import { Link, StaticQuery, graphql } from "gatsby" import styled from "styled-components" import { colors } from "../utils/vars" const Sidebar = styled.section` position: fixed; left: 0; width: 20%; height: 100%; display: flex; flex-direction: column; justify-content: center; background-color: ${colors.second}; color: ${colors.textMain}; ` const navItem = ` display: flex; align-items: center; margin: 0 1em 0 2em; padding: 0.5em 0; border-bottom: 0.05em solid ${colors.mainHalf}; postion: relative; color: ${colors.textBody}; text-decoration: none; &:before { content: ''; transition: 0.5s; width: 0.5em; height: 0.5em; position: absolute; left: 0.8em; border-radius: 50%; display: block; background-color: ${colors.main}; transform: scale(0); } &:last-child { border-bottom: none; } &:hover { &:before { transform: scale(1); } } ` export default () => ( <StaticQuery query={graphql` { allSitePage { edges { node { id, path } } } } `} render={({ allSitePage: { edges } }) => ( <Sidebar> { edges.map(({ node: { id, path } }) => ( <Link to={path} key={id} css={navItem} >{id}</Link> )) } </Sidebar> )} /> ) 

Bereits vorhandene Elemente werden stilisiert. Es ist an der Zeit, Inhalte mit Contentful zu verknüpfen , das Rand-Plugin zu verbinden und Seiten mithilfe der createPages-API zu generieren.

Weitere Informationen zum Verknüpfen von Gatsby und Contentful finden Sie in einem früheren Artikel.

  [ { "id": "title", "type": "Symbol" }, { "id": "content", "type": "Text", }, { "id": "link", "type": "Symbol", }, { "id": "orderNumber", "type": "Integer", } ] 

Paketinstallation:

 yarn add dotenv gatsby-source-contentful gatsby-transformer-remark 

/gatsby-config.js

 if (process.env.NODE_ENV === "development") { require("dotenv").config(); } module.exports = { plugins: [ `gatsby-transformer-remark`, { resolve: `gatsby-source-filesystem`, options: { name: `images`, path: `${__dirname}/src/images/`, } }, { resolve: `gatsby-plugin-typography`, options: { pathToConfigModule: `src/utils/typography`, }, }, { resolve: `gatsby-source-contentful`, options: { spaceId: process.env.CONTENTFUL_SPACE_ID, accessToken: process.env.CONTENTFUL_ACCESS_TOKEN, }, }, `gatsby-plugin-sass`, `gatsby-plugin-styled-components`, ], } 

Löschen Sie den Ordner / src / pages mit allen darin enthaltenen Dateien und erstellen Sie eine neue Datei, um die Knoten in Gatsby zu verwalten:

/gatsby-node.js

 const path = require(`path`); /** *  ,      *       */ exports.createPages = ({ graphql, actions }) => { /** *        *        *    */ const { createPage } = actions; return graphql(` { allContentfulArticle { edges { node { title link content { childMarkdownRemark { html } } } } } } `).then(({ data: { allContentfulArticle: { edges } } }) => { /** *       *  createPage()    *      */ edges.forEach(({ node }) => { createPage({ path: node.link, component: path.resolve(`./src/templates/index.js`), context: { slug: node.link } }); }); }); }; 

Mehr über gatsby-node.js

Erstellen Sie eine Vorlagendatei, die als Grundlage für die generierten Seiten dient
/src/templates/index.js

 import React from "react"; import { graphql } from "gatsby"; import Layout from "../components/layout"; export default ({ data: { allContentfulArticle: { edges: [ { node: { content: { childMarkdownRemark: { html } } } } ] } } }) => { return ( <Layout> <div dangerouslySetInnerHTML={{ __html: html }} /> </Layout> ); }; export const query = graphql` query($slug: String!) { allContentfulArticle(filter: { link: { eq: $slug } }) { edges { node { title link content { childMarkdownRemark { html } } } } } } `; 

Warum wird die <StaticQuery /> -Komponente hier nicht verwendet? Die Sache ist, dass es keine Variablen zum Erstellen einer Anfrage unterstützt, aber wir müssen die Variable $slug aus dem Kontext der Seite verwenden.

  import React from "react"; import { Link, StaticQuery, graphql } from "gatsby"; import styled from "styled-components"; import { colors } from "../utils/vars"; const Sidebar = styled.section` position: fixed; left: 0; width: 20%; height: 100%; display: flex; flex-direction: column; justify-content: center; background-color: ${colors.second}; color: ${colors.textMain}; `; const navItem = ` display: flex; align-items: center; margin: 0 1em 0 2em; padding: 0.5em 0; border-bottom: 0.05em solid ${colors.main50}; postion: relative; color: ${colors.textBody}; text-decoration: none; &:before { content: ''; transition: 0.5s; width: 0.5em; height: 0.5em; position: absolute; left: 0.8em; border-radius: 50%; display: block; background-color: ${colors.main}; transform: scale(0); } &:last-child { border-bottom: none; } &:hover { &:before { transform: scale(1); } } `; export default () => ( <StaticQuery query={graphql` { allContentfulArticle(sort: { order: ASC, fields: orderNumber }) { edges { node { title link orderNumber } } } } `} render={({ allContentfulArticle: { edges } }) => ( <Sidebar> {edges.map(({ node: { title, link, orderNumber } }) => ( <Link to={link} key={link} css={navItem}> {orderNumber}. {title} </Link> ))} </Sidebar> )} /> ); 

SEO-Optimierung

Auf der technischen Seite kann die Site als bereit betrachtet werden. Arbeiten wir also mit ihren Metadaten. Dazu benötigen wir folgende Plugins:

 yarn add gatsby-plugin-react-helmet react-helmet 

React-Helm generiert <head>...</head> für HTML-Seiten und ist in Verbindung mit Gatsby-Rendering ein leistungsstarkes und praktisches Tool für die Arbeit mit SEO.

/src/templates/index.js

 import React from "react"; import { graphql } from "gatsby"; import { Helmet } from "react-helmet"; import Layout from "../components/layout"; export default ({ data: { allContentfulArticle: { edges: [ { node: { title, content: { childMarkdownRemark: { html } } } } ] } } }) => { return ( <Layout> <Helmet> <meta charSet="utf-8" /> <title>{title}</title> </Helmet> <div dangerouslySetInnerHTML={{ __html: html }} /> </Layout> ); }; export const query = graphql` query($slug: String!) { allContentfulArticle(filter: { link: { eq: $slug } }) { edges { node { title link content { childMarkdownRemark { html } } } } } } `; 

Jetzt stimmt der title Website immer mit dem Titel des Artikels überein, was sich erheblich auf die Ausgabe der Website in den Suchergebnissen speziell für dieses Problem auswirkt. Hier können Sie einfach <meta name="description" content=" "> mit einer Beschreibung jedes Artikels separat hinzufügen, sodass der Benutzer verstehen kann, worum es in dem Artikel auf der Suchseite geht. Im Allgemeinen sind jetzt alle SEO-Funktionen verfügbar und verwaltbar ein Ort.

PWA-Setup

Gatsby wurde entwickelt, um sofort erstklassige Leistung zu liefern. Es kümmert sich um die Probleme der Codetrennung und -minimierung sowie der Optimierung in Form von Vorladen im Hintergrund, Bildverarbeitung usw., sodass die von Ihnen erstellte Site ohne manuelle Konfiguration eine hohe Leistung aufweist. Diese Leistungsmerkmale sind ein wichtiger Bestandteil der Unterstützung eines progressiven Webanwendungsansatzes.

Neben all dem gibt es drei grundlegende Kriterien für eine Site, die sie als PWA definieren:

• https-Protokoll
• Anwesenheit von manifest.json
• Offline-Zugriff auf die Site durch Servicemitarbeiter

Der erste Punkt kann von Gatsby nicht gelöst werden, da die Domäne , das Hosting und das Protokoll Probleme bei der Bereitstellung und nicht bei der Entwicklung sind. Ich kann jedoch Netlify empfehlen, das das https-Problem standardmäßig löst.

Wir gehen zu den restlichen Elementen über, dafür werden wir zwei Plugins installieren:

 yarn add gatsby-plugin-manifest gatsby-plugin-offline 

und konfigurieren Sie sie /src/gatsby-config.js

 if (process.env.NODE_ENV === "development") { require("dotenv").config(); } module.exports = { plugins: [ { resolve: `gatsby-plugin-manifest`, options: { name: `GatsbyJS translated tutorial`, short_name: `GatsbyJS tutorial`, start_url: `/`, background_color: `#f7f0eb`, theme_color: `#a2466c`, display: `standalone`, icon: `public/favicon.ico`, include_favicon: true } }, `gatsby-plugin-offline`, `gatsby-transformer-remark`, { resolve: `gatsby-source-filesystem`, options: { name: `images`, path: `${__dirname}/src/images/` } }, { resolve: `gatsby-plugin-typography`, options: { pathToConfigModule: `src/utils/typography` } }, { resolve: `gatsby-source-contentful`, options: { spaceId: process.env.CONTENTFUL_SPACE_ID, accessToken: process.env.CONTENTFUL_ACCESS_TOKEN } }, `gatsby-plugin-sass`, `gatsby-plugin-styled-components`, `gatsby-plugin-react-helmet` ] }; 

Sie können Ihr Manifest mithilfe der Dokumentation anpassen sowie die Service-Worker-Strategie anpassen, indem Sie die Plugin-Einstellungen überschreiben .

Sie werden keine Änderungen im Entwicklungsmodus bemerken, aber die Site erfüllt bereits die neuesten Anforderungen der Webwelt, und wenn sie auf der https: // Domain gehostet wird, ist sie nicht gleich.

Fazit

Als ich vor ein paar Jahren zum ersten Mal auf die Probleme stieß, React-Anwendungen ins Internet zu stellen, zu unterstützen und Inhalte zu aktualisieren, konnte ich mir nicht vorstellen, dass es bereits einen JAM-Stack-Ansatz auf dem Markt gibt, der all diese Prozesse vereinfacht, und jetzt werde ich nicht überrascht sein Einfachheit. Gatsby löst die meisten Probleme, die sich auf die Leistung der Website auswirken, sofort. Wenn Sie ein wenig mehr über die Feinheiten der Anpassung an Ihre Anforderungen wissen, können Sie 100% -Indikatoren für alle Elemente in Lighthouse erhalten , die sich erheblich auf die Ausgabe der Website in Suchmaschinen auswirken (von zumindest bei Google).

Repository mit Projekt