javascript / expert
Snippet
Fortgeschrittene Request-Memoisiertung mit React 'cache'
Die 'cache'-Funktion von React ermöglicht die Memoisiertung des Datenabrufs auf Pro-Anfrage-Basis. Dies stellt sicher, dass selbst wenn mehrere Komponenten in Ihrem Server-Komponenten-Baum dieselben Daten anfordern, der zugrunde liegende Datenbank- oder API-Aufruf nur einmal ausgeführt wird.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
import { cache } from 'react';import db from '@/lib/db';export const getUser = cache(async (id: string) => {console.log('Fetching user from DB');return await db.user.findUnique({ where: { id } });});// Usage in multiple components during a single request// Component A: const user = await getUser('1');// Component B: const user = await getUser('1'); // Hits cache
nextjs
Erklärung
1
export const getUser = cache(async (id: string) => {
Umschließt die asynchrone Funktion mit einer Cache-Ebene, die auf den aktuellen Anfrage-Lebenszyklus beschränkt ist.
2
return await db.user.findUnique({ where: { id } });
Die teure Operation, die bei nachfolgenden Aufrufen mit derselben ID umgangen wird.