Nuxt•2w ago

Fastly Edge Caching with Nuxt 3 and NuxtLinks

Hey everyone, I have a question about how Fastly edge caching works with a Nuxt 3 application. I'm trying to understand if Fastly's edge caching is effective when a user navigates between pages using NuxtLinks and client-side routing. My current understanding is that Fastly caching only applies to the initial request from the CDN. So, if a user clicks a NuxtLink to an article, that request is handled by Nuxt's client-side routing, and Fastly's edge cache wouldn't be used. Is this correct, or am I missing something?

5 Replies

kapa.ai•2w ago

Hi @Nicklas Degnebolig. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Your understanding is correct: Fastly's edge caching (or any CDN edge caching) is only effective for requests that actually reach the CDN—typically, the initial page load or any full-page reloads. When a user navigates between pages using NuxtLink, Nuxt performs client-side routing, which means the browser fetches only the necessary data and components via JavaScript without making a new full-page HTTP request to the server. As a result, these navigations do not trigger a new request to the CDN, so Fastly's edge cache is not involved in those client-side navigations. NuxtLink leverages Vue Router for internal navigation, and after the initial load, page transitions are handled entirely on the client side, preventing full-page refreshes and thus bypassing the CDN for subsequent navigations within the app. Fastly (or any CDN) only caches and serves the initial HTML and assets requested from the server; client-side navigations do not go through the CDN again unless the user performs a hard reload or directly accesses a new URL in the browser address bar. This is confirmed in the Nuxt documentation, which explains that NuxtLink uses client-side navigation to avoid full-page reloads and improve performance by prefetching components and payloads for linked pages, but does not mention any CDN involvement in these navigations Docs: NuxtLink. So, Fastly edge caching is effective for the initial request and any direct navigations (like a hard reload or opening a link in a new tab), but not for client-side navigations triggered by NuxtLink. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@141551222757916673> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Nicklas DegneboligOP•2w ago

@kapa.ai so what is the way of using fastly on nuxtLink clicks then? What if i i made a api in nitro that made my backend request, i guess i could get fastly to cache that nitro endpoint?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You are correct in your thinking: while Fastly edge caching does not apply to client-side NuxtLink navigations for full HTML pages, you can leverage Fastly to cache API responses that your Nuxt app fetches—such as through a Nitro server endpoint. How this works: - When you create an API endpoint in Nitro (e.g., /api/articles), you can configure Fastly to cache responses from this endpoint. - Your Nuxt app, when navigating via NuxtLink, can use useFetch or similar composables to fetch data from this API endpoint. - These API requests are real HTTP requests, so they go through Fastly and can be cached at the edge, improving performance for subsequent users. This approach is commonly used for optimizing data fetching in Nuxt apps, especially for content that doesn't change frequently. You can also use Nitro's route rules to control cache headers and behavior for your API endpoints, which Fastly will respect when configured properly Docs: Server Endpoints & Middleware. Example:

// server/api/articles.ts
export default defineEventHandler(async (event) => {
  // Fetch from your backend or database
  // Optionally set cache headers here
  return { /* article data */ }
})

// server/api/articles.ts
export default defineEventHandler(async (event) => {
  // Fetch from your backend or database
  // Optionally set cache headers here
  return { /* article data */ }
})

Then, in your Nuxt page/component:

const { data: articles } = await useFetch('/api/articles')

const { data: articles } = await useFetch('/api/articles')

Fastly can cache the /api/articles responses, so even if navigation is client-side, the API data is served from the edge cache. Summary:
- Fastly cannot cache client-side navigations' HTML, but it can cache API responses. - Use Nitro endpoints for your data, and configure Fastly to cache those endpoints. - This pattern is effective for improving performance on client-side navigations in Nuxt apps Nuxt Image with Fastly. If you need more control, you can also use Nitro's route rules to set cache headers for your API endpoints, which will help Fastly cache them appropriately Docs: Server. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@141551222757916673> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Fastly Edge Caching with Nuxt 3 and NuxtLinks

Did you find this page helpful?