Performance tips

They are a lot of features and knobs you can tune to improve the performance of your app. This page lists some of the recommend settings.

General

You should regularly update to the latest available version of @opennextjs/cloudflare (opens in a new tab) to benefit from the latest performance and security updates.

Caching

Caching can drastically improves the performance of your application by only fetching data / re-generating your pages when they change.

To get the most out of caching, you should start by reading how Next.js implements caching. The "Caching in Next.js" guide (opens in a new tab) is a good place to start.

You should then check how to configure caching for the OpenNext adapter. See below for some advice.

Incremental Cache

The Incremental cache is the store containing all the cached data (i.e. pages, fetch, unstable_cache).

You should use the Workers Static Assets based cache if your site is SSG. It is the fastest available option. Note that as Workers Static Assets are read-only, this option can not be used with revalidation.

When your app uses re-validation, use the R2 based store instead. We recommend the following settings to get the best perfomance:

• use regional cache by wrapping the handler into withRegionalCache(...)
  • use the long-lived mode
  • you should not need to explicitly set shouldLazilyUpdateOnCacheHit nor bypassTagCacheOnCacheHit as they are set to the most performant mode by default
• setup automatic cache purge

Tag Cache

The Tag Cache is not properly a cache. It only stores the timestamp at which tags have been revalidated.

It should be configured for App-Router based app using revalidateTag or revalidatePath.

The D1 based tag cache should only be used if your site receives low traffic. The Durable Object based tag cache is the recommend option for most sites. See the reference guide for the available configuration options.

Application using revalidateTag exclusively (and not revalidatePath) will benefit from using the withFilter wrapper with the softTagFilter filter.

Static Assets

You should add a public/_headers file to cache the static assets served by your app.

See the Cloudflare documentation (opens in a new tab) for a detailed explanation of the default and the syntax.

Multiple Workers (opens in a new tab)

Deploying the middleware and the main server to distinct Workers can help with performance. As when a page can be retrieved from the cache, the main server can be fully bypassed.

Troubleshooting performance

You can profile the code to troubleshoot performance issues.

Building unminified code

Code profiles are much easier to read when the code is not minified, you can use the following settings to generate unminified code

next.config.ts

const nextConfig = {
  // ...
  experimental: {
    serverMinification: false,
  },
  webpack: (config) => {
    config.optimization.minimize = false;
    return config;
  },
};

CLI

Use the --noMinify option when building the app:

opennextjs-cloudflare build --noMinify

Record a profile

You should first launch a local version of your application by running

opennextjs-cloudflare preview

Once the app is running, follow the steps from the Workers doc (opens in a new tab) to record a CPU profile.

You can then inspect the profile and check if any particular section of the application is unexpectedly slow.