Разработка фронтенда сайта на 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 недели.