File tree Expand file tree Collapse file tree 17 files changed +494
-166
lines changed
test/development/app-dir/cache-components-dev-warmup Expand file tree Collapse file tree 17 files changed +494
-166
lines changed Original file line number Diff line number Diff line change
1
+ import { cookies , headers } from 'next/headers'
2
+ import { CachedData } from '../../data-fetching'
3
+ import { connection } from 'next/server'
4
+ import { Suspense } from 'react'
5
+
6
+ const CACHE_KEY = __dirname + '/__PAGE__'
7
+
8
+ export default function Page ( { params, searchParams } ) {
9
+ return (
10
+ < main >
11
+ < p >
12
+ This page checks whether runtime/dynamic APIs resolve in the correct
13
+ stage (regardless of whether we had a cache miss or not)
14
+ </ p >
15
+ < CachedData cacheKey = { CACHE_KEY } label = "page" />
16
+ < LogAfter label = "--- dynamic stage ---" api = { ( ) => connection ( ) } />
17
+
18
+ { /* Runtime */ }
19
+ < LogAfter label = "cookies" api = { ( ) => cookies ( ) } />
20
+ < LogAfter label = "headers" api = { ( ) => headers ( ) } />
21
+ < LogAfter
22
+ label = "params"
23
+ api = { ( ) => {
24
+ console . log ( 'page - got params promise' , params [ 'id' ] )
25
+ return params
26
+ } }
27
+ />
28
+ < LogAfter label = "searchParams" api = { ( ) => searchParams } />
29
+ { /* Dynamic */ }
30
+ < LogAfter label = "connection" api = { ( ) => connection ( ) } />
31
+ </ main >
32
+ )
33
+ }
34
+
35
+ function LogAfter ( { label, api } : { label : string ; api : ( ) => Promise < any > } ) {
36
+ return (
37
+ < Suspense fallback = { `Waiting for ${ label } ...` } >
38
+ < LogAfterInner label = { label } api = { api } />
39
+ </ Suspense >
40
+ )
41
+ }
42
+
43
+ async function LogAfterInner ( {
44
+ label,
45
+ api,
46
+ } : {
47
+ label : string
48
+ api : ( ) => Promise < any >
49
+ } ) {
50
+ await api ( )
51
+ console . log ( `after ${ label } ` )
52
+ return null
53
+ }
Load Diff This file was deleted.
Original file line number Diff line number Diff line change
1
+ export async function fetchCachedRandom ( cacheKey : string ) {
2
+ return fetchCached (
3
+ `https://next-data-api-endpoint.vercel.app/api/random?key=${ encodeURIComponent ( 'cached-' + cacheKey ) } `
4
+ )
5
+ }
6
+
7
+ export async function fetchCached ( url : string ) {
8
+ const response = await fetch ( url , { cache : 'force-cache' } )
9
+ return response . text ( )
10
+ }
11
+
12
+ export async function getCachedData ( _key : string ) {
13
+ 'use cache'
14
+ await new Promise ( ( r ) => setTimeout ( r ) )
15
+ return Math . random ( )
16
+ }
17
+
18
+ export async function CachedData ( {
19
+ label,
20
+ cacheKey,
21
+ } : {
22
+ label : string
23
+ cacheKey : string
24
+ } ) {
25
+ const data = await getCachedData ( cacheKey )
26
+ console . log ( `after cache read - ${ label } ` )
27
+ return (
28
+ < dl >
29
+ < dt > Cached Data</ dt >
30
+ < dd > { data } </ dd >
31
+ </ dl >
32
+ )
33
+ }
34
+
35
+ export async function CachedFetch ( {
36
+ label,
37
+ cacheKey,
38
+ } : {
39
+ label : string
40
+ cacheKey : string
41
+ } ) {
42
+ const data = await fetchCachedRandom ( cacheKey )
43
+ console . log ( `after cached fetch - ${ label } ` )
44
+ return (
45
+ < dl >
46
+ < dt > Cached Fetch</ dt >
47
+ < dd > { data } </ dd >
48
+ </ dl >
49
+ )
50
+ }
51
+
52
+ export async function UncachedFetch ( {
53
+ label,
54
+ cacheKey,
55
+ } : {
56
+ label : string
57
+ cacheKey : string
58
+ } ) {
59
+ const response = await fetch (
60
+ `https://next-data-api-endpoint.vercel.app/api/random?key=${ encodeURIComponent ( 'uncached-' + cacheKey ) } `
61
+ )
62
+ console . log ( `after uncached fetch - ${ label } ` )
63
+ const data = await response . text ( )
64
+ return (
65
+ < dl >
66
+ < dt > Uncached Fetch</ dt >
67
+ < dd > { data } </ dd >
68
+ </ dl >
69
+ )
70
+ }
Original file line number Diff line number Diff line change 1
- import { fetchCached , getCachedData } from './data-fetching'
2
-
3
1
export default function Root ( { children } : { children : React . ReactNode } ) {
4
2
return (
5
3
< html >
6
- < body >
7
- { children }
8
- < section >
9
- < h1 > Layout</ h1 >
10
- < p > This data is from the root layout</ p >
11
- < FetchingComponent />
12
- < CachedFetchingComponent />
13
- < CachedDataComponent />
14
- </ section >
15
- </ body >
4
+ < body > { children } </ body >
16
5
</ html >
17
6
)
18
7
}
19
-
20
- async function CachedFetchingComponent ( ) {
21
- const data = await fetchCached (
22
- 'https://next-data-api-endpoint.vercel.app/api/random?key=cachedlayout'
23
- )
24
- console . log ( 'after cached layout fetch' )
25
- return (
26
- < dl >
27
- < dt >
28
- Cached Fetch
29
- (https://next-data-api-endpoint.vercel.app/api/random?key=cachedlayout)
30
- </ dt >
31
- < dd > { data } </ dd >
32
- </ dl >
33
- )
34
- }
35
-
36
- async function FetchingComponent ( ) {
37
- const response = await fetch (
38
- 'https://next-data-api-endpoint.vercel.app/api/random?key=uncachedlayout'
39
- )
40
- console . log ( 'after uncached layout fetch' )
41
- const data = await response . text ( )
42
- return (
43
- < dl >
44
- < dt >
45
- Uncached Fetch
46
- (https://next-data-api-endpoint.vercel.app/api/random?key=uncachedlayout)
47
- </ dt >
48
- < dd > { data } </ dd >
49
- </ dl >
50
- )
51
- }
52
-
53
- async function CachedDataComponent ( ) {
54
- const data = await getCachedData ( 'layout' )
55
- console . log ( 'after layout cache read' )
56
- return (
57
- < dl >
58
- < dt > Cached Data</ dt >
59
- < dd > { data } </ dd >
60
- </ dl >
61
- )
62
- }
Load Diff This file was deleted.
Load Diff This file was deleted.
Original file line number Diff line number Diff line change
1
+ export async function PrivateCachedData ( {
2
+ label,
3
+ cacheKey,
4
+ } : {
5
+ label : string
6
+ cacheKey : string
7
+ } ) {
8
+ const data = await getPrivateCachedData ( cacheKey )
9
+ console . log ( `after private cache read - ${ label } ` )
10
+ return (
11
+ < dl >
12
+ < dt > Private Cached Data (Page)</ dt >
13
+ < dd > { data } </ dd >
14
+ </ dl >
15
+ )
16
+ }
17
+
18
+ async function getPrivateCachedData ( _key : string ) {
19
+ 'use cache: private'
20
+ await new Promise ( ( r ) => setTimeout ( r ) )
21
+ return Math . random ( )
22
+ }
Original file line number Diff line number Diff line change
1
+ import { Suspense } from 'react'
2
+ import { UncachedFetch , CachedData } from '../data-fetching'
3
+ import { PrivateCachedData } from './data-fetching'
4
+
5
+ const CACHE_KEY = '/private-cache/__LAYOUT__'
6
+
7
+ export default function Layout ( { children } : { children : React . ReactNode } ) {
8
+ return (
9
+ < >
10
+ { children }
11
+ < section >
12
+ < h1 > Layout</ h1 >
13
+ < p > This data is from a layout</ p >
14
+
15
+ < CachedData label = "layout" cacheKey = { CACHE_KEY } />
16
+
17
+ < Suspense fallback = "Loading private cache..." >
18
+ < PrivateCachedData label = "layout" cacheKey = { CACHE_KEY } />
19
+ </ Suspense >
20
+
21
+ < Suspense fallback = "Loading uncached fetch..." >
22
+ < UncachedFetch label = "layout" cacheKey = { CACHE_KEY } />
23
+ </ Suspense >
24
+ </ section >
25
+ </ >
26
+ )
27
+ }
Original file line number Diff line number Diff line change
1
+ import { Suspense } from 'react'
2
+ import { CachedData , UncachedFetch } from '../data-fetching'
3
+ import { PrivateCachedData } from './data-fetching'
4
+
5
+ const CACHE_KEY = '/private-cache/__PAGE__'
6
+
7
+ export default async function Page ( ) {
8
+ return (
9
+ < main >
10
+ < h1 > Warmup Dev Renders - private cache</ h1 >
11
+
12
+ < CachedData label = "page" cacheKey = { CACHE_KEY } />
13
+
14
+ < Suspense fallback = "Loading private cache..." >
15
+ < PrivateCachedData label = "page" cacheKey = { CACHE_KEY } />
16
+ </ Suspense >
17
+
18
+ < Suspense fallback = "Loading uncached fetch..." >
19
+ < UncachedFetch label = "page" cacheKey = { CACHE_KEY } />
20
+ </ Suspense >
21
+ </ main >
22
+ )
23
+ }
Original file line number Diff line number Diff line change 1
1
import { revalidatePath } from 'next/cache'
2
2
3
- export async function GET ( ) {
4
- revalidatePath ( '/' )
3
+ export async function GET ( request : Request ) {
4
+ const path = new URL ( request . url ) . searchParams . get ( 'path' ) !
5
+ revalidatePath ( path )
5
6
6
7
return Response . json ( { revalidated : true } )
7
8
}
You can’t perform that action at this time.
0 commit comments