0 Tage Serie
javascript / intermediate
Snippet

Daten-Memoization pro Anfrage mit React cache

Die cache-Funktion von React ermöglicht es, Datenabrufe innerhalb eines einzigen Render-Durchgangs zu memoizieren. Wenn mehrere Komponenten dieselben Daten während einer Anfrage anfordern, wird die Datenbank nur einmal abgefragt.

snippet.js
javascript
1
2
3
4
5
6
import { cache } from 'react';
export const getItem = cache(async (id) => {
const item = await db.item.findUnique({ where: { id } });
return item;
});
nextjs
Erklärung
1
cache(async (id) => { ... })
Umschließt die Fetcher-Funktion, um sicherzustellen, dass das Ergebnis bei identischen Argumenten in derselben Anfrage wiederverwendet wird.
2
export const getItem
Exportiert die memoisierte Funktion, damit sie von verschiedenen Server-Komponenten aufgerufen werden kann.