Создание блога на Strapi v5 и Nuxt 3 с SSR

Если вы хотите создать динамический сайт или блог с управляемым контентом, связка Strapi v5 + Nuxt 3 — идеальное решение. Strapi отвечает за хранение и управление контентом, а Nuxt 3 рендерит страницы на сервере для SEO и высокой производительности. В этой статье разберём, как быстро настроить такой проект.

1. Настройка Strapi

1. Создайте коллекцию articles с полями:
   • title — заголовок статьи
   • content — основной текст
   • author — автор статьи
   • publishedAt — дата публикации
2. В Settings → Roles & Permissions → Public включите доступ на find и findOne для коллекции articles.

Теперь Strapi предоставляет REST API:

GET https://your-strapi-site/api/articles       — список всех статей
GET https://your-strapi-site/api/articles/:id   — конкретная статья

В Strapi v5 данные приходят напрямую без attributes.

2. Настройка Nuxt 3 с SSR

Nuxt 3 по умолчанию поддерживает Server-Side Rendering (SSR). Чтобы подключить данные из Strapi, используем useFetch на страницах.

Пример главной страницы блога

<script setup lang="ts">
const { data: articles, pending, error } = await useFetch('https://your-strapi-site/api/articles')
</script>

<template>
  <div class="max-w-3xl mx-auto p-4">
    <h1 class="text-3xl font-bold mb-6">Блог</h1>

    <div v-if="pending">Загрузка...</div>
    <div v-else-if="error">Ошибка загрузки</div>
    <div v-else>
      <div v-for="article in articles" :key="article.id" class="mb-8 border-b pb-4">
        <h2 class="text-xl font-semibold">{{ article.title }}</h2>
        <p class="mt-2">{{ article.content }}</p>
        <small class="text-gray-500">Автор: {{ article.author }} | {{ article.publishedAt }}</small>
      </div>
    </div>
  </div>
</template>

✅ Страница рендерится на сервере, поэтому поисковые системы сразу видят полный контент.

3. Динамические страницы для отдельных статей

Создаём файл pages/articles/[id].vue:

<script setup lang="ts">
const route = useRoute()
const { data: article, pending, error } = await useFetch(`https://your-strapi-site/api/articles/${route.params.id}`)
</script>

<template>
  <div class="max-w-2xl mx-auto p-4">
    <div v-if="pending">Загрузка...</div>
    <div v-else-if="error">Ошибка загрузки</div>
    <div v-else>
      <h1 class="text-2xl font-bold mb-4">{{ article.title }}</h1>
      <p class="mb-4">{{ article.content }}</p>
      <small class="text-gray-500">Автор: {{ article.author }} | {{ article.publishedAt }}</small>
    </div>
  </div>
</template>

Nuxt автоматически создаст динамический маршрут /articles/:id и отрендерит его на сервере.

4. Основные преимущества SSR с Nuxt + Strapi

• SEO: поисковые системы видят готовую HTML-страницу.
• Высокая скорость загрузки: сервер рендерит страницу, фронтенд сразу получает готовый контент.
• Простая интеграция: напрямую подключаем REST API Strapi через useFetch.
• Гибкость фронтенда: можно использовать Vue-компоненты, Tailwind, Pinia и другие библиотеки.

5. Что дальше

1. Добавить компоненты для карточек статей.
2. Настроить фильтры и категории в Strapi и выводить их на фронтенде.
3. Подключить SEO-мета теги для каждой статьи через useHead.
4. Использовать Tailwind или другую CSS-библиотеку для удобного оформления.

Эта структура позволяет быстро создать рабочий блог или сайт с динамическим контентом, управляемым через Strapi, с SSR страницами на Nuxt 3 для SEO и высокой производительности.