Configure cache
Next.js render cache basics
The NextJS renderer relies on the caching mechanism built by the framework. For more information, see Next.js' documentation on Caching in Next.js.
Next.js supports various caching mechanisms at different levels, including static generation (SSG), server-side rendering (SSR), and API routes. For static pages, Next.js automatically caches them in the .next directory.
Next.js does not handle database caching out of the box. Database caching would typically be managed by your database system (e.g., Redis, Memcached) or within your API routes using a custom implementation.
NOTE: The Sitefinity settings for caching per page is not respected. This is a next.js limitation. You can control the caching of specific pages using getStaticProps (SSG), getServerSideProps (SSR), and getStaticPaths. By setting revalidate, you control when a page should be regenerated and cached.
For libraries, caching is generally handled by the build tools or a CDN, not directly within Next.js. Images and other static files served from the public directory can be cached by the browser or a CDN.
SDK request caching is also handled by next.js. Every GET request also accepts additionalFetchData parameters to configure cache per request. This can be set on initServerSideRestSdk for default use on every request. And it also can be confugired in the enviroment file by SF_SDK_CACHE and SF_SDK_CACHE_REVALIDATE settings. For more information refer to SDK cache configuration.
Full route cache control
To control caching behavior for a full route, you can set the dynamic property in your layout.tsx or page.tsx files. This determines whether the page is cached statically or revalidated dynamically.
export const dynamic = 'force-dynamic'; // or 'force-static' or 'auto'
Options:
const dynamic = 'force-dynamic'; — Forces dynamic rendering on each request, bypassing any static cache.
const dynamic = 'force-static'; — Forces static rendering and caches the page for a specific time interval.
const dynamic = 'auto'; — Allows Next.js to automatically decide based on the presence of dynamic data fetching.
NOTE: When caching with 'force-static', the searchParams in the request context will be empty. If searchParams are needed within a widget, they can be accessed on the client side using useSearchParams from 'next/navigation'.
For more information you can see the next.js documentation for route handlers and full route cache
Conditional dynamic routing
When dealing with dynamic routes (e.g., [id].tsx), you can specify whether parameters should be treated dynamically:
export const dynamicParams = true; // false to disable dynamic routing parameters
Parallel routes and conditional routes
In Next.js, parallel routes allow rendering multiple components or pages simultaneously within different sections of a layout. Conditional routes dynamically choose which route or component to render based on specific conditions. For more information you can refer to the next.js documentation about parallel routes
Route a request on a condition
To dynamically set the caching strategy (force-static, auto, or force-dynamic) for a route based on conditions such as cookies, authentication status, or route segments in Next.js, you can implement custom logic to redirect the request to a different page slug, where the cache type and revalidation time are configured
SDK cache configuration
You can configure the default cache type or the revalidation duration in the environment settings file (e.g., env.development). If these properties are not specified during the REST SDK initialization or passed with GET requests, the cache settings will fallback to the configuration provided in the environment settings, if available.
In the configuration, you can specify SF_SDK_CACHE and SF_SDK_CACHE_REVALIDATE.
SF_SDK_CACHE_REVALIDATE: This property sets the cache lifetime of a resource in seconds. The possible values are:
- false: Cache the resource indefinitely. This is semantically equivalent to revalidate: Infinity. Note that the HTTP cache may evict older resources over time.
- 0: Prevent the resource from being cached.
- number (in seconds): Specify that the resource should have a cache lifetime of at most number seconds.
SF_SDK_CACHE: This property configures how the request interacts with the Next.js data cache. For more details, see Next.js documentation on data cache. The possible values are:
no-store: Next.js fetches the resource from the remote server on every request without checking the cache, and it does not update the cache with the downloaded resource. The no-cache option behaves the same way as no-store.
force-cache: Next.js looks for a matching request in its Data Cache. If a fresh match is found, it is returned from the cache. If no match or a stale match is found, Next.js fetches the resource from the remote server and updates the cache with the downloaded resource.
For more information, you can see the Next.js documentation on caching.