N
Nuxt•2w ago
funkyj8157

Usecookie and isr cache conflict

usecookie cookie resets to default after isr cache is refreshed. So i have this code // Cookies const cookieBannerDismissed = useCookie("cookieBannerDismissed", { default: () => false, maxAge: 60 * 60 * 24 * 30, // 30 days in seconds path: "/", // Set the cookie for the root path }); const statisticsCookie = useCookie("statisticsEnabled", { default: () => true, maxAge: 60 * 60 * 24 * 30, // 30 days in seconds path: "/", // Set the cookie for the root path }); and in nuxtconfig routeRules: { "/": { isr: 1200 }, "/foodtrucks": { isr: 1200 }, "/foodtrucks/**": { isr: 1200 }, "/zo-werkt-het": { isr: 1200 }, "/over-ons": { isr: 1200 }, "/foodtruck-aanmelden": { isr: 1200 }, "/contact": { isr: 1200 }, }, so my issue is after 1200 seconds over the usecookie resets. So the banner is shown again. How to prevent this? I dont read anything in the docs
2 Replies
kapa.ai
kapa.ai•2w ago
Hi @funkyj8157. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're experiencing with useCookie and ISR (Incremental Static Regeneration) cache conflict is not directly addressed in the provided knowledge sources. However, I can offer some insights based on the available information and suggest a potential solution. The problem you're facing is that the cookie values are being reset to their default values after the ISR cache is refreshed. This is likely because the server-side rendered content is being cached, including the initial state of the cookies. To prevent this issue, you might want to consider the following approach: 1. Use client-side logic to set and read the cookie values. 2. Implement a check on the client-side to determine if the cookie should be shown or not. Here's a potential solution: 1. Keep your useCookie definitions as they are: 
const cookieBannerDismissed = useCookie("cookieBannerDismissed", {
  default: () => false,
  maxAge: 60 * 60 * 24 * 30, // 30 days in seconds
  path: "/", // Set the cookie for the root path
});

const statisticsCookie = useCookie("statisticsEnabled", {
  default: () => true,
  maxAge: 60 * 60 * 24 * 30, // 30 days in seconds
  path: "/", // Set the cookie for the root path
});
const cookieBannerDismissed = useCookie("cookieBannerDismissed", {
  default: () => false,
  maxAge: 60 * 60 * 24 * 30, // 30 days in seconds
  path: "/", // Set the cookie for the root path
});

const statisticsCookie = useCookie("statisticsEnabled", {
  default: () => true,
  maxAge: 60 * 60 * 24 * 30, // 30 days in seconds
  path: "/", // Set the cookie for the root path
});
2. Add a client-side check to determine if the banner should be shown: 
<script setup>
import { onMounted } from 'vue'

const showBanner = ref(true)

onMounted(() => {
  if (cookieBannerDismissed.value === true) {
    showBanner.value = false
  }
})

function dismissBanner() {
  cookieBannerDismissed.value = true
  showBanner.value = false
}
</script>

<template>
  <div v-if="showBanner">
    <!-- Your cookie banner content -->
    <button @click="dismissBanner">Dismiss</button>
  </div>
</template>
<script setup>
import { onMounted } from 'vue'

const showBanner = ref(true)

onMounted(() => {
  if (cookieBannerDismissed.value === true) {
    showBanner.value = false
  }
})

function dismissBanner() {
  cookieBannerDismissed.value = true
  showBanner.value = false
}
</script>

<template>
  <div v-if="showBanner">
    <!-- Your cookie banner content -->
    <button @click="dismissBanner">Dismiss</button>
  </div>
</template>
This approach ensures that the banner visibility is determined on the client-side after the component is mounted, which should prevent the ISR cache from interfering with the cookie state. Additionally, you might want to consider using the refreshCookie utility, which was introduced in Nuxt v3.10. This utility allows you to manually refresh useCookie values when a cookie has changed. You can read more about it in the Nuxt documentation on refreshCookie. If this solution doesn't fully resolve your issue, you might need to consider adjusting your ISR strategy or consult the Nuxt community forums for more specific guidance on handling cookie persistence with ISR. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@587229444641521689> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?