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>


server/api/data.get.js
export default defineEventHandler((event) => {
  return {
    data: new Date().toISOString(),
  };
});


nuxt.config.js
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 }
  },
});
Was this page helpful?