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