Документированная публичная архитектура Gatsby
Gatsby построен вокруг React и инструментов Node.js. Разработчики пишут компоненты React, а Gatsby координирует получение данных, запросы GraphQL, создание страниц, обработку ресурсов, сборку пакетов и выбранное поведение рендеринга.
Здесь описана архитектура фреймворка, документированная для проектов Gatsby. Из неё не делаются выводы о закрытых системах хостинга, внутренних сервисах или операционной топологии, лежащих в основе gatsbyjs.com.
Основные строительные блоки
| Слой | Публично документированная роль |
|---|---|
| React | Предоставляет компоненты, JSX, состояние и взаимодействие на стороне браузера. |
| API Gatsby | Связывают конфигурацию, получение данных, создание узлов, создание страниц и работу жизненного цикла рендеринга. |
| Слой данных | Нормализует полученные записи в виде узлов и предоставляет их через схему GraphQL. |
| Плагины источников | Импортируют контент из файлов, контентных систем, API и сервисов. |
| GraphQL | Выбирает поля из источников для страниц и компонентов в рабочем процессе данных Gatsby. |
| Рендеринг | Поддерживает SSG, DSG, SSR через getServerData и клиентские маршруты. |
| Экосистема плагинов | Добавляет источники, преобразования, обработку изображений, стилизацию, аналитику и другие интеграции. |
От контента к странице
- Плагин источника получает или считывает контент.
- Gatsby создаёт узлы и строит свою схему данных.
- Запрос страницы запрашивает необходимые поля.
- Шаблон React отрисовывает запрошенный контент.
- Gatsby создаёт или обслуживает страницу в соответствии с её режимом рендеринга.
Статические страницы генерируются во время сборки. Создание отложенных страниц переносится до их первого запроса в совместимой инфраструктуре. Страницы SSR выполняют логику во время запроса через getServerData. Клиентские маршруты резервируют выбранные пути для поведения браузерного приложения.
Архитектура не гарантирует определённого времени сборки, скорости страницы или результата поиска. Эти показатели зависят от задержки источников, количества узлов и страниц, структуры запросов, изображений, JavaScript, кэширования, хостинга и самой реализации.
