Nurev

Template generator for Nuxt configured with “on-demand revalidation” and support for multiple backends (WIP)

Available backends

• PocketBase

How to use it?

1. Run the script

bunx nurev

npx nurev

pnpm dlx nurev

2. After the script completes, start the backend in dev mode

make backend-dev

3. Then start frontend in dev mode

make frontend-dev

How it works?

1. Interactive prompts: Asks you to choose a package manager (bun, npm, or pnpm) and a backend (PocketBase)
2. Template copying: Copies the base Nuxt template, backend-specific files, and package-manager-specific configuration to your current directory
3. Installation & setup: Runs make install to install dependencies and make setup to initialize the project
4. Backend configuration: Applies backend-specific setup (e.g., PocketBase configuration)
5. Ready to use: Your Nuxt project with on-demand revalidation is ready

On-Demand Revalidation

The caching system uses a webhook pattern between PocketBase and Nuxt:

1. Cache storage: Nuxt routes use defineCachedEventHandler with swr: true (stale-while-revalidate) and maxAge: 604800 (1 week). Route rules set prerender: true for / and swr: true for /posts/**

2. Backend hooks: Backend (PocketBase) registers hooks on OnRecordAfterCreateSuccess, OnRecordAfterUpdateSuccess, OnRecordAfterDeleteSuccess, OnBackupCreate and OnBackupRestore for collections defined in TABLES_TRIGGER

3. Webhook notification: When a record changes, PocketBase sends an authenticated POST (JWT Bearer token) to /api/private/reloadcache with the table name and record ID

4. Selective invalidation: The Nuxt endpoint validates the JWT and uses useStorage("cache") to remove only cache entries matching the changed table and record ID. Backup events trigger a full cache clear

5. Next request: Subsequent requests fetch fresh data and repopulate the cache

Pros and Cons

Pros

• ⚡ Performance: Cached responses are served instantly without hitting the database on each request
• 📉 Reduced backend load: Fewer API calls to PocketBase, lowering server resource usage
• 🔄 Fresh data on demand: Cache is invalidated only when data actually changes, avoiding stale content
• 🚀 Scalability: SWR (stale-while-revalidate) serves cached content while refreshing in the background, keeping response times low under high traffic

Cons

• 🔗 Tight coupling: The backend must know the frontend URL and send webhooks, creating a dependency between services
• 🌐 Network reliability: If the webhook fails to reach Nuxt (network issues, downtime), the cache won't be invalidated and stale data persists
• 🖥️ Single-server limitation: Cache is stored in-memory/local storage, so this approach doesn't work well with multi-instance deployments without a shared cache layer (e.g., Redis)
• ⚙️ Complexity: Requires configuring JWT secrets, environment variables, and ensuring both services are running and communicating correctly