@trieb.work/nextjs-turbo-redis-cache 1.8.1 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/ci.yml +9 -2
- package/CHANGELOG.md +14 -0
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -3
- package/src/RedisStringsHandler.ts +2 -2
- package/test/integration/next-app-15-0-3/pnpm-lock.yaml +1 -1
- package/test/integration/next-app-15-3-2/pnpm-lock.yaml +1 -1
- package/test/integration/next-app-15-4-7/README.md +36 -0
- package/test/integration/next-app-15-4-7/eslint.config.mjs +16 -0
- package/test/integration/next-app-15-4-7/next.config.js +6 -0
- package/test/integration/next-app-15-4-7/package-lock.json +5969 -0
- package/test/integration/next-app-15-4-7/package.json +33 -0
- package/test/integration/next-app-15-4-7/pnpm-lock.yaml +3707 -0
- package/test/integration/next-app-15-4-7/postcss.config.mjs +5 -0
- package/test/integration/next-app-15-4-7/public/file.svg +1 -0
- package/test/integration/next-app-15-4-7/public/globe.svg +1 -0
- package/test/integration/next-app-15-4-7/public/next.svg +1 -0
- package/test/integration/next-app-15-4-7/public/vercel.svg +1 -0
- package/test/integration/next-app-15-4-7/public/window.svg +1 -0
- package/test/integration/next-app-15-4-7/src/app/api/cached-static-fetch/route.ts +18 -0
- package/test/integration/next-app-15-4-7/src/app/api/nested-fetch-in-api-route/revalidated-fetch/route.ts +27 -0
- package/test/integration/next-app-15-4-7/src/app/api/revalidatePath/route.ts +15 -0
- package/test/integration/next-app-15-4-7/src/app/api/revalidateTag/route.ts +15 -0
- package/test/integration/next-app-15-4-7/src/app/api/revalidated-fetch/route.ts +17 -0
- package/test/integration/next-app-15-4-7/src/app/api/uncached-fetch/route.ts +15 -0
- package/test/integration/next-app-15-4-7/src/app/globals.css +26 -0
- package/test/integration/next-app-15-4-7/src/app/layout.tsx +59 -0
- package/test/integration/next-app-15-4-7/src/app/page.tsx +755 -0
- package/test/integration/next-app-15-4-7/src/app/pages/cached-static-fetch/default--force-dynamic-page/page.tsx +19 -0
- package/test/integration/next-app-15-4-7/src/app/pages/cached-static-fetch/revalidate15--default-page/page.tsx +34 -0
- package/test/integration/next-app-15-4-7/src/app/pages/cached-static-fetch/revalidate15--force-dynamic-page/page.tsx +25 -0
- package/test/integration/next-app-15-4-7/src/app/pages/no-fetch/default-page/page.tsx +55 -0
- package/test/integration/next-app-15-4-7/src/app/pages/revalidated-fetch/default--force-dynamic-page/page.tsx +19 -0
- package/test/integration/next-app-15-4-7/src/app/pages/revalidated-fetch/revalidate15--default-page/page.tsx +35 -0
- package/test/integration/next-app-15-4-7/src/app/pages/revalidated-fetch/revalidate15--force-dynamic-page/page.tsx +25 -0
- package/test/integration/next-app-15-4-7/src/app/pages/uncached-fetch/default--force-dynamic-page/page.tsx +19 -0
- package/test/integration/next-app-15-4-7/src/app/pages/uncached-fetch/revalidate15--default-page/page.tsx +32 -0
- package/test/integration/next-app-15-4-7/src/app/pages/uncached-fetch/revalidate15--force-dynamic-page/page.tsx +25 -0
- package/test/integration/next-app-15-4-7/src/app/revalidation-interface.tsx +267 -0
- package/test/integration/next-app-15-4-7/tsconfig.json +27 -0
- package/test/integration/nextjs-cache-handler.integration.test.ts +7 -5
|
@@ -0,0 +1,755 @@
|
|
|
1
|
+
import Link from 'next/link';
|
|
2
|
+
|
|
3
|
+
// Separate the client component into its own file
|
|
4
|
+
import { RevalidationInterface } from './revalidation-interface';
|
|
5
|
+
|
|
6
|
+
export default function HomePage() {
|
|
7
|
+
return (
|
|
8
|
+
<main
|
|
9
|
+
style={{
|
|
10
|
+
padding: '40px',
|
|
11
|
+
fontFamily: 'system-ui, -apple-system, sans-serif',
|
|
12
|
+
maxWidth: '1200px',
|
|
13
|
+
margin: '0 auto',
|
|
14
|
+
color: '#333',
|
|
15
|
+
}}
|
|
16
|
+
>
|
|
17
|
+
<header
|
|
18
|
+
style={{
|
|
19
|
+
borderBottom: '2px solid #0070f3',
|
|
20
|
+
paddingBottom: '20px',
|
|
21
|
+
marginBottom: '30px',
|
|
22
|
+
textAlign: 'center',
|
|
23
|
+
}}
|
|
24
|
+
>
|
|
25
|
+
<h1
|
|
26
|
+
style={{
|
|
27
|
+
fontSize: '2.5rem',
|
|
28
|
+
color: '#0070f3',
|
|
29
|
+
margin: '0 0 16px 0',
|
|
30
|
+
}}
|
|
31
|
+
>
|
|
32
|
+
Next.js Redis Cache Testing
|
|
33
|
+
</h1>
|
|
34
|
+
<p
|
|
35
|
+
style={{
|
|
36
|
+
fontSize: '1.2rem',
|
|
37
|
+
color: '#666',
|
|
38
|
+
maxWidth: '800px',
|
|
39
|
+
margin: '0 auto',
|
|
40
|
+
}}
|
|
41
|
+
>
|
|
42
|
+
This is a test application for the nextjs-turbo-redis-cache package,
|
|
43
|
+
demonstrating various caching strategies.
|
|
44
|
+
</p>
|
|
45
|
+
</header>
|
|
46
|
+
|
|
47
|
+
<section style={{ marginBottom: '40px' }}>
|
|
48
|
+
<h2
|
|
49
|
+
style={{
|
|
50
|
+
fontSize: '1.8rem',
|
|
51
|
+
borderLeft: '5px solid #0070f3',
|
|
52
|
+
paddingLeft: '15px',
|
|
53
|
+
color: '#0070f3',
|
|
54
|
+
marginBottom: '25px',
|
|
55
|
+
}}
|
|
56
|
+
>
|
|
57
|
+
Pages
|
|
58
|
+
</h2>
|
|
59
|
+
<div
|
|
60
|
+
style={{
|
|
61
|
+
display: 'grid',
|
|
62
|
+
gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
|
|
63
|
+
gap: '25px',
|
|
64
|
+
}}
|
|
65
|
+
>
|
|
66
|
+
{/* Cached Static Fetch Pages */}
|
|
67
|
+
<div
|
|
68
|
+
style={{
|
|
69
|
+
border: '1px solid #eaeaea',
|
|
70
|
+
padding: '25px',
|
|
71
|
+
borderRadius: '8px',
|
|
72
|
+
boxShadow: '0 4px 6px rgba(0,0,0,0.05)',
|
|
73
|
+
transition: 'transform 0.2s, box-shadow 0.2s',
|
|
74
|
+
backgroundColor: '#fff',
|
|
75
|
+
}}
|
|
76
|
+
>
|
|
77
|
+
<h3
|
|
78
|
+
style={{
|
|
79
|
+
fontSize: '1.4rem',
|
|
80
|
+
color: '#0070f3',
|
|
81
|
+
marginTop: '0',
|
|
82
|
+
marginBottom: '15px',
|
|
83
|
+
borderBottom: '1px solid #eaeaea',
|
|
84
|
+
paddingBottom: '10px',
|
|
85
|
+
}}
|
|
86
|
+
>
|
|
87
|
+
Cached Static Fetch
|
|
88
|
+
</h3>
|
|
89
|
+
<div
|
|
90
|
+
style={{
|
|
91
|
+
backgroundColor: '#f0f7ff',
|
|
92
|
+
padding: '10px',
|
|
93
|
+
borderRadius: '5px',
|
|
94
|
+
marginBottom: '15px',
|
|
95
|
+
fontSize: '0.9rem',
|
|
96
|
+
borderLeft: '3px solid #0070f3',
|
|
97
|
+
}}
|
|
98
|
+
>
|
|
99
|
+
<strong>API Route:</strong> <code>/api/cached-static-fetch</code>
|
|
100
|
+
<br />
|
|
101
|
+
These pages fetch data from the cached static API route with{' '}
|
|
102
|
+
<code>force-static</code> and <code>revalidate: false</code>{' '}
|
|
103
|
+
settings.
|
|
104
|
+
</div>
|
|
105
|
+
<ul
|
|
106
|
+
style={{
|
|
107
|
+
listStyleType: 'none',
|
|
108
|
+
padding: '0',
|
|
109
|
+
margin: '0',
|
|
110
|
+
}}
|
|
111
|
+
>
|
|
112
|
+
<li style={{ marginBottom: '12px' }}>
|
|
113
|
+
<Link
|
|
114
|
+
href="/pages/cached-static-fetch/default--force-dynamic-page"
|
|
115
|
+
style={{
|
|
116
|
+
display: 'block',
|
|
117
|
+
padding: '10px 15px',
|
|
118
|
+
backgroundColor: '#f4f7ff',
|
|
119
|
+
borderRadius: '5px',
|
|
120
|
+
color: '#0070f3',
|
|
121
|
+
textDecoration: 'none',
|
|
122
|
+
fontWeight: '500',
|
|
123
|
+
transition: 'background-color 0.2s',
|
|
124
|
+
}}
|
|
125
|
+
>
|
|
126
|
+
Default + Force Dynamic
|
|
127
|
+
</Link>
|
|
128
|
+
</li>
|
|
129
|
+
<li style={{ marginBottom: '12px' }}>
|
|
130
|
+
<Link
|
|
131
|
+
href="/pages/cached-static-fetch/revalidate15--default-page"
|
|
132
|
+
style={{
|
|
133
|
+
display: 'block',
|
|
134
|
+
padding: '10px 15px',
|
|
135
|
+
backgroundColor: '#f4f7ff',
|
|
136
|
+
borderRadius: '5px',
|
|
137
|
+
color: '#0070f3',
|
|
138
|
+
textDecoration: 'none',
|
|
139
|
+
fontWeight: '500',
|
|
140
|
+
transition: 'background-color 0.2s',
|
|
141
|
+
}}
|
|
142
|
+
>
|
|
143
|
+
Revalidate 15s + Default
|
|
144
|
+
</Link>
|
|
145
|
+
</li>
|
|
146
|
+
<li>
|
|
147
|
+
<Link
|
|
148
|
+
href="/pages/cached-static-fetch/revalidate15--force-dynamic-page"
|
|
149
|
+
style={{
|
|
150
|
+
display: 'block',
|
|
151
|
+
padding: '10px 15px',
|
|
152
|
+
backgroundColor: '#f4f7ff',
|
|
153
|
+
borderRadius: '5px',
|
|
154
|
+
color: '#0070f3',
|
|
155
|
+
textDecoration: 'none',
|
|
156
|
+
fontWeight: '500',
|
|
157
|
+
transition: 'background-color 0.2s',
|
|
158
|
+
}}
|
|
159
|
+
>
|
|
160
|
+
Revalidate 15s + Force Dynamic
|
|
161
|
+
</Link>
|
|
162
|
+
</li>
|
|
163
|
+
</ul>
|
|
164
|
+
</div>
|
|
165
|
+
|
|
166
|
+
{/* No Fetch Pages */}
|
|
167
|
+
<div
|
|
168
|
+
style={{
|
|
169
|
+
border: '1px solid #eaeaea',
|
|
170
|
+
padding: '25px',
|
|
171
|
+
borderRadius: '8px',
|
|
172
|
+
boxShadow: '0 4px 6px rgba(0,0,0,0.05)',
|
|
173
|
+
transition: 'transform 0.2s, box-shadow 0.2s',
|
|
174
|
+
backgroundColor: '#fff',
|
|
175
|
+
}}
|
|
176
|
+
>
|
|
177
|
+
<h3
|
|
178
|
+
style={{
|
|
179
|
+
fontSize: '1.4rem',
|
|
180
|
+
color: '#0070f3',
|
|
181
|
+
marginTop: '0',
|
|
182
|
+
marginBottom: '15px',
|
|
183
|
+
borderBottom: '1px solid #eaeaea',
|
|
184
|
+
paddingBottom: '10px',
|
|
185
|
+
}}
|
|
186
|
+
>
|
|
187
|
+
No Fetch
|
|
188
|
+
</h3>
|
|
189
|
+
<div
|
|
190
|
+
style={{
|
|
191
|
+
backgroundColor: '#f0f7ff',
|
|
192
|
+
padding: '10px',
|
|
193
|
+
borderRadius: '5px',
|
|
194
|
+
marginBottom: '15px',
|
|
195
|
+
fontSize: '0.9rem',
|
|
196
|
+
borderLeft: '3px solid #0070f3',
|
|
197
|
+
}}
|
|
198
|
+
>
|
|
199
|
+
<strong>API Route:</strong> None
|
|
200
|
+
<br />
|
|
201
|
+
These pages don't make any API requests and are statically
|
|
202
|
+
generated without external data.
|
|
203
|
+
</div>
|
|
204
|
+
<ul
|
|
205
|
+
style={{
|
|
206
|
+
listStyleType: 'none',
|
|
207
|
+
padding: '0',
|
|
208
|
+
margin: '0',
|
|
209
|
+
}}
|
|
210
|
+
>
|
|
211
|
+
<li>
|
|
212
|
+
<Link
|
|
213
|
+
href="/pages/no-fetch/default-page"
|
|
214
|
+
style={{
|
|
215
|
+
display: 'block',
|
|
216
|
+
padding: '10px 15px',
|
|
217
|
+
backgroundColor: '#f4f7ff',
|
|
218
|
+
borderRadius: '5px',
|
|
219
|
+
color: '#0070f3',
|
|
220
|
+
textDecoration: 'none',
|
|
221
|
+
fontWeight: '500',
|
|
222
|
+
transition: 'background-color 0.2s',
|
|
223
|
+
}}
|
|
224
|
+
>
|
|
225
|
+
Default Page
|
|
226
|
+
</Link>
|
|
227
|
+
</li>
|
|
228
|
+
</ul>
|
|
229
|
+
</div>
|
|
230
|
+
|
|
231
|
+
{/* Revalidated Fetch Pages */}
|
|
232
|
+
<div
|
|
233
|
+
style={{
|
|
234
|
+
border: '1px solid #eaeaea',
|
|
235
|
+
padding: '25px',
|
|
236
|
+
borderRadius: '8px',
|
|
237
|
+
boxShadow: '0 4px 6px rgba(0,0,0,0.05)',
|
|
238
|
+
transition: 'transform 0.2s, box-shadow 0.2s',
|
|
239
|
+
backgroundColor: '#fff',
|
|
240
|
+
}}
|
|
241
|
+
>
|
|
242
|
+
<h3
|
|
243
|
+
style={{
|
|
244
|
+
fontSize: '1.4rem',
|
|
245
|
+
color: '#0070f3',
|
|
246
|
+
marginTop: '0',
|
|
247
|
+
marginBottom: '15px',
|
|
248
|
+
borderBottom: '1px solid #eaeaea',
|
|
249
|
+
paddingBottom: '10px',
|
|
250
|
+
}}
|
|
251
|
+
>
|
|
252
|
+
Revalidated Fetch
|
|
253
|
+
</h3>
|
|
254
|
+
<div
|
|
255
|
+
style={{
|
|
256
|
+
backgroundColor: '#f0f7ff',
|
|
257
|
+
padding: '10px',
|
|
258
|
+
borderRadius: '5px',
|
|
259
|
+
marginBottom: '15px',
|
|
260
|
+
fontSize: '0.9rem',
|
|
261
|
+
borderLeft: '3px solid #0070f3',
|
|
262
|
+
}}
|
|
263
|
+
>
|
|
264
|
+
<strong>API Route:</strong> <code>/api/revalidated-fetch</code>
|
|
265
|
+
<br />
|
|
266
|
+
These pages fetch data from the revalidated API route with{' '}
|
|
267
|
+
<code>revalidate: 5</code> setting, causing automatic revalidation
|
|
268
|
+
after 5 seconds.
|
|
269
|
+
</div>
|
|
270
|
+
<ul
|
|
271
|
+
style={{
|
|
272
|
+
listStyleType: 'none',
|
|
273
|
+
padding: '0',
|
|
274
|
+
margin: '0',
|
|
275
|
+
}}
|
|
276
|
+
>
|
|
277
|
+
<li style={{ marginBottom: '12px' }}>
|
|
278
|
+
<Link
|
|
279
|
+
href="/pages/revalidated-fetch/default--force-dynamic-page"
|
|
280
|
+
style={{
|
|
281
|
+
display: 'block',
|
|
282
|
+
padding: '10px 15px',
|
|
283
|
+
backgroundColor: '#f4f7ff',
|
|
284
|
+
borderRadius: '5px',
|
|
285
|
+
color: '#0070f3',
|
|
286
|
+
textDecoration: 'none',
|
|
287
|
+
fontWeight: '500',
|
|
288
|
+
transition: 'background-color 0.2s',
|
|
289
|
+
}}
|
|
290
|
+
>
|
|
291
|
+
Default + Force Dynamic
|
|
292
|
+
</Link>
|
|
293
|
+
</li>
|
|
294
|
+
<li style={{ marginBottom: '12px' }}>
|
|
295
|
+
<Link
|
|
296
|
+
href="/pages/revalidated-fetch/revalidate15--default-page"
|
|
297
|
+
style={{
|
|
298
|
+
display: 'block',
|
|
299
|
+
padding: '10px 15px',
|
|
300
|
+
backgroundColor: '#f4f7ff',
|
|
301
|
+
borderRadius: '5px',
|
|
302
|
+
color: '#0070f3',
|
|
303
|
+
textDecoration: 'none',
|
|
304
|
+
fontWeight: '500',
|
|
305
|
+
transition: 'background-color 0.2s',
|
|
306
|
+
}}
|
|
307
|
+
>
|
|
308
|
+
Revalidate 15s + Default
|
|
309
|
+
</Link>
|
|
310
|
+
</li>
|
|
311
|
+
<li>
|
|
312
|
+
<Link
|
|
313
|
+
href="/pages/revalidated-fetch/revalidate15--force-dynamic-page"
|
|
314
|
+
style={{
|
|
315
|
+
display: 'block',
|
|
316
|
+
padding: '10px 15px',
|
|
317
|
+
backgroundColor: '#f4f7ff',
|
|
318
|
+
borderRadius: '5px',
|
|
319
|
+
color: '#0070f3',
|
|
320
|
+
textDecoration: 'none',
|
|
321
|
+
fontWeight: '500',
|
|
322
|
+
transition: 'background-color 0.2s',
|
|
323
|
+
}}
|
|
324
|
+
>
|
|
325
|
+
Revalidate 15s + Force Dynamic
|
|
326
|
+
</Link>
|
|
327
|
+
</li>
|
|
328
|
+
</ul>
|
|
329
|
+
</div>
|
|
330
|
+
|
|
331
|
+
{/* Uncached Fetch Pages */}
|
|
332
|
+
<div
|
|
333
|
+
style={{
|
|
334
|
+
border: '1px solid #eaeaea',
|
|
335
|
+
padding: '25px',
|
|
336
|
+
borderRadius: '8px',
|
|
337
|
+
boxShadow: '0 4px 6px rgba(0,0,0,0.05)',
|
|
338
|
+
transition: 'transform 0.2s, box-shadow 0.2s',
|
|
339
|
+
backgroundColor: '#fff',
|
|
340
|
+
}}
|
|
341
|
+
>
|
|
342
|
+
<h3
|
|
343
|
+
style={{
|
|
344
|
+
fontSize: '1.4rem',
|
|
345
|
+
color: '#0070f3',
|
|
346
|
+
marginTop: '0',
|
|
347
|
+
marginBottom: '15px',
|
|
348
|
+
borderBottom: '1px solid #eaeaea',
|
|
349
|
+
paddingBottom: '10px',
|
|
350
|
+
}}
|
|
351
|
+
>
|
|
352
|
+
Uncached Fetch
|
|
353
|
+
</h3>
|
|
354
|
+
<div
|
|
355
|
+
style={{
|
|
356
|
+
backgroundColor: '#f0f7ff',
|
|
357
|
+
padding: '10px',
|
|
358
|
+
borderRadius: '5px',
|
|
359
|
+
marginBottom: '15px',
|
|
360
|
+
fontSize: '0.9rem',
|
|
361
|
+
borderLeft: '3px solid #0070f3',
|
|
362
|
+
}}
|
|
363
|
+
>
|
|
364
|
+
<strong>API Route:</strong> <code>/api/uncached-fetch</code>
|
|
365
|
+
<br />
|
|
366
|
+
These pages fetch data from the uncached API route with{' '}
|
|
367
|
+
<code>dynamic: 'force-dynamic'</code> setting, causing a
|
|
368
|
+
new fetch on every request.
|
|
369
|
+
</div>
|
|
370
|
+
<ul
|
|
371
|
+
style={{
|
|
372
|
+
listStyleType: 'none',
|
|
373
|
+
padding: '0',
|
|
374
|
+
margin: '0',
|
|
375
|
+
}}
|
|
376
|
+
>
|
|
377
|
+
<li style={{ marginBottom: '12px' }}>
|
|
378
|
+
<Link
|
|
379
|
+
href="/pages/uncached-fetch/default--force-dynamic-page"
|
|
380
|
+
style={{
|
|
381
|
+
display: 'block',
|
|
382
|
+
padding: '10px 15px',
|
|
383
|
+
backgroundColor: '#f4f7ff',
|
|
384
|
+
borderRadius: '5px',
|
|
385
|
+
color: '#0070f3',
|
|
386
|
+
textDecoration: 'none',
|
|
387
|
+
fontWeight: '500',
|
|
388
|
+
transition: 'background-color 0.2s',
|
|
389
|
+
}}
|
|
390
|
+
>
|
|
391
|
+
Default + Force Dynamic
|
|
392
|
+
</Link>
|
|
393
|
+
</li>
|
|
394
|
+
<li style={{ marginBottom: '12px' }}>
|
|
395
|
+
<Link
|
|
396
|
+
href="/pages/uncached-fetch/revalidate15--default-page"
|
|
397
|
+
style={{
|
|
398
|
+
display: 'block',
|
|
399
|
+
padding: '10px 15px',
|
|
400
|
+
backgroundColor: '#f4f7ff',
|
|
401
|
+
borderRadius: '5px',
|
|
402
|
+
color: '#0070f3',
|
|
403
|
+
textDecoration: 'none',
|
|
404
|
+
fontWeight: '500',
|
|
405
|
+
transition: 'background-color 0.2s',
|
|
406
|
+
}}
|
|
407
|
+
>
|
|
408
|
+
Revalidate 15s + Default
|
|
409
|
+
</Link>
|
|
410
|
+
</li>
|
|
411
|
+
<li>
|
|
412
|
+
<Link
|
|
413
|
+
href="/pages/uncached-fetch/revalidate15--force-dynamic-page"
|
|
414
|
+
style={{
|
|
415
|
+
display: 'block',
|
|
416
|
+
padding: '10px 15px',
|
|
417
|
+
backgroundColor: '#f4f7ff',
|
|
418
|
+
borderRadius: '5px',
|
|
419
|
+
color: '#0070f3',
|
|
420
|
+
textDecoration: 'none',
|
|
421
|
+
fontWeight: '500',
|
|
422
|
+
transition: 'background-color 0.2s',
|
|
423
|
+
}}
|
|
424
|
+
>
|
|
425
|
+
Revalidate 15s + Force Dynamic
|
|
426
|
+
</Link>
|
|
427
|
+
</li>
|
|
428
|
+
</ul>
|
|
429
|
+
</div>
|
|
430
|
+
</div>
|
|
431
|
+
</section>
|
|
432
|
+
|
|
433
|
+
<section style={{ marginBottom: '40px' }}>
|
|
434
|
+
<h2
|
|
435
|
+
style={{
|
|
436
|
+
fontSize: '1.8rem',
|
|
437
|
+
borderLeft: '5px solid #0070f3',
|
|
438
|
+
paddingLeft: '15px',
|
|
439
|
+
color: '#0070f3',
|
|
440
|
+
marginBottom: '25px',
|
|
441
|
+
}}
|
|
442
|
+
>
|
|
443
|
+
API Routes
|
|
444
|
+
</h2>
|
|
445
|
+
<div
|
|
446
|
+
style={{
|
|
447
|
+
display: 'grid',
|
|
448
|
+
gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
|
|
449
|
+
gap: '25px',
|
|
450
|
+
}}
|
|
451
|
+
>
|
|
452
|
+
{/* API Routes */}
|
|
453
|
+
<div
|
|
454
|
+
style={{
|
|
455
|
+
border: '1px solid #eaeaea',
|
|
456
|
+
padding: '25px',
|
|
457
|
+
borderRadius: '8px',
|
|
458
|
+
boxShadow: '0 4px 6px rgba(0,0,0,0.05)',
|
|
459
|
+
transition: 'transform 0.2s, box-shadow 0.2s',
|
|
460
|
+
backgroundColor: '#fff',
|
|
461
|
+
}}
|
|
462
|
+
>
|
|
463
|
+
<h3
|
|
464
|
+
style={{
|
|
465
|
+
fontSize: '1.4rem',
|
|
466
|
+
color: '#0070f3',
|
|
467
|
+
marginTop: '0',
|
|
468
|
+
marginBottom: '15px',
|
|
469
|
+
borderBottom: '1px solid #eaeaea',
|
|
470
|
+
paddingBottom: '10px',
|
|
471
|
+
}}
|
|
472
|
+
>
|
|
473
|
+
Cache Control APIs
|
|
474
|
+
</h3>
|
|
475
|
+
<div
|
|
476
|
+
style={{
|
|
477
|
+
backgroundColor: '#f0f7ff',
|
|
478
|
+
padding: '10px',
|
|
479
|
+
borderRadius: '5px',
|
|
480
|
+
marginBottom: '15px',
|
|
481
|
+
fontSize: '0.9rem',
|
|
482
|
+
borderLeft: '3px solid #0070f3',
|
|
483
|
+
}}
|
|
484
|
+
>
|
|
485
|
+
These API routes demonstrate different caching behaviors. Each
|
|
486
|
+
returns a counter value that increases on each uncached request.
|
|
487
|
+
</div>
|
|
488
|
+
<ul
|
|
489
|
+
style={{
|
|
490
|
+
listStyleType: 'none',
|
|
491
|
+
padding: '0',
|
|
492
|
+
margin: '0',
|
|
493
|
+
}}
|
|
494
|
+
>
|
|
495
|
+
<li style={{ marginBottom: '12px' }}>
|
|
496
|
+
<Link
|
|
497
|
+
href="/api/cached-static-fetch"
|
|
498
|
+
style={{
|
|
499
|
+
display: 'block',
|
|
500
|
+
padding: '10px 15px',
|
|
501
|
+
backgroundColor: '#f4f7ff',
|
|
502
|
+
borderRadius: '5px',
|
|
503
|
+
color: '#0070f3',
|
|
504
|
+
textDecoration: 'none',
|
|
505
|
+
fontWeight: '500',
|
|
506
|
+
transition: 'background-color 0.2s',
|
|
507
|
+
}}
|
|
508
|
+
>
|
|
509
|
+
Cached Static Fetch
|
|
510
|
+
</Link>
|
|
511
|
+
</li>
|
|
512
|
+
<li style={{ marginBottom: '12px' }}>
|
|
513
|
+
<Link
|
|
514
|
+
href="/api/uncached-fetch"
|
|
515
|
+
style={{
|
|
516
|
+
display: 'block',
|
|
517
|
+
padding: '10px 15px',
|
|
518
|
+
backgroundColor: '#f4f7ff',
|
|
519
|
+
borderRadius: '5px',
|
|
520
|
+
color: '#0070f3',
|
|
521
|
+
textDecoration: 'none',
|
|
522
|
+
fontWeight: '500',
|
|
523
|
+
transition: 'background-color 0.2s',
|
|
524
|
+
}}
|
|
525
|
+
>
|
|
526
|
+
Uncached Fetch
|
|
527
|
+
</Link>
|
|
528
|
+
</li>
|
|
529
|
+
<li style={{ marginBottom: '12px' }}>
|
|
530
|
+
<Link
|
|
531
|
+
href="/api/revalidated-fetch"
|
|
532
|
+
style={{
|
|
533
|
+
display: 'block',
|
|
534
|
+
padding: '10px 15px',
|
|
535
|
+
backgroundColor: '#f4f7ff',
|
|
536
|
+
borderRadius: '5px',
|
|
537
|
+
color: '#0070f3',
|
|
538
|
+
textDecoration: 'none',
|
|
539
|
+
fontWeight: '500',
|
|
540
|
+
transition: 'background-color 0.2s',
|
|
541
|
+
}}
|
|
542
|
+
>
|
|
543
|
+
Revalidated Fetch
|
|
544
|
+
</Link>
|
|
545
|
+
</li>
|
|
546
|
+
<li>
|
|
547
|
+
<Link
|
|
548
|
+
href="/api/nested-fetch-in-api-route"
|
|
549
|
+
style={{
|
|
550
|
+
display: 'block',
|
|
551
|
+
padding: '10px 15px',
|
|
552
|
+
backgroundColor: '#f4f7ff',
|
|
553
|
+
borderRadius: '5px',
|
|
554
|
+
color: '#0070f3',
|
|
555
|
+
textDecoration: 'none',
|
|
556
|
+
fontWeight: '500',
|
|
557
|
+
transition: 'background-color 0.2s',
|
|
558
|
+
}}
|
|
559
|
+
>
|
|
560
|
+
Nested Fetch in API Route
|
|
561
|
+
</Link>
|
|
562
|
+
</li>
|
|
563
|
+
</ul>
|
|
564
|
+
</div>
|
|
565
|
+
|
|
566
|
+
<div
|
|
567
|
+
style={{
|
|
568
|
+
border: '1px solid #eaeaea',
|
|
569
|
+
padding: '25px',
|
|
570
|
+
borderRadius: '8px',
|
|
571
|
+
boxShadow: '0 4px 6px rgba(0,0,0,0.05)',
|
|
572
|
+
transition: 'transform 0.2s, box-shadow 0.2s',
|
|
573
|
+
backgroundColor: '#fff',
|
|
574
|
+
}}
|
|
575
|
+
>
|
|
576
|
+
<h3
|
|
577
|
+
style={{
|
|
578
|
+
fontSize: '1.4rem',
|
|
579
|
+
color: '#0070f3',
|
|
580
|
+
marginTop: '0',
|
|
581
|
+
marginBottom: '15px',
|
|
582
|
+
borderBottom: '1px solid #eaeaea',
|
|
583
|
+
paddingBottom: '10px',
|
|
584
|
+
}}
|
|
585
|
+
>
|
|
586
|
+
Revalidation APIs
|
|
587
|
+
</h3>
|
|
588
|
+
<div
|
|
589
|
+
style={{
|
|
590
|
+
backgroundColor: '#f0f7ff',
|
|
591
|
+
padding: '10px',
|
|
592
|
+
borderRadius: '5px',
|
|
593
|
+
marginBottom: '15px',
|
|
594
|
+
fontSize: '0.9rem',
|
|
595
|
+
borderLeft: '3px solid #0070f3',
|
|
596
|
+
}}
|
|
597
|
+
>
|
|
598
|
+
These API routes allow on-demand revalidation of cached content
|
|
599
|
+
using either path-based or tag-based approaches.
|
|
600
|
+
</div>
|
|
601
|
+
<ul
|
|
602
|
+
style={{
|
|
603
|
+
listStyleType: 'none',
|
|
604
|
+
padding: '0',
|
|
605
|
+
margin: '0',
|
|
606
|
+
}}
|
|
607
|
+
>
|
|
608
|
+
<li style={{ marginBottom: '12px' }}>
|
|
609
|
+
<Link
|
|
610
|
+
href="/api/revalidatePath?path=/pages/revalidated-fetch/revalidate15--default-page"
|
|
611
|
+
style={{
|
|
612
|
+
display: 'block',
|
|
613
|
+
padding: '10px 15px',
|
|
614
|
+
backgroundColor: '#f4f7ff',
|
|
615
|
+
borderRadius: '5px',
|
|
616
|
+
color: '#0070f3',
|
|
617
|
+
textDecoration: 'none',
|
|
618
|
+
fontWeight: '500',
|
|
619
|
+
transition: 'background-color 0.2s',
|
|
620
|
+
}}
|
|
621
|
+
>
|
|
622
|
+
Revalidate Path
|
|
623
|
+
</Link>
|
|
624
|
+
</li>
|
|
625
|
+
<li>
|
|
626
|
+
<Link
|
|
627
|
+
href="/api/revalidateTag?tag=cached-static-fetch-revalidate15-default-page"
|
|
628
|
+
style={{
|
|
629
|
+
display: 'block',
|
|
630
|
+
padding: '10px 15px',
|
|
631
|
+
backgroundColor: '#f4f7ff',
|
|
632
|
+
borderRadius: '5px',
|
|
633
|
+
color: '#0070f3',
|
|
634
|
+
textDecoration: 'none',
|
|
635
|
+
fontWeight: '500',
|
|
636
|
+
transition: 'background-color 0.2s',
|
|
637
|
+
}}
|
|
638
|
+
>
|
|
639
|
+
Revalidate Tag
|
|
640
|
+
</Link>
|
|
641
|
+
</li>
|
|
642
|
+
</ul>
|
|
643
|
+
</div>
|
|
644
|
+
</div>
|
|
645
|
+
</section>
|
|
646
|
+
|
|
647
|
+
<section style={{ marginBottom: '40px' }}>
|
|
648
|
+
<h2
|
|
649
|
+
style={{
|
|
650
|
+
fontSize: '1.8rem',
|
|
651
|
+
borderLeft: '5px solid #0070f3',
|
|
652
|
+
paddingLeft: '15px',
|
|
653
|
+
color: '#0070f3',
|
|
654
|
+
marginBottom: '25px',
|
|
655
|
+
}}
|
|
656
|
+
>
|
|
657
|
+
Revalidation Interface
|
|
658
|
+
</h2>
|
|
659
|
+
<RevalidationInterface />
|
|
660
|
+
</section>
|
|
661
|
+
|
|
662
|
+
<section style={{ marginBottom: '40px' }}>
|
|
663
|
+
<h2
|
|
664
|
+
style={{
|
|
665
|
+
fontSize: '1.8rem',
|
|
666
|
+
borderLeft: '5px solid #0070f3',
|
|
667
|
+
paddingLeft: '15px',
|
|
668
|
+
color: '#0070f3',
|
|
669
|
+
marginBottom: '25px',
|
|
670
|
+
}}
|
|
671
|
+
>
|
|
672
|
+
Cache Testing Tools
|
|
673
|
+
</h2>
|
|
674
|
+
<div
|
|
675
|
+
style={{
|
|
676
|
+
border: '1px solid #eaeaea',
|
|
677
|
+
padding: '25px',
|
|
678
|
+
borderRadius: '8px',
|
|
679
|
+
boxShadow: '0 4px 6px rgba(0,0,0,0.05)',
|
|
680
|
+
backgroundColor: '#fff',
|
|
681
|
+
}}
|
|
682
|
+
>
|
|
683
|
+
<p
|
|
684
|
+
style={{
|
|
685
|
+
fontSize: '1.1rem',
|
|
686
|
+
lineHeight: '1.6',
|
|
687
|
+
color: '#555',
|
|
688
|
+
marginTop: '0',
|
|
689
|
+
}}
|
|
690
|
+
>
|
|
691
|
+
Use these links to test various caching scenarios. Each link
|
|
692
|
+
demonstrates different caching behaviors:
|
|
693
|
+
</p>
|
|
694
|
+
<ul
|
|
695
|
+
style={{
|
|
696
|
+
paddingLeft: '20px',
|
|
697
|
+
color: '#555',
|
|
698
|
+
lineHeight: '1.6',
|
|
699
|
+
}}
|
|
700
|
+
>
|
|
701
|
+
<li style={{ marginBottom: '10px' }}>
|
|
702
|
+
<strong style={{ color: '#0070f3' }}>Cached Static Fetch</strong>:
|
|
703
|
+
Demonstrates static caching with no revalidation
|
|
704
|
+
</li>
|
|
705
|
+
<li style={{ marginBottom: '10px' }}>
|
|
706
|
+
<strong style={{ color: '#0070f3' }}>Revalidated Fetch</strong>:
|
|
707
|
+
Shows how data is revalidated after a specified time
|
|
708
|
+
</li>
|
|
709
|
+
<li style={{ marginBottom: '10px' }}>
|
|
710
|
+
<strong style={{ color: '#0070f3' }}>Uncached Fetch</strong>:
|
|
711
|
+
Shows dynamic data fetching without caching
|
|
712
|
+
</li>
|
|
713
|
+
<li>
|
|
714
|
+
<strong style={{ color: '#0070f3' }}>Revalidate Path/Tag</strong>:
|
|
715
|
+
Demonstrates on-demand revalidation
|
|
716
|
+
</li>
|
|
717
|
+
</ul>
|
|
718
|
+
<div
|
|
719
|
+
style={{
|
|
720
|
+
backgroundColor: '#f9f9f9',
|
|
721
|
+
padding: '15px',
|
|
722
|
+
borderRadius: '5px',
|
|
723
|
+
borderLeft: '4px solid #0070f3',
|
|
724
|
+
marginTop: '20px',
|
|
725
|
+
}}
|
|
726
|
+
>
|
|
727
|
+
<p
|
|
728
|
+
style={{
|
|
729
|
+
fontSize: '1.1rem',
|
|
730
|
+
margin: '0',
|
|
731
|
+
color: '#555',
|
|
732
|
+
}}
|
|
733
|
+
>
|
|
734
|
+
<strong>Testing Tip:</strong> Try visiting a page, then triggering
|
|
735
|
+
revalidation using the API routes, and observe how the counter
|
|
736
|
+
values change.
|
|
737
|
+
</p>
|
|
738
|
+
</div>
|
|
739
|
+
</div>
|
|
740
|
+
</section>
|
|
741
|
+
|
|
742
|
+
<footer
|
|
743
|
+
style={{
|
|
744
|
+
marginTop: '60px',
|
|
745
|
+
textAlign: 'center',
|
|
746
|
+
color: '#666',
|
|
747
|
+
borderTop: '1px solid #eaeaea',
|
|
748
|
+
paddingTop: '20px',
|
|
749
|
+
}}
|
|
750
|
+
>
|
|
751
|
+
<p>nextjs-turbo-redis-cache testing application</p>
|
|
752
|
+
</footer>
|
|
753
|
+
</main>
|
|
754
|
+
);
|
|
755
|
+
}
|