Configure Next.js App Router Data Cache clearing with Uniform SDK

Option 1: Disabling Cache

⚠️ This option might be something you want to entertain for local development, but it is not recommended for production.

To completely disable the cache for Uniform-related APIs:

1. Open the uniform.server.config.js file in your project.

2. Set the configuration for canvasCache to use no-cache:

module.exports = { defaultConsent: true, canvasCache: { type: "no-cache" }, };

This configuration ensures that the application fetches fresh data from Uniform with each request, effectively bypassing any cached data.

Option 2: Implementing a Webhook

Alternatively, you can configure a webhook to clear the Next.js cache when content is modified in the Uniform UI.

Implementing the Hook Configuration

1. Open the /app/api/preview/route.ts file.

2. Implement the handler for clearing the cache:

import { createPreviewGETRouteHandler, createPreviewPOSTRouteHandler, createPreviewOPTIONSRouteHandler, } from '@uniformdev/canvas-next-rsc/handler'; export const GET = createPreviewGETRouteHandler({ playgroundPath: '/playground', resolveFullPath: ({ path }) => (path ? path : '/playground'), }); export const POST = createPreviewPOSTRouteHandler(); export const OPTIONS = createPreviewOPTIONSRouteHandler();

Note that the POST handler in this configuration is responsible for clearing the Next.js cache.

The cache clearing handler covers most of the scenarios of entity updates in Uniform. If you need more advanced cache clearing technique you can implement your own handler.

Configuring the Webhook in Uniform

1. Navigate to Project -> Settings -> Webhook in the Uniform UI.

2. Click Add endpoint

3. Set the Endpoint URL to point to your app's preview route (e.g., https://myapp.com/api/preview?secret=<value from your .env UNIFORM_PREVIEW_SECRET>).

4. Subscribe to the following events to trigger cache clear (note that composition:changed is skipped not to cause extra cache clearing on save.

CompositionPublished
CompositionDeleted
ProjectMapNodeUpdate
ProjectMapNodeInsert
ProjectMapNodeDelete
ManifestPublished
RedirectInsert
RedirectUpdate
RedirectDelete

5. Save the webhook configuration.

This setup ensures that the revalidate function is triggered for composition routes whenever compositions are updated in the Uniform UI. This approach keeps your application cache consistent without requiring a complete bypass of caching.

More details about how revalidate works can be found in the Next.js documentation: https://nextjs.org/docs/app/api-reference/functions/revalidateTag