Nuxt•2w ago

Server - nitro cache "$fetch"ed data ?

Hello. I am sending an useFetch request from client to server, the server then $fetch's from the database. How can I cache the fetched data on the server?

14 Replies

kapa.ai•2w ago

Hi @Thick Black W. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To cache data fetched on the server in a Nuxt (Nitro) application, you should use Nitro's built-in caching capabilities. Nitro provides several ways to cache responses or data, including route rules and utility functions. 1. Caching API Route Responses with Route Rules You can define caching strategies for your API routes directly in your nuxt.config.ts using route rules. For example, to cache an API route for 1 hour (3600 seconds) and use stale-while-revalidate (SWR):

export default defineNuxtConfig({
  routeRules: {
    '/api/your-endpoint': { swr: 3600 }
  }
})

export default defineNuxtConfig({
  routeRules: {
    '/api/your-endpoint': { swr: 3600 }
  }
})

This will cache the response of /api/your-endpoint on the server for 1 hour and serve stale data while revalidating in the background. You can also use isr for CDN-level caching on supported platforms like Vercel or Netlify, or prerender for static generation. More details and options are available in the Nuxt rendering concepts documentation. 2. Using defineCachedEventHandler in Nitro If you want to cache the result of a specific handler (e.g., the result of a $fetch from your database), you can use defineCachedEventHandler in your API route:

export default defineCachedEventHandler(async (event) => {
  // Fetch data from your database
  const data = await $fetch('your-database-endpoint')
  return data
}, {
  maxAge: 60 * 60 // cache for 1 hour (in seconds)
})

export default defineCachedEventHandler(async (event) => {
  // Fetch data from your database
  const data = await $fetch('your-database-endpoint')
  return data
}, {
  maxAge: 60 * 60 // cache for 1 hour (in seconds)
})

This will cache the handler's response in memory or according to your configured storage provider. You can also customize the cache key and storage provider if needed. This approach is covered in detail in the Nitro caching video and is part of Nitro's core features. 3. Custom Storage Providers Nitro supports different storage providers (memory, LRU, Redis, etc.) for caching. You can configure these in your nuxt.config.ts under the nitro.storage option if you need more advanced caching strategies. --- Summary:
- Use route rules (swr, isr, etc.) for route-level caching. - Use defineCachedEventHandler for handler-level caching of $fetched data. - Optionally configure custom storage providers for advanced scenarios. For more details, see the Nuxt rendering and caching documentation and the Nitro caching video. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

Thick Black WOP•2w ago

@kapa.ai where can I find the api doc for $fetch options?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You can find the API documentation for $fetch options in the Nuxt $fetch documentation. This page explains that Nuxt uses ofetch under the hood, so the options available for $fetch are the same as those provided by ofetch. The documentation also provides usage examples and details about passing headers, cookies, and other options specific to Nuxt's integration of $fetchNuxt $fetch API. For a full list of all possible options, you may also refer to the ofetch documentation, as linked from the Nuxt docs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

Thick Black WOP•2w ago

@kapa.ai is the $fetch on client the same as server?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The $fetch function in Nuxt is available both on the client and the server, but its behavior differs between the two environments: - On the client (browser): $fetch works like a standard HTTP request using the Fetch API. User headers (like cookies) are sent directly to the API, and the request is made from the user's browser. - On the server (during SSR): $fetch can directly call internal API routes by emulating the request, which saves an additional HTTP call. However, for security reasons, $fetch on the server does not forward the user's browser cookies or certain headers, nor does it pass cookies from the fetch response back to the client. This is to prevent issues like Server-Side Request Forgery (SSRF) and authentication misuse. If you need to forward headers and cookies on the server, you must do so manually or use useFetch, which handles this automatically for internal requestsNuxt $fetch API. So, while the API is the same, the behavior—especially regarding headers and cookies—is different between client and server environments in Nuxt. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

Thick Black WOP•2w ago

@kapa.ai what are the "options" differences on client and server side?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The knowledge sources do not provide a detailed, explicit list of differences in the available $fetch options between client and server in Nuxt. However, they do highlight some important behavioral differences: - On the client:
$fetch sends user headers (like cookies) directly to the API. The browser environment handles headers and cookies as with any standard HTTP request. - On the server (SSR):
For security reasons, $fetch does not forward the user's browser cookies or certain headers, nor does it pass cookies from the fetch response back to the client. If you need to forward headers and cookies on the server, you must do so manually (for example, by using useRequestFetch or manually passing headers). Some headers are explicitly not meant to be forwarded, such as host, accept, and othersNuxt $fetch API. The actual set of options you can pass to $fetch (such as method, headers, body, etc.) is the same on both client and server, as $fetch is based on ofetch. The main difference is in how certain options (especially headers and cookies) are handled due to the environment and security considerations. If you need to ensure headers and cookies are forwarded during SSR, you should use useFetch or useRequestFetch, which handle this automaticallyNuxt $fetch API. Summary:
- The available options for $fetch are the same on both client and server. - The handling of headers and cookies differs due to security and environment constraints. - Some headers are not forwarded on the server for security reasons. If you need more granular details about the options themselves, you can refer to the ofetch options documentation, as Nuxt's $fetch is a wrapper around ofetch. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

Thick Black WOP•2w ago

@kapa.ai no, the "Options" object, what are the differences? does server take "method" in the options. In the nitro documentation for $fetch, I didn't see all the $fetch options of nuxt client.

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the available knowledge sources, the $fetch function in Nuxt uses ofetch under the hood, and the options object for $fetch is consistent between client and server. This means you can use options like method, headers, body, etc., on both the client and the serverNuxt $fetch API. The documentation explicitly shows usage of the method option (e.g., for POST requests) in both client and server contexts, and there is no indication that the server ignores or omits support for any of the standard options such as methodNuxt $fetch API. However, the main difference is not in the available options themselves, but in how certain options—especially headers and cookies—are handled for security reasons on the server. For example, on the server, $fetch does not automatically forward the user's browser cookies or some headers, and you must manually pass them if neededNuxt $fetch API.

Summary:
- The $fetch options object (including method) is the same on both client and server. - The difference lies in the handling of headers and cookies, not in the options themselves. - If you need to see all possible options, refer to the ofetch options documentation, as Nuxt's $fetch is a wrapper around ofetch.

If you are missing documentation for specific options in the Nitro docs, it's because Nuxt relies on ofetch for the core $fetch implementation, and the options are inherited from thereNuxt $fetch API. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

Gaming

Programming

Server - nitro cache "$fetch"ed data ?

Did you find this page helpful?