yiekheng
549e9b5939
Eliminates the per-request DB hit when:
- A user opens a tab they've recently visited (within 30s)
- The 30s AutoRefresh fires while no mutations have happened
- Multiple browser tabs are open and switch between Accounts/Users
- A passing-by request races another request for the same data
How it works:
- web/lib/api.ts: fetchApi() now forwards the next.revalidate/tags
options to Next.js's data cache. getAccounts/getUsers tag their
responses ('accounts'/'users') with a 30-second freshness window.
- web/app/actions.ts: every mutation (update/create/delete X 2 tables)
calls revalidateTag() so the next GET for that table bypasses the
cache and re-reads from MySQL. Stale data never lingers after a write.
The cache lives in the cm-web Node process (per worker). For our
2-worker setup that's at most 2 cached copies; the next AutoRefresh
tick after the 30s window expires triggers exactly one DB read per
worker. If the operator manually clicks Refresh, that's a router.refresh
which also re-fetches.
Tradeoffs:
- External DB writes (e.g., the cm99.net monitor inserting a row) won't
appear in the dashboard until the 30s window elapses or a mutation
happens. The previous behavior had a 30s ceiling too (auto-refresh
interval), so the perceived freshness is unchanged.
- Memory: each cached payload is a few KB to a few hundred KB. Trivial.
If you want stricter freshness later, drop CACHE_REVALIDATE_SECONDS in
web/lib/api.ts. If you want pagination on top of this, the cache key
becomes per-URL automatically, so /acc/?offset=200 caches separately
from /acc/?offset=0 — no further work needed.
54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import type { Acc, User } from "./types";
|
|
|
|
const API_BASE_URL = process.env.API_BASE_URL ?? "http://api-server:3000";
|
|
|
|
// How long the Next.js data cache holds an /acc/ or /user/ response
|
|
// before considering it stale. Tab switches and auto-refreshes within
|
|
// this window are served from memory — no api-server / MySQL round-trip.
|
|
// Mutations (update/create/delete) call revalidateTag() so the next
|
|
// request always sees fresh data after a write.
|
|
const CACHE_REVALIDATE_SECONDS = 30;
|
|
|
|
export const ACCOUNTS_TAG = "accounts";
|
|
export const USERS_TAG = "users";
|
|
|
|
type FetchInit = {
|
|
method?: "GET" | "POST";
|
|
body?: unknown;
|
|
cache?: RequestCache;
|
|
next?: { revalidate?: number; tags?: string[] };
|
|
};
|
|
|
|
export async function fetchApi(path: string, options: FetchInit = {}): Promise<unknown> {
|
|
const url = `${API_BASE_URL}${path}`;
|
|
const init: RequestInit & { next?: FetchInit["next"] } = {
|
|
method: options.method ?? "GET",
|
|
headers: options.body ? { "content-type": "application/json" } : undefined,
|
|
body: options.body ? JSON.stringify(options.body) : undefined,
|
|
};
|
|
if (options.next) {
|
|
init.next = options.next;
|
|
} else {
|
|
init.cache = options.cache ?? "no-store";
|
|
}
|
|
const res = await fetch(url, init);
|
|
if (!res.ok) {
|
|
throw new Error(`API ${options.method ?? "GET"} ${path} failed: ${res.status}`);
|
|
}
|
|
return res.json();
|
|
}
|
|
|
|
export async function getAccounts(): Promise<Acc[]> {
|
|
const data = await fetchApi("/acc/", {
|
|
next: { revalidate: CACHE_REVALIDATE_SECONDS, tags: [ACCOUNTS_TAG] },
|
|
});
|
|
return data as Acc[];
|
|
}
|
|
|
|
export async function getUsers(): Promise<User[]> {
|
|
const data = await fetchApi("/user/", {
|
|
next: { revalidate: CACHE_REVALIDATE_SECONDS, tags: [USERS_TAG] },
|
|
});
|
|
return data as User[];
|
|
}
|