Веб-портали на 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 залежить від специфіки проекту та переваг розробника.