javascript / expert
Snippet
Request-Scoped Memoisierung für Server Components
Die `cache`-Funktion von React ermöglicht die Memoisierung von Datenabrufen oder teuren Berechnungen innerhalb eines einzelnen Request-Lebenszyklus. Dies verhindert redundante API-Aufrufe oder DB-Abfragen, wenn mehrere Server Components dieselben Daten benötigen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
import { cache } from 'react';import { db } from './database';export const getProjectMetrics = cache(async (projectId: string) => {console.log(`Fetching metrics for ${projectId}`);const metrics = await db.metrics.findUnique({ where: { projectId } });return metrics;});// Usage in multiple Server Components for the same request// Component A: const data = await getProjectMetrics('123');// Component B: const data = await getProjectMetrics('123'); // Uses cache
nextjs
Erklärung
1
export const getProjectMetrics = cache(async ...
Umschließt eine asynchrone Funktion, um deren Ergebnis für die Dauer eines einzelnen User-Requests zu speichern.
2
console.log(...);
Dieser Log wird nur einmal pro Request ausgeführt, selbst wenn die Funktion mehrfach aufgerufen wird.
3
return metrics;
Gibt bei nachfolgenden Aufrufen innerhalb desselben Server-Renderings das Ergebnis direkt aus dem Speicher zurück.