-
Notifications
You must be signed in to change notification settings - Fork 11
/
odr.tsx
89 lines (78 loc) · 2.15 KB
/
odr.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import { GetServerSideProps, InferGetServerSidePropsType } from "next";
import { useState } from "react";
import Nav from "~/components/Nav";
export default function ODR({
time,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
const [isPurging, setIsPurging] = useState(false);
const [finishedPurging, setFinishedPurging] = useState(false);
const [error, setError] = useState(false);
const purgeCache = async () => {
setIsPurging(true);
const response = await fetch("/.netlify/functions/purge-cache-tag?tag=odr");
if (response.ok) {
setIsPurging(false);
setFinishedPurging(true);
} else {
console.error("Failed to purge cache");
setIsPurging(false);
setError(true);
}
};
return (
<main>
<Nav title="On Demand Revalidation" />
<h1>On Demand Revalidation</h1>
<p>This page contains the following cache headers:</p>
<code>Cache-Control: public, max-age=604800</code>
<br />
<code>Cache-Tag: odr</code>
<p>This page was last revalidated:</p>
<time dateTime={time}>{time}</time>
<br />
<br />
<hr />
<br />
<div>
<button onClick={purgeCache}>
{isPurging ? "Purging..." : "Purge this page by cache tag: [odr]"}
</button>
</div>
{finishedPurging && (
<div
style={{
padding: "2rem",
borderRadius: "6px",
textAlign: "center",
marginTop: "1rem",
}}
>
<p>Purged! Refresh the page to see the updated revalidation time!</p>
</div>
)}
{error && (
<div
style={{
padding: "2rem",
borderRadius: "6px",
textAlign: "center",
marginTop: "1rem",
}}
>
<p>Failed to purge cache, please try again</p>
</div>
)}
</main>
);
}
export const getServerSideProps: GetServerSideProps<{ time: string }> = async ({
res,
}) => {
res.setHeader("Cache-Control", "public, max-age=604800");
res.setHeader("Cache-Tag", "odr");
return {
props: {
time: new Date().toISOString(),
},
};
};