Lors de l'optimisation SEO avec Nuxt 3, la gestion du cache des composants et des pages est crucaile. Cet article explique comment utiliser correctement KeepAlive dans Nuxt 3 pour mettre en cache des pages entières ou des composants spécifiques, en évitant les réinitialisations d'état non désirées.

Cache de Page avec KeepAlive

KeepAlive est un composant intégré à Vue.js qui permet de conserver l'état des composants lorsqu'ils sont désactivés au lieu de les détruire complètement. Dans les applications Vue traditionnelles, cela implique souvent une configuration complexe du routeur. Cependant, Nuxt 3 simplifie ce processus.

Pour activer la mise en cache des pages, vous pouvez directement passer une configuration keepalive au composant NuxtPage dans votre fichier app.vue.

<!-- app.vue -->
<template>
    <div>
        <NuxtPage :keepalive />
    </div>
</template>

<script setup lang="ts">
    // Configure KeepAlive pour mettre en cache la page nommée "index"
    const keepalive = {
        include: ["index"],
    };
</script>

Dans cet exemple, si vous avez une page pages/index.vue, elle sera mise en cache. Lorsque vous naviguez vers une autre page puis revenez à /, l'état de la page index (par exemple, la valeur d'un compteur) sera préservé.

Pour vérifier que le composant est actif et non recréé, vous pouvez utiliser le hook onActivated :

<script setup lang="ts">
    import { ref, onActivated } from 'vue';

    const data = ref(0);

    onActivated(() => {
        console.log("La page est activée !");
    });
</script>

Gestion des Noms de Composants Complexes

Pour les routes dont les chemins sont complexes (par exemple, pages/news/[id].vue ou pages/admin/settings.vue), il est recommandé de définir explicitement le nom du composant à l'aide de defineOptions pour garantir que le mécanisme include de KeepAlive fonctionne correctement.

<!-- pages/index.vue -->
<script setup lang="ts">
    defineOptions({
      name: "HomePage"
    });
</script>

<!-- pages/news/detail.vue -->
<script setup lang="ts">
    defineOptions({
      name: "NewsDetailPage"
    });
</script>

<!-- app.vue -->
<template>
    <div>
        <NuxtPage :keepalive />
    </div>
</template>

<script setup lang="ts">
    const keepalive = {
        include: ["HomePage", "NewsDetailPage"], // Utilisation des noms définis
    };
</script>

Cache de Composant avec KeepAlive

KeepAlive peut également être utilisé pour mettre en cache des composants individuels au sein d'une page, particulièrement lorsqu'ils sont rendus conditionnellement avec v-if. Cela empêche la réinitialisation de leur état interne lorsqu'ils sont masqués puis réaffichés.

Considérez l'exemple suivant où nous alternons entre un composant Counter et un composant TextTip :

<!-- components/Counter.vue -->
<template>
    <div>
        <h3>Compteur</h3>
        <p>Valeur: {{ count }}</p>
        <button @click="count++">Incrémenter</button>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    const count = ref(0);
</script>

<!-- components/TextTip.vue -->
<template>
    <div>
        <h3>Texte</h3>
        <p>Contenu: {{ text }}</p>
        <button @click="text += ' A'">Ajouter du texte</button>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    const text = ref("Texte initial");
</script>

<!-- pages/index.vue -->
<template>
    <button @click="showCounter = !showCounter">
        {{ !showCounter ? "Afficher Compteur" : "Afficher Texte" }}
    </button>
    <hr />
    <KeepAlive :include="['CounterComponent']">
        <CounterComponent v-if="showCounter" />
        <TextTipComponent v-else />
    </KeepAlive>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import CounterComponent from '@/components/Counter.vue';
    import TextTipComponent from '@/components/TextTip.vue';

    const showCounter = ref(true);

    // Assurez-vous que les noms correspondent aux noms définis ou aux noms de fichiers
    // Si Counter.vue n'a pas de defineOptions, son nom sera "Counter"
    // Si TextTip.vue n'a pas de defineOptions, son nom sera "TextTip"
    // Ici, nous supposons que les noms par défaut sont utilisés ou définis explicitement.
</script>

Dans cet exemple, le composant CounterComponent sera mis en cache grâce à la driective KeepAlive et à la liste include. Ainsi, toute modifciation apportée à son état interne (count) sera conservée lors de la réapparition du composant. Le composant TextTipComponent, n'étant pas dans la liste include, sera réinitialisé à chaque fois qu'il sera affiché.

Définition Explicite des Noms de Composants

Pour éviter toute ambiguïté, notamment avec les composants dans des sous-dossiers (par exemple, components/Val/Input.vue) ou pour s'assurer que le nom utilisé dans KeepAlive correspond bien au composant attendu, il est fortement recommandé d'utiliser defineOptions pour définir le nom du composant.

<!-- components/Val/Input.vue -->
<template>
    <div>
        <h3>Entrée</h3>
        <input v-model="inputValue" />
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    const inputValue = ref("");

    defineOptions({
        name: "ValInputComponent" // Nom explicite
    });
</script>

Alternativement, pour les composants définis avec l'Options API (sans setup), vous pouvez utiliser export default { name: 'ComponentName' }.