Hi! We’re experiencing issues with our custom cache. While caching works for API requests, it fails for pages. Requests like /index or /about-us cause a 500 Error due to a cache miss and css? error.

Context:
- Fly.io deployment.
- Directus CMS for content.
- Tigris cache on Fly.io (S3 compatible).

nextconfig.js

const nextConfig = {
  output: 'standalone',
  assetPrefix: NODE_ENV === 'production'
    ? `https://${process.env.BUCKET_NAME}.fly.storage.mycache.dev/v${process.env.APP_VERSION}`
    : '',
  cacheHandler: NODE_ENV === 'production' ? require.resolve('./cache-handler.js') : null,
  cacheMaxMemorySize: NODE_ENV === 'production' ? 0 : undefined,
};

cache-handler.js

module.exports = class CustomCacheHandler {
  constructor() {
    this.client = new S3Client({ options });
    this.bucketName = process.env.NAME;
    this.prefix = `v${packageJson.version}`;
  }

  getCompositeKey(key) {
    return key.startsWith('/') ? `cache/${this.prefix}${key}.json` : `cache/${this.prefix}-${key}.json`;
  }

  async get(key) {
    const compositeKey = this.getCompositeKey(key);
    try {
      const response = await this.client.send(new GetObjectCommand({
        Bucket: this.bucketName,
        Key: compositeKey,
      }));
      return JSON.parse(await this.streamToString(response.Body));
    } catch (error) {
      if (error.Code === 'NoSuchKey') return null;
      throw error;
    }
  }

  async set(key, value) {
    const compositeKey = this.getCompositeKey(key);
    await this.client.send(new PutObjectCommand({
      Bucket: this.bucketName,
      Key: compositeKey,
      Body: JSON.stringify(value),
      CacheControl: `max-age=${this.defaultTTL}`,
      ContentType: 'application/json',
    }));
  }
};

logs

Error getting cache key: NoSuchKey: The specified key does not exist.
    Key: 'cache/v1.0.6/index.json',
    BucketName: 'divine-moon-7432'

TypeError: r.CSSGroupingRule is not a constructor
    at 75855 (.next/server/chunks/748.js:4:109560)