Next.js und die Revalidierung vorgenerierter Seiten bei Inhaltsänderungen
Wie lassen sich statisch vorgenerierte Seiten anders als periodisch neu generieren? Typischerweise bei einer Änderung von Inhalten in einer API oder einem CMS? Dafür gibt es die Funktion revalidate().
Next.js >=12.2 ermöglicht es, eine bestimmte dynamisch generierte Seite über eine API-Route zu invalidieren. Intern erledigt Next.js das, indem es den ursprünglichen Cache der jeweiligen Datei ungültig macht. Bei der nächsten Anfrage an diese Seite wird jedoch noch die ursprüngliche Version ausgeliefert, und erst in diesem Moment beginnt die Neugenerierung des Inhalts im Hintergrund. Damit also schon der nächste Nutzer die tatsächlich neu generierte Seite erhält, können wir die betreffende Seite selbst abrufen. Schlägt die Revalidierung fehl, liefert Next.js weiterhin die ursprüngliche Version aus dem Cache aus – Sie müssen also nicht befürchten, dass die Seite nicht mehr erreichbar ist.
Es empfiehlt sich, die Lösung um eine Prüfung der Gültigkeit des Requests zu ergänzen, um sie vor möglichem Missbrauch zu schützen. Das lässt sich schon durch einen einfachen Vergleich eines im Query-Parameter übergebenen Schlüssels mit einem vordefinierten Schlüssel erreichen, z. B. aus der .env-Datei. Anschließend kann die angegebene Route revalidiert werden.
export default async function (req: NextApiRequest, res: NextApiResponse) {
if (req.query.secret !== process.env.REVALIDATE_TOKEN) {
return res.status(401).json({message: 'Invalid token'});
}
try {
await res.revalidate('/article-2');
await fetch('http://localhost/article-2');
return res.json({revalidated: true});
} catch (err) {
return res.status(500).json({revalidated: false, error: err});
}
}Wichtiger Hinweis: Die Revalidierung funktioniert nur auf der Domain, auf der Sie sie aufgerufen haben. Wenn Sie mehrere Domains verwenden (z. B. für die Lokalisierung), müssen Sie die Revalidierung für jede davon aufrufen.