eric Posts - Answer Overflow

eric

•Created by eric on 10/11/2024 in #❓・help

Error with Nuxt 3 server API routes with SWR caching on Netlify

We have a client site that's largely driven using data from Contentful. It's structured where we have server API routes that fetch the Contentful data. The site has been live on Netlify since June with no issues. To this point, we haven't configured any caching via route rules. But to try to get our Contentful API usage under control, we added SWR caching rules to our API routes:

routeRules: {
  '/api/page': { swr: 60 },
  '/api/event': { swr: 60 },
  …
}

routeRules: {
  '/api/page': { swr: 60 },
  '/api/event': { swr: 60 },
  …
}

We started with a TTL of 60 seconds. We deployed the change a couple days and everything seemed fine. But today the site began erroring: * The initial SSR page load would be fine * Navigating to another page would display the error template because the /api/page route was failing with this error: Function is not an on-demand builder This error is coming from Netlify, but I can't figure out why it just started happening (and only from the client side). Re-deploying to restart the server function did not fix it. Removing our route rules and re-deploying did fix the issue. Any insight?

1 replies

NNuxt

•Created by eric on 8/9/2024 in #❓・help

Change Pinia value before initial render

I'm using Pinia to store a boolean value that controls the visibility of a breadcrumbs component in the layout (false by default). Pages determine whether the breadcrumbs are displayed or not. In a page component in <script setup>, if I toggle the breadcrumbs to true, the breadcrumbs component isn't actually displayed until after the page is loaded on the client side, causing the content to abruptly shift down. Is it possible for this Pinia value change to happen during SSR so the breadcrumbs are visible at initial page load? Here's what I'm doing (page data is coming from a headless CMS):

/store/site.ts
--------------

export const useSiteStore = defineStore('site', () => {
  const breadcrumbs = ref(false)

  return {
    breadcrumbs
  }
}

/store/site.ts
--------------

export const useSiteStore = defineStore('site', () => {
  const breadcrumbs = ref(false)

  return {
    breadcrumbs
  }
}

/pages/[slug].vue
-----------------

<script setup>
import { useSiteStore } from '~/store/site'

const { breadcrumbs } = storeToRefs(useSiteStore())

const page = await useFetch('<API endpoint>', { slug: useRoute().params.slug })

if (page.showBreadcrumbs) {
  breadcrumbs.value = true
}
</script>

/pages/[slug].vue
-----------------

<script setup>
import { useSiteStore } from '~/store/site'

const { breadcrumbs } = storeToRefs(useSiteStore())

const page = await useFetch('<API endpoint>', { slug: useRoute().params.slug })

if (page.showBreadcrumbs) {
  breadcrumbs.value = true
}
</script>

app.vue
-------

<template>
  <Header />
  <Breadcrumbs v-if="breadcrumbs" />
  <NuxtPage />
  <Footer />
</template>

<script setup>
import { useSiteStore } from '~/store/site'

const { breadcrumbs } = storeToRefs(useSiteStore())
</script>

app.vue
-------

<template>
  <Header />
  <Breadcrumbs v-if="breadcrumbs" />
  <NuxtPage />
  <Footer />
</template>

<script setup>
import { useSiteStore } from '~/store/site'

const { breadcrumbs } = storeToRefs(useSiteStore())
</script>

1 replies

Gaming

Programming