Mettez Nuxt en cache par étiquette, en une ligne.

Utilisation

Pages

Passez l'événement de requête. Côté client, useRequestEvent() est undefined, donc l'appel ne fait rien sans risque.

<script setup>
import { cache } from '@canner-ca/nuxt-cache';

const route = useRoute();
const { data: post } = await useAsyncData(() => fetchPost(route.params.slug));

cache(useRequestEvent(), { ttl: 3600, tags: [post.value.id, 'blog-listing'] });
</script>

Routes serveur

Dans server/api ou server/routes, passez l'événement directement.

// server/api/posts.get.ts
import { cache } from '@canner-ca/nuxt-cache';

export default defineEventHandler((event) => {
  cache(event, { ttl: 3600, tags: ['blog-listing'] });
  return getPosts();
});

Middleware serveur

Marquez les chemins correspondants comme cachables, peu importe ce qui les rend.

// server/middleware/cache.ts
import { cache } from '@canner-ca/nuxt-cache';

export default defineEventHandler((event) => {
  if (event.path.startsWith('/blog/')) {
    cache(event, { ttl: 3600, tags: ['blog-listing'] });
  }
});

Pourquoi c'est sûr avec Nuxt

Nuxt fonctionne presque tel quel : la navigation côté client récupère les charges utiles depuis des URL distinctes, donc une URL de page ne renvoie que son document HTML. La seule exception à même URL est la coquille SPA que Nuxt renvoie lorsqu'une requête envoie x-nuxt-no-ssr — le proxy de Canner laisse passer ces requêtes, de sorte que seul le vrai document rendu côté serveur est mis en cache. Vous ne configurez rien de tout cela.

Options

Il ne fait qu'ajouter des en-têtes

L'utilitaire ne retire ni ne modifie jamais ce que votre application a posé. Il ne supprime pas Set-Cookie — Canner refuse déjà de mettre en cache une réponse qui pose un témoin, donc vous obtenez un avertissement en développement et votre témoin reste intact. Une durée invalide ne pose aucun en-tête et avertit; une cible null ne fait rien (le rendu côté client); seule une cible non prise en charge lève une erreur.

Puis dirigez votre CMS vers Canner

Le côté code est terminé. L'autre moitié, ce sont deux valeurs à copier — l'URL du webhook et un en-tête Authorization — affichées préremplies dans le tableau de bord sous Réglages → Cache. Guide complet du cache.