Skip to content

Commit 0d194fc

Browse files
orinokaiorinokai
authored
feat: dx updates to default demo site (#1447)
* feat: add page description detail and make prerendered paths consistent * feat: add render target description and make linked pages more consistent * feat: add package.json scripts for local testing * feat: add vscode launch.json for debugging * test: update snapshot to match new prerendered page slugs * fix: incorrectly named rendering methods * feat: adding ttl to ISR log
1 parent 1d90f68 commit 0d194fc

File tree

12 files changed

+167
-97
lines changed

12 files changed

+167
-97
lines changed

‎.vscode/launch.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"name": "Attach",
9+
"port": 9229,
10+
"request": "attach",
11+
"skipFiles": ["<node_internals>/**"],
12+
"type": "node"
13+
}
14+
]
15+
}

‎demos/default/package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
"private": true,
55
"description": "",
66
"scripts": {
7-
"build": "next build"
7+
"build": "next build",
8+
"dev": "next dev",
9+
"serve": "next build && next start"
810
},
911
"repository": {
1012
"type": "git",

‎demos/default/pages/getStaticProps/[id].js

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import Link from 'next/link'
22

3-
const Show = ({ show }) => (
3+
const Show = ({ show, time }) => (
44
<div>
55
<p>This page uses getStaticProps() to pre-fetch a TV show.</p>
6-
6+
<p>Ids 1 and 2 are prerendered and others should 404.</p>
77
<hr />
88

99
<h1>Show #{show.id}</h1>
1010
<p>{show.name}</p>
11-
11+
<p>Rendered at {time} (slowly)</p>
1212
<hr />
1313

1414
<Link href="/">
@@ -32,10 +32,12 @@ export async function getStaticProps({ params }) {
3232

3333
const res = await fetch(`https://api.tvmaze.com/shows/${id}`)
3434
const data = await res.json()
35+
const time = new Date().toLocaleTimeString()
3536

3637
return {
3738
props: {
3839
show: data,
40+
time,
3941
},
4042
}
4143
}

‎demos/default/pages/getStaticProps/withFallback/[...slug].js

+9-5
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,26 @@
11
import { useRouter } from 'next/router'
22
import Link from 'next/link'
33

4-
const Show = ({ show }) => {
4+
const Show = ({ show, time }) => {
55
const router = useRouter()
66

7-
// This is never shown on Netlify. We just need it for NextJS to be happy,
8-
// because NextJS will render a fallback HTML page.
97
if (router.isFallback) {
108
return <div>Loading...</div>
119
}
1210

1311
return (
1412
<div>
1513
<p>This page uses getStaticProps() to pre-fetch a TV show.</p>
16-
14+
<p>
15+
Paths /my/path/1 and /my/path/2 are prerendered and any other path should show a{' '}
16+
<a href="https://nextjs.org/docs/api-reference/data-fetching/get-static-paths#fallback-true">fallback page</a>{' '}
17+
while rendering.
18+
</p>
1719
<hr />
1820

1921
<h1>Show #{show.id}</h1>
2022
<p>{show.name}</p>
21-
23+
<p>Rendered at {time} </p>
2224
<hr />
2325

2426
<Link href="/">
@@ -44,10 +46,12 @@ export async function getStaticProps({ params }) {
4446

4547
const res = await fetch(`https://api.tvmaze.com/shows/${id}`)
4648
const data = await res.json()
49+
const time = new Date().toLocaleTimeString()
4750

4851
return {
4952
props: {
5053
show: data,
54+
time,
5155
},
5256
}
5357
}

‎demos/default/pages/getStaticProps/withFallback/[id].js

+10-6
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,26 @@
11
import { useRouter } from 'next/router'
22
import Link from 'next/link'
33

4-
const Show = ({ show }) => {
4+
const Show = ({ show, time }) => {
55
const router = useRouter()
66

7-
// This is never shown on Netlify. We just need it for NextJS to be happy,
8-
// because NextJS will render a fallback HTML page.
97
if (router.isFallback) {
108
return <div>Loading...</div>
119
}
1210

1311
return (
1412
<div>
1513
<p>This page uses getStaticProps() to pre-fetch a TV show.</p>
16-
14+
<p>
15+
Ids 1 and 2 are prerendered and others should show a{' '}
16+
<a href="https://nextjs.org/docs/api-reference/data-fetching/get-static-paths#fallback-true">fallback page</a>{' '}
17+
while rendering.
18+
</p>
1719
<hr />
1820

1921
<h1>Show #{show.id}</h1>
2022
<p>{show.name}</p>
21-
23+
<p>Rendered at {time} </p>
2224
<hr />
2325

2426
<Link href="/">
@@ -30,7 +32,7 @@ const Show = ({ show }) => {
3032

3133
export async function getStaticPaths() {
3234
// Set the paths we want to pre-render
33-
const paths = [{ params: { id: '3' } }, { params: { id: '4' } }]
35+
const paths = [{ params: { id: '1' } }, { params: { id: '2' } }]
3436

3537
// We'll pre-render these paths at build time.
3638
// { fallback: true } means other routes will be rendered at runtime.
@@ -43,10 +45,12 @@ export async function getStaticProps({ params }) {
4345

4446
const res = await fetch(`https://api.tvmaze.com/shows/${id}`)
4547
const data = await res.json()
48+
const time = new Date().toLocaleTimeString()
4649

4750
return {
4851
props: {
4952
show: data,
53+
time,
5054
},
5155
}
5256
}

‎demos/default/pages/getStaticProps/withFallbackBlocking/[id].js

+19-27
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,26 @@
11
import { useRouter } from 'next/router'
22
import Link from 'next/link'
33

4-
const Show = ({ show }) => {
5-
const router = useRouter()
6-
7-
// This is never shown on Netlify. We just need it for NextJS to be happy,
8-
// because NextJS will render a fallback HTML page.
9-
if (router.isFallback) {
10-
return <div>Loading...</div>
11-
}
12-
13-
return (
14-
<div>
15-
<p>This page uses getStaticProps() to pre-fetch a TV show.</p>
16-
17-
<hr />
18-
19-
<h1>Show #{show.id}</h1>
20-
<p>{show.name}</p>
21-
22-
<hr />
23-
24-
<Link href="/">
25-
<a>Go back home</a>
26-
</Link>
27-
</div>
28-
)
29-
}
4+
const Show = ({ show, time }) => (
5+
<div>
6+
<p>This page uses getStaticProps() to pre-fetch a TV show.</p>
7+
<p>Ids 1 and 2 are prerendered and others should render on-demand.</p>
8+
<hr />
9+
10+
<h1>Show #{show.id}</h1>
11+
<p>{show.name}</p>
12+
<p>Rendered at {time} </p>
13+
<hr />
14+
15+
<Link href="/">
16+
<a>Go back home</a>
17+
</Link>
18+
</div>
19+
)
3020

3121
export async function getStaticPaths() {
3222
// Set the paths we want to pre-render
33-
const paths = [{ params: { id: '3' } }, { params: { id: '4' } }]
23+
const paths = [{ params: { id: '1' } }, { params: { id: '2' } }]
3424

3525
// We'll pre-render these paths at build time.
3626
// { fallback: blocking } means routes will be built when visited for the
@@ -44,10 +34,12 @@ export async function getStaticProps({ params }) {
4434

4535
const res = await fetch(`https://api.tvmaze.com/shows/${id}`)
4636
const data = await res.json()
37+
const time = new Date().toLocaleTimeString()
4738

4839
return {
4940
props: {
5041
show: data,
42+
time,
5143
},
5244
}
5345
}

‎demos/default/pages/getStaticProps/withRevalidate/[id].js

+4-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import Link from 'next/link'
33
const Show = ({ show, time }) => (
44
<div>
55
<p>This page uses getStaticProps() to pre-fetch a TV show.</p>
6-
6+
<p>Ids 1 and 2 are prerendered and others should 404.</p>
7+
<p>The page should be revalidated after 60 seconds.</p>
78
<hr />
89

910
<h1>Show #{show.id}</h1>
@@ -33,13 +34,13 @@ export async function getStaticProps({ params }) {
3334
const res = await fetch(`https://api.tvmaze.com/shows/${id}`)
3435
const data = await res.json()
3536
const time = new Date().toLocaleTimeString()
36-
await new Promise((resolve) => setTimeout(resolve, 3000))
37+
3738
return {
3839
props: {
3940
show: data,
4041
time,
4142
},
42-
revalidate: 1,
43+
revalidate: 60,
4344
}
4445
}
4546

‎demos/default/pages/getStaticProps/withRevalidate/withFallback/[id].js

+31-15
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,35 @@
1+
import { useRouter } from 'next/router'
12
import Link from 'next/link'
23

3-
const Show = ({ show }) => (
4-
<div>
5-
<p>This page uses getStaticProps() to pre-fetch a TV show.</p>
4+
const Show = ({ show, time }) => {
5+
const router = useRouter()
66

7-
<hr />
8-
9-
<h1>Show #{show?.id}</h1>
10-
<p>{show?.name}</p>
11-
12-
<hr />
7+
if (router.isFallback) {
8+
return <div>Loading...</div>
9+
}
1310

14-
<Link href="/">
15-
<a>Go back home</a>
16-
</Link>
17-
</div>
18-
)
11+
return (
12+
<div>
13+
<p>This page uses getStaticProps() to pre-fetch a TV show.</p>
14+
<p>
15+
Ids 1 and 2 are prerendered and others should show a{' '}
16+
<a href="https://nextjs.org/docs/api-reference/data-fetching/get-static-paths#fallback-true">fallback page</a>{' '}
17+
while rendering.
18+
</p>
19+
<p>The page should be revalidated after 60 seconds.</p>
20+
<hr />
21+
22+
<h1>Show #{show.id}</h1>
23+
<p>{show.name}</p>
24+
<p>Rendered at {time} </p>
25+
<hr />
26+
27+
<Link href="/">
28+
<a>Go back home</a>
29+
</Link>
30+
</div>
31+
)
32+
}
1933

2034
export async function getStaticPaths() {
2135
// Set the paths we want to pre-render
@@ -32,12 +46,14 @@ export async function getStaticProps({ params }) {
3246

3347
const res = await fetch(`https://api.tvmaze.com/shows/${id}`)
3448
const data = await res.json()
49+
const time = new Date().toLocaleTimeString()
3550

3651
return {
3752
props: {
3853
show: data,
54+
time,
3955
},
40-
revalidate: 1,
56+
revalidate: 60,
4157
}
4258
}
4359

‎demos/default/pages/getStaticProps/withRevalidate/withFallbackBlocking/[id].js

+3-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import Link from 'next/link'
33
const Show = ({ show, time }) => (
44
<div>
55
<p>This page uses getStaticProps() to pre-fetch a TV show.</p>
6-
<p>Ids 1 and 2 are prerendered</p>
6+
<p>Ids 1 and 2 are prerendered and others should render on-demand.</p>
7+
<p>The page should be revalidated after 60 seconds.</p>
78
<hr />
89

910
<h1>Show #{show.id}</h1>
@@ -33,6 +34,7 @@ export async function getStaticProps({ params }) {
3334
const res = await fetch(`https://api.tvmaze.com/shows/${id}`)
3435
const data = await res.json()
3536
const time = new Date().toLocaleTimeString()
37+
3638
return {
3739
props: {
3840
show: data,

0 commit comments

Comments
 (0)