Основной компонент Nuxt Render Cache - это CacheRender, который предоставляет декларативный способ кеширования рендеринга Vue компонентов.

CacheRender

Компонент CacheRender автоматически выбирает подходящую реализацию (серверную или клиентскую) в зависимости от среды выполнения и обеспечивает двухуровневое кеширование с TTL стратегией.

Базовое использование

<template>
  <CacheRender cache-key="page:home" :hard-ttl="300" :soft-ttl="60">
    <div>
      <h1>Главная страница</h1>
      <ExpensiveComponent />
      <AsyncDataComponent />
    </div>
  </CacheRender>
</template>

Пропы и настройки

Prop	Type	Required	Default	Description
cacheKey	string	✅	-	Уникальный ключ для идентификации кешированного контента. Должен быть уникальным для каждого отдельного куска контента.
hardTtl	number	✅	-	Время жизни кеша в секундах до полного истечения (Hard TTL). После истечения этого времени кеш будет полностью обновлен.
softTtl	number	✅	-	Время жизни кеша в секундах до фонового обновления (Soft TTL). Когда истекает soft TTL, но hard TTL еще актуален, происходит фоновое обновление без блокировки пользователя.
cacheTags	string[]	❌	[]	Массив тегов для групповой инвалидации кеша. Позволяет очищать связанные данные при изменении контента или структуры.

Примеры использования

Кеширование целой страницы

<template>
  <CacheRender
    cache-key="page:index"
    :hard-ttl="300"
    :soft-ttl="60"
    :cache-tags="['page', 'home', 'public']"
  >
    <div>
      <HeroSection />
      <FeaturesList />
      <Testimonials :data="testimonials" />
      <LatestNews :articles="news" />
    </div>
  </CacheRender>
</template>

Кеширование компонентов с данными

<template>
  <CacheRender
    cache-key="products:list"
    :hard-ttl="600"
    :soft-ttl="120"
    :cache-tags="['products', 'catalog']"
  >
    <div class="product-grid">
      <ProductCard
        v-for="product in products"
        :key="product.id"
        :product="product"
      />
    </div>
  </CacheRender>
</template>

Кеширование API данных

<template>
  <CacheRender
    cache-key="dashboard:stats"
    :hard-ttl="180"
    :soft-ttl="30"
    :cache-tags="['dashboard', 'stats', 'realtime']"
  >
    <div class="dashboard">
      <MetricCard title="Users" :value="userCount" />
      <MetricCard title="Revenue" :value="revenue" />
      <ChartComponent :data="chartData" />
    </div>
  </CacheRender>
</template>

Продвинутые примеры

Динамические ключи кеша

<template>
  <div>
    <!-- Кеш зависит от параметров запроса -->
    <CacheRender
      :cache-key="`search:query:${query}:page:${page}`"
      :hard-ttl="300"
      :soft-ttl="60"
      :cache-tags="['search', 'results']"
    >
      <SearchResults :query="query" :page="page" />
    </CacheRender>

    <!-- Кеш зависит от локали -->
    <CacheRender
      :cache-key="`page:about:locale:${$i18n.locale}`"
      :hard-ttl="3600"
      :soft-ttl="1800"
      :cache-tags="['page', 'about', 'i18n']"
    >
      <AboutPage />
    </CacheRender>
  </div>
</template>

Лучшие практики

1. Стратегия ключей кеша

// Рекомендуемая структура ключей
const cacheKeys = {
  // Страницы
  pages: {
    home: 'page:home',
    about: 'page:about',
    products: 'page:products',
  },

  // Компоненты
  components: {
    header: 'component:header',
    footer: 'component:footer',
    sidebar: 'component:sidebar',
  },

  // API данные
  api: {
    users: 'api:users:list',
    products: 'api:products:list',
    dashboard: 'api:dashboard:stats',
  },

  // Динамические ключи
  user: (userId: string) => `user:${userId}:feed`,
  product: (productId: string) => `product:${productId}:details`,
  search: (query: string, page: number) => `search:${query}:page:${page}`,
};

2. TTL стратегии

// Разные стратегии TTL для разных типов контента
const ttlStrategies = {
  // Статический контент
  static: { hard: 3600, soft: 1800 }, // 1 час / 30 мин

  // Динамический контент
  dynamic: { hard: 600, soft: 120 }, // 10 мин / 2 мин

  // Реальное время
  realtime: { hard: 60, soft: 30 }, // 1 мин / 30 сек

  // Персонализированный
  personalized: { hard: 900, soft: 300 }, // 15 мин / 5 мин

  // API данные
  api: { hard: 300, soft: 60 }, // 5 мин / 1 мин
};

Производительность

Метрики производительности

• Время первого рендера: 50-200ms (зависит от сложности компонента)
• Время из кеша: 1-5ms (почти мгновенная отдача)
• Экономия CPU: до 90% на повторных запросах
• Снижение latency: 10-100x быстрее для сложных компонентов

Оптимизации

1. Правильный выбор TTL: Для статического контента используйте длинные TTL, для динамического - короткие
2. Умное тегирование: Группируйте связанные компоненты под общими тегами для эффективной инвалидации
3. Избегайте перекеширования: Не кешируйте компоненты с частыми изменениями данных
4. Мониторьте hit rate: Следите за эффективностью кеширования через API статистики

Отладка

Логи кеширования

Компонент автоматически логирует операции кеширования:

[RenderCache] Рендерим компонент для ключа: page:home
[RenderCache] Рендер завершен за 45ms для ключа: page:home
[RenderCache] Данные сохранены в кеш с TTL 300s для ключа: page:home
[RenderCache] Возвращаем свежие данные из кеша для ключа: page:home

Проверка состояния кеша

Используйте API для проверки состояния кеша:

# Проверить конкретный ключ
curl -H "x-render-cache-api: token" http://localhost:3000/api/render-cache/keys/page:home

# Получить все ключи
curl -H "x-render-cache-api: token" http://localhost:3000/api/render-cache/keys

Распространенные проблемы

Проблема: Кеш не обновляется

Решение:

• Проверьте TTL значения
• Убедитесь что теги правильно установлены
• Используйте API для принудительной инвалидации

Проблема: Производительность хуже чем без кеша

Решение:

• Увеличьте TTL для редко изменяющегося контента
• Оптимизируйте компоненты перед кешированием
• Проверьте настройки Redis

Проблема: Конфликты ключей

Решение:

• Используйте уникальные ключи для разных контентов
• Добавляйте параметры в ключ при необходимости
• Следуйте соглашениям о наименовании ключей