Веб-порталы на 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-запросов к конечным точкам Strapi API. Например, чтобы получить статьи, вы отправляете `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-запросы к соответствующим конечным точкам Strapi API. Данные обычно сериализуются в 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. Данные из Strapi API получаются во время сборки. Astro генерирует полные HTML-файлы с полученными данными. Когда пользователь посещает страницу, он получает готовый HTML, обеспечивая чрезвычайно быструю загрузку. Это режим по умолчанию и предпочтительный для многих сайтов, управляемых контентом.
• SSR (Server-Side Rendering): Astro также поддерживает SSR. В этом режиме данные из Strapi API получаются при каждом запросе пользователя к серверу Astro. Сервер отображает HTML с последними данными и отправляет его в браузер. Это обеспечивает свежий контент, но может немного увеличить время ответа сервера по сравнению с SSG.
• Архитектура “Островов”: Независимо от SSG или SSR, Astro позволяет “гидратировать” только выбранные интерактивные компоненты (“острова”) на стороне клиента. Большая часть страницы остается статической (чистый HTML и CSS), и JavaScript загружается только там, где это абсолютно необходимо, что значительно повышает производительность.

Итог

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