Веб-порталы на Strapi и Next.js

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

• Повышенная гибкость: Архитектура Strapi позволяет использовать контент в разных фронтенд-интерфейсах, а не только в веб-приложениях. В сочетании с Next.js она даёт возможность создавать насыщенный, интерактивный пользовательский опыт с плавным обновлением контента.
• Поддержка многоязычности: Strapi поддерживает управление контентом на нескольких языках, позволяя компаниям выходить на глобальную аудиторию и доставлять контент на разных языках прямо из CMS.
• Скорость и производительность: Используя Next.js на уровне фронтенда, наше решение задействует его возможности серверного рендеринга (SSR), что повышает скорость сайта и позиции в SEO. Статическая генерация (SSG) в Next.js обеспечивает быструю загрузку и плавную работу для пользователя.
• Масштабируемость и безопасность: Связка Strapi и Next.js выдерживает высокие нагрузки, что делает её идеальной для внедрений корпоративного уровня. Обе платформы разработаны с учётом безопасности и обеспечивают надёжную защиту данных и контента.
• Продвинутые пользовательские интерфейсы: Мы разрабатываем продвинутые пользовательские интерфейсы, такие как клиентские порталы с регистрацией и безопасным входом. Это позволяет пользователям взаимодействовать с порталом как активным клиентам, получая доступ к услугам и информации онлайн. Такие порталы проектируются так, чтобы повышать вовлечённость пользователей и упрощать управление контентом, поэтому они удобны и администраторам сайта, и посетителям. Они служат ключевой точкой контакта для доставки персонализированного опыта и адаптированного контента непосредственно пользователям.

Что такое 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 (JavaScript Object Notation) в теле 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 позволяет клиентам (например, Next.js) запрашивать только те данные, которые им действительно нужны. Это повышает эффективность и уменьшает объём передаваемых данных. GraphQL использует запросы HTTP POST, в теле которых содержится строка GraphQL-запроса. Ответы также приходят в формате JSON. Strapi автоматически генерирует схему GraphQL на основе ваших моделей контента, включая типы, поля, запросы и мутации.

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

Как Next.js работает со Strapi?

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

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

• RESTful API: В компонентах Next.js (например, в `getServerSideProps`, `getStaticProps` или внутри клиентских компонентов с помощью `useEffect` и `fetch`) используется стандартная функция `fetch` (или сторонние библиотеки вроде `axios`) для отправки запросов HTTP GET к эндпоинтам Strapi. Например, чтобы получить список статей, вы отправляете запрос `GET` на `/api/articles`. Strapi возвращает данные в формате JSON, которые затем обрабатываются и отображаются в компонентах Next.js.
• GraphQL API: Для работы с GraphQL API Strapi в Next.js используются специализированные GraphQL-клиенты (например, `Apollo Client`, `Relay`, `urql`). Вы определяете GraphQL-запросы для получения нужных данных и отправляете их на GraphQL-эндпоинт Strapi (обычно `/graphql`) с помощью запросов HTTP POST. GraphQL-клиент берёт на себя сериализацию запроса и десериализацию JSON-ответа.

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

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

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

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

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

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

Особенности статической генерации (SSG) и серверного рендеринга (SSR)

• SSG (Static Site Generation): При статической генерации в Next.js данные из API Strapi загружаются во время сборки. Next.js заранее генерирует HTML-страницы с уже встроенными данными. Это значит, что при посещении сайта браузер получает готовый HTML, что обеспечивает чрезвычайно быструю загрузку. Для этого используются функции вроде `getStaticProps`.
• SSR (Server-Side Rendering): При серверном рендеринге данные из API Strapi загружаются при каждом запросе пользователя к серверу Next.js. Next.js рендерит HTML-страницу на лету с актуальными данными и отправляет её в браузер. Это обеспечивает актуальность контента, но может немного увеличить время ответа сервера. Для этого используется функция `getServerSideProps`.

Итог

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