Розробка фронтенду сайту на Gatsby

Розроблення фронтенду сайту на Gatsby

Gatsby — React-фреймворк для статичної генерації сайтів з GraphQL data layer. Спеціалізується на контентних сайтах: блоги, документація, корпоративні сайти. Ключова особливість — єдиний GraphQL API для отримання даних з будь-яких джерел (файли, CMS, бази даних, API).

GraphQL Data Layer

Gatsby збирає дані з усіх джерел в єдиний GraphQL шар:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-filesystem',
      options: { path: './content/blog', name: 'blog' },
    },
    'gatsby-transformer-remark', // Markdown → HTML + frontmatter
    {
      resolve: 'gatsby-source-contentful',
      options: { spaceId: '...', accessToken: '...' },
    },
  ],
};

Усі дані доступні через GraphQL:

# У Gatsby IDE (localhost:8000/___graphql)
query BlogPosts {
  allMarkdownRemark(sort: { frontmatter: { date: DESC } }) {
    nodes {
      frontmatter { title, date, slug }
      excerpt(pruneLength: 150)
    }
  }
}

Програмна створення сторінок

// gatsby-node.js
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;

  const result = await graphql(`
    query { allMarkdownRemark { nodes { frontmatter { slug } } } }
  `);

  result.data.allMarkdownRemark.nodes.forEach(node => {
    createPage({
      path: `/blog/${node.frontmatter.slug}`,
      component: path.resolve('./src/templates/BlogPost.tsx'),
      context: { slug: node.frontmatter.slug },
    });
  });
};

Page Query та Static Query

// Page component — PageQuery
import { graphql, type HeadFC } from 'gatsby';

export default function BlogPost({ data }) {
  const { markdownRemark } = data;
  return (
    <article dangerouslySetInnerHTML={{ __html: markdownRemark.html }} />
  );
}

export const query = graphql`
  query BlogPost($slug: String!) {
    markdownRemark(frontmatter: { slug: { eq: $slug } }) {
      html
      frontmatter { title, date }
    }
  }
`;

export const Head: HeadFC = ({ data }) => (
  <title>{data.markdownRemark.frontmatter.title}</title>
);

Gatsby Image

Автоматична оптимізація зображень:

import { GatsbyImage, getImage, StaticImage } from 'gatsby-plugin-image';

// Динамічне зображення (з GraphQL)
function BlogCard({ post }) {
  const image = getImage(post.frontmatter.thumbnail);
  return <GatsbyImage image={image} alt={post.frontmatter.title} />;
}

// Статичне (оптимізується на етапі збирання)
<StaticImage src="../images/hero.jpg" alt="Hero" width={1200} height={630} />

Екосистема плагінів

• gatsby-source-contentful/strapi/wordpress/shopify — джерела даних
• gatsby-plugin-mdx — MDX (Markdown + React-компоненти)
• gatsby-plugin-sitemap — автогенерація Sitemap
• gatsby-plugin-robots-txt — robots.txt
• gatsby-plugin-offline — Service Worker для PWA

Gatsby vs Astro у 2024

Gatsby втратив позиції на користь Astro та Next.js для статичних сайтів. Gatsby виправданий, якщо:

• Проект вже на Gatsby (міграція = видатки)
• Потрібна потужна GraphQL data layer для агрегації багатьох джерел
• Команда знає Gatsby

Для нового контентного сайту — Astro (менше JS) або Next.js (більша екосистема).

Розгортання

gatsby build генерує статичний сайт. Розгортання на Netlify, Vercel, GitHub Pages, будь-який CDN. Gatsby Cloud (Netlify після поглинання) — оптимізовані інкрементальні збирання.

Терміни

Контентний сайт на Gatsby (Markdown-блог, 10–30 сторінок): 1–2 тижня. Зі складним data layer (кілька CMS-джерел), користувацькими GraphQL схемами: 2–4 тижня.