Caching

Nuxt Crouton uses Nuxt's built-in useFetch caching system for optimal performance. Each unique combination of collection and query parameters gets its own cache entry, and mutations automatically invalidate all related caches.

// Each combination of collection + query params = separate cache
collection:shopProducts:{}                      // All products
collection:shopProducts:{"page":1}              // Page 1
collection:shopProducts:{"page":2}              // Page 2
collection:shopProducts:{"locale":"en"}         // English products
collection:shopProducts:{"page":1,"locale":"fr"} // Page 1, French

How It Works

When you query data, Nuxt creates a cache entry based on the collection name and query parameters. For example, collection:shopProducts:{} for all products or collection:shopProducts:{"page":1} for page 1. After any mutation (create, update, or delete), all matching caches refresh automatically.

Cache Keys

Cache keys are generated based on:

1. Collection name
2. Query parameters (as JSON string)

// Key format: collection:{name}:{jsonQuery}

// No query params
'collection:shopProducts:{}'

// With page
'collection:shopProducts:{"page":1}'

// With multiple params
'collection:shopProducts:{"page":1,"locale":"en","search":"widget"}'

Manual Cache Refresh

You can manually refresh cached data using the refresh() method returned by useCollectionQuery. This is useful when you need to force a data reload without waiting for automatic invalidation.

Global Cache Invalidation

To invalidate all caches for a collection:

// Refresh all shopProducts queries
await refreshNuxtData((key) => key.startsWith('collection:shopProducts:'))

Cache Behavior with Mutations

When you perform a mutation using useCollectionMutation, all cache entries for that collection are automatically invalidated and refreshed. This includes all query variations (different pages, filters, search terms, etc.) to ensure data consistency across your application.

Reactive Queries

Queries automatically re-fetch when their parameters change. When reactive query parameters update, a new cache entry is created for the new parameter combination while the old cache entry remains until page refresh.

Cache Performance

The caching system provides fast subsequent loads because cached data is served instantly. It reduces server load by avoiding duplicate requests. Mutations automatically update all related caches to keep everything synchronized. Keep in mind that each unique query creates a separate cache entry, so more query variations mean more cache entries. Old cache entries remain until page refresh.

Best Practices

Use computed query params for reactive queries that should create separate cache entries per parameter combination.

Avoid dynamic cache keys that change on every render (like Date.now() as a query parameter). Instead, use the manual refresh() method when you need fresh data.

Leverage automatic invalidation - there's no need to manually refresh after mutations since useCollectionMutation does it automatically.

Cache Debugging

To debug caching issues, check the cache key format in your browser console. Cache keys follow the pattern collection:{collectionName}:{jsonQuery}. For example, a query with pagination would have a key like collection:shopProducts:{"page":1}.

Disabling Cache

If you need to disable caching for specific queries, use Nuxt's useFetch directly instead of useCollectionQuery and set key: null to disable caching.

Related Topics

• Querying Data
• Data Operations
• Performance Optimization