Веб-порталы на Strapi и Astro

Преимущества использования Strapi с Astro

• Непревзойдённая производительность и скорость: Astro создан для скорости и по умолчанию не отправляет в браузер JavaScript. В сочетании со Strapi в роли headless CMS он позволяет создавать молниеносные статические (SSG) и динамические (SSR) сайты, что обеспечивает отличный пользовательский опыт и лучшее SEO.
• Архитектура «островов» для оптимальной интерактивности: Astro позволяет создавать интерактивные компоненты (острова) на ваших любимых UI-фреймворках (React, Vue, Svelte и др.) или на чистом JavaScript, в то время как остальная часть страницы остаётся статической. Это сокращает объём JavaScript-кода и время до интерактивности (TTI).
• Гибкость в выборе UI-фреймворка: Astro не навязывает единственный фреймворк. Вы можете использовать на одной странице компоненты из разных библиотек или обходиться только HTML и JavaScript, что даёт разработчикам максимальную свободу.
• Поддержка многоязычности: Strapi изначально поддерживает управление контентом на нескольких языках. В сочетании с Astro, который также предлагает функции интернационализации, это упрощает выход на глобальную аудиторию с адаптированным контентом.
• Масштабируемость и безопасность: Headless-архитектура отделяет бэкенд (Strapi) от фронтенда (Astro). Их можно масштабировать независимо. Strapi предоставляет надёжные функции безопасности, а статически сгенерированные страницы Astro по своей природе менее уязвимы для атак.
• Продвинутые пользовательские интерфейсы и порталы: Гибкость Astro и Strapi позволяет создавать продвинутые интерфейсы, такие как клиентские порталы с регистрацией и входом. Пользователи могут управлять своими данными, услугами или персонализированным контентом, а администраторы — легко управлять контентом в Strapi.

Что такое Strapi: подробнее

Strapi — это headless CMS (система управления контентом) на Node.js, основанная на фреймворке Koa.js. Это означает, что на уровне бэкенда она использует JavaScript и асинхронное программирование. Strapi хранит данные в выбранной вами базе данных (PostgreSQL, MySQL, SQLite, MongoDB и др.). Структуры контента (модели контента) разработчик определяет в панели администратора или в конфигурационных файлах.

Ключевая особенность Strapi — автоматическая генерация API (программных интерфейсов приложений) на основе заданных моделей контента. По умолчанию генерируются два основных типа API:

• RESTful API: Этот API следует архитектуре REST (Representational State Transfer). Используются стандартные методы HTTP:
  • GET: Получение данных (например, списка статей, конкретной записи). Данные возвращаются в формате JSON в теле HTTP-ответа.
  • POST: Создание нового ресурса (например, отправка формы). Данные обычно передаются в формате JSON в теле HTTP-запроса.
  • PUT/PATCH: Обновление существующего ресурса. Данные также передаются в формате JSON в теле HTTP-запроса.
  • DELETE: Удаление ресурса.

  Доступ к этим эндпоинтам осуществляется по определённым URL (URI – Uniform Resource Identifiers), которые автоматически генерируются на основе названий ваших моделей контента (например, `/api/articles`, `/api/products`).

• GraphQL API: Strapi также предоставляет API на основе GraphQL – языка запросов для вашего API. В отличие от REST, где вы обычно получаете фиксированный набор данных, GraphQL позволяет клиентам (например, Astro) запрашивать только те данные, которые им действительно нужны. Это повышает эффективность и сокращает объём передаваемых данных. GraphQL использует запросы HTTP POST, в теле которых содержится строка GraphQL-запроса. Ответ возвращается в формате JSON. Strapi автоматически генерирует схему GraphQL на основе ваших моделей контента, включая типы, поля, запросы и мутации.

Аутентификацию и авторизацию в Strapi можно реализовать разными способами, включая JSON Web Tokens (JWT) как для REST, так и для GraphQL API. Это обеспечивает безопасный доступ к контенту и административным функциям.

Как Astro работает со Strapi?

Astro, современный фреймворк для создания быстрых контентных сайтов, взаимодействует со Strapi, отправляя HTTP-запросы к API, которые предоставляет Strapi. Это может быть RESTful API или GraphQL API — в зависимости от предпочтений разработчиков и требований проекта.

Получение данных:

• RESTful API: В файлах `.astro` (на стороне сервера при сборке/рендеринге) или в клиентских скриптах (для динамических взаимодействий) используется стандартный `fetch` (или библиотеки вроде `axios`) для отправки запросов HTTP GET к эндпоинтам API Strapi. Например, чтобы получить статьи, вы отправляете `GET /api/articles`. Strapi возвращает данные в JSON, которые Astro затем использует для рендеринга HTML.
• GraphQL API: Для GraphQL Astro может использовать `fetch` с POST-запросами, отправляя GraphQL-запрос в теле, или лёгкие GraphQL-клиенты. Вы определяете запросы для получения нужных данных и отправляете их на GraphQL-эндпоинт Strapi (обычно `/graphql`). JSON-ответ обрабатывается Astro.

Отправка данных:

• RESTful API: Для отправки данных (например, контактных форм, комментариев) клиентские скрипты Astro отправляют запросы HTTP POST, PUT или PATCH на соответствующие эндпоинты API Strapi. Данные обычно сериализуются в JSON в теле запроса.
• GraphQL API: Для изменения данных (например, создания или обновления записей) клиентские скрипты Astro используют мутации GraphQL, отправляемые на GraphQL-эндпоинт Strapi через HTTP POST.

Откуда берутся данные:

• Strapi: Данные хранятся в настроенной базе данных. Strapi извлекает, обрабатывает и предоставляет эти данные через RESTful или GraphQL API в ответ на HTTP-запросы от Astro.
• Astro: Astro сам не хранит данные контента. Он получает данные из API Strapi и использует их для генерации HTML-страниц (статически при сборке или динамически на сервере). Astro может применять кеширование, но единственным источником истины всегда остаётся база данных Strapi.

Аутентификация и авторизация в связке

Для защиты контента и API Strapi используются механизмы аутентификации и авторизации. Приложения на Astro (особенно клиентские части, которым нужен доступ к защищённым ресурсам) должны корректно проходить аутентификацию. Это может включать отправку токенов (например, JWT) в заголовках HTTP-запросов, которые Strapi проверяет, чтобы определить права доступа.

Статическая генерация (SSG) и серверный рендеринг (SSR) в Astro

• SSG (Static Site Generation): Astro отлично справляется с SSG. Данные из API Strapi загружаются во время сборки. Astro генерирует готовые HTML-файлы с полученными данными. Когда пользователь открывает страницу, он получает готовый HTML, что обеспечивает чрезвычайно быструю загрузку. Это режим по умолчанию и предпочтительный вариант для многих контентных сайтов.
• SSR (Server-Side Rendering): Astro также поддерживает SSR. В этом режиме данные из API Strapi загружаются при каждом запросе пользователя к серверу Astro. Сервер рендерит HTML с актуальными данными и отправляет его в браузер. Это обеспечивает свежесть контента, но может немного увеличить время ответа сервера по сравнению с SSG.
• Архитектура «островов»: Независимо от SSG или SSR Astro позволяет выполнять «гидратацию» только выбранных интерактивных компонентов (островов) на стороне клиента. Большая часть страницы остаётся статической (чистые HTML и CSS), а JavaScript загружается только там, где это действительно необходимо, что значительно повышает производительность.

Итог

Интеграция Strapi и Astro опирается на стандартные веб-протоколы, такие как HTTP, и форматы данных, такие как JSON. Strapi выступает мощным и гибким бэкендом, предоставляющим контент через RESTful или GraphQL API. Astro, фронтенд с упором на производительность и гибкость, использует эти API для создания чрезвычайно быстрых сайтов, генерируя их статически (SSG) или рендеря на сервере (SSR) и сводя к минимуму нагрузку JavaScript благодаря архитектуре «островов». Выбор между REST и GraphQL зависит от специфики проекта и предпочтений разработчиков.