Effizienzprobleme durch RSC- und CDN-Interaktion in Next.js

Das Problem resultiert aus der Generierung unterschiedlicher RSC-Hashes für identische Daten, was CDN-Cache-Treffer verhindert und unnötige Serverlast verursacht. Um dies zu beheben, sollten Sie die Strategie zur Berechnung der RSC-Hashes und die HTTP-Header konfigurieren:

Schritte zur Lösung:

1. Passen Sie die RSC-Hash-Generierung an, um konsistente Hashes für identische Daten zu gewährleisten.
2. Überarbeiten Sie die HTTP-Cache-Header. Spezifizieren Sie nur notwendige Header unter Verwendung des Cache-Control-Headers.

Nutzbarer Code zur Anpassung der RSC-Hash-Generierung:

module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          }
        ],
      },
    ];
  },
};

Konfiguration der next.config.js

Setzen Sie konsistent Vary Header zu minimieren:

function removeUnnecessaryHeaders() {
  // Vermeiden Sie Next-Router-State-Tree und Next-Url
  return {
    key: 'Vary',
    value: 'RSC',
  };
}

module.exports = {
  async headers() {
    return [
      {
        source: '/(.*?)',
        headers: [removeUnnecessaryHeaders()],
      },
    ];
  },
};

Stellt sicher, dass der CDN effizient arbeitet, indem unnötige Variationen eliminiert werden und ermöglicht dadurch zuverlässige Cache-Treffer.