Nuxt•2y ago

Correct setup for `swr`

I have a question: Why is the setup below not working? pages/index.vue

<template>
  <pre>{{ data?.data }}</pre>
</template>
<script setup>
const { data } = await useAsyncData(
  "home",
  async () => await $fetch("/api/data")
);
</script>

<template>
  <pre>{{ data?.data }}</pre>
</template>
<script setup>
const { data } = await useAsyncData(
  "home",
  async () => await $fetch("/api/data")
);
</script>

server/api/data.get.js

export default defineEventHandler((event) => {
  return {
    data: new Date().toISOString(),
  };
});

export default defineEventHandler((event) => {
  return {
    data: new Date().toISOString(),
  };
});

nuxt.config.js

export default defineNuxtConfig({
  routeRules: {
    "/**": { swr: 60 }
  },
});

export default defineNuxtConfig({
  routeRules: {
    "/**": { swr: 60 }
  },
});

This works below, but then I have to still do data fetches on every visit / route. But ideally I thought swr would just fetch once every 60s or whatever and keep a static page? nuxt.config.js

export default defineNuxtConfig({
  routeRules: {
    "/api/**": { swr: 60 }
  },
});

export default defineNuxtConfig({
  routeRules: {
    "/api/**": { swr: 60 }
  },
});

1 Reply

tierraOP•2y ago

I've deployed a test on Netlify with these settings

export default defineNuxtConfig({
  routeRules: {
    "/**": { isr: 15 },
    "/static": { prerender: true },
    "/dynamic": { isr: false },
  },
});

export default defineNuxtConfig({
  routeRules: {
    "/**": { isr: 15 },
    "/static": { prerender: true },
    "/dynamic": { isr: false },
  },
});

also, it looks like the page data is not updating after the routes from nuxt-link https://euphonious-melomakarona-134f3d.netlify.app/

Gaming

Programming

Correct setup for `swr`