1import { Card } from "../components/Card.tsx";
2import { LocalTime } from "../components/LocalTime.tsx";
3import { refreshCachedStamp } from "./actions.ts";
4import { readCachedStamp } from "./cached-stamp.ts";
5
6export const dynamic = "force-dynamic";
7
8const buttonClass =
9 "mt-4 rounded-md border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-50";
10
11export default async function UseCachePage() {
12 const cached = await readCachedStamp();
13 const request = new Date().toISOString();
14
15 return (
16 <main>
17 <h1 className="text-3xl font-bold">use cache</h1>
18 <Card title="SSR + cached function">
19 <p className="text-sm text-slate-900" data-testid="use-cache-request">
20 Request: <LocalTime value={request} />
21 </p>
22 <p
23 className="mt-2 text-sm text-slate-900"
24 data-testid="use-cache-cached"
25 >
26 Cached: <LocalTime value={cached} />
27 </p>
28 <form action={refreshCachedStamp}>
29 <button
30 className={buttonClass}
31 data-testid="use-cache-refresh"
32 type="submit"
33 >
34 Revalidate
35 </button>
36 </form>
37 </Card>
38 </main>
39 );
40}