javascript / intermediate
Snippet
Request-Memoization mit der React cache()-Funktion
React cache ermöglicht es, Datenabfragen pro Anfrage zu memoizen. Wenn mehrere Komponenten im selben Baum dieselben Daten anfordern, wird die Funktion nur einmal ausgeführt, was Netzwerkressourcen spart.
snippet.js
1
2
3
4
5
6
7
8
9
10
import { cache } from 'react';import db from './lib/db';export const getUser = cache(async (id: string) => {const user = await db.user.findUnique({ where: { id } });return user;});// Usage in multiple components during the same render cycleconst user = await getUser('123');
nextjs
Erklärung
1
export const getUser = cache(async (id: string) => {
Umschließt den Datenbankaufruf mit cache(), um sicherzustellen, dass er nur einmal pro Server-Anfrage ausgeführt wird.
2
const user = await getUser('123');
Nachfolgende Aufrufe dieser Funktion mit derselben ID geben sofort das gecachte Ergebnis zurück.