Skip to content

Commit 9d53975

Browse files
FinnWoelmFinnWoelm
committed
Add demo SSR and HTML pages
Add two pages using getInitialProps (server-side-rendering) and two pages not using getInitialProps (static HTML). One page of each type uses dynamic routing (e.g.: /todos/:id).
1 parent c35c101 commit 9d53975

File tree

7 files changed

+213
-3
lines changed

7 files changed

+213
-3
lines changed

‎package-lock.json

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"build": "next build"
66
},
77
"dependencies": {
8+
"isomorphic-unfetch": "^3.0.0",
89
"next": "^9.2.1",
910
"react": "^16.12.0",
1011
"react-dom": "^16.12.0"

‎pages/index.js

+89-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,91 @@
1-
function HomePage() {
2-
return <div>Welcome to Next.js!</div>
1+
import fetch from 'isomorphic-unfetch'
2+
import Link from 'next/link'
3+
4+
const Index = ({ shows }) => (
5+
<div>
6+
<img
7+
src="/next-on-netlify.png" alt="NextJS on Netlify Banner"
8+
style={{ maxWidth: '100%' }}/>
9+
<h1>NextJS on Netlify</h1>
10+
<p>
11+
This is a demo of a NextJS application with Server-Side Rendering (SSR).
12+
<br/>
13+
It is hosted on Netlify.
14+
<br/>
15+
Server-side rendering is handled by Netlify Functions.
16+
<br/>
17+
Minimal configuration is required.<br/>
18+
Everything is handled by the
19+
{' '}
20+
<a href="https://www.npmjs.com/package/next-on-netlify">
21+
next-on-netlify
22+
</a>
23+
{' '}
24+
npm package.
25+
</p>
26+
27+
<hr/>
28+
29+
<p>
30+
This page is server-side rendered.
31+
<br/>
32+
It fetches a random list of five TV shows
33+
from the TVmaze REST API.
34+
<br/>
35+
Refresh this page to see it change.
36+
</p>
37+
38+
<h3>TV Shows</h3>
39+
<ul>
40+
{shows.map(({ id, name }) => (
41+
<li key={id}>
42+
<Link href="/shows/[id]" as={`/shows/${id}`}>
43+
<a>#{id}: {name}</a>
44+
</Link>
45+
</li>
46+
))}
47+
</ul>
48+
49+
<p>
50+
Click on a show to check out a server-side rendered page with dynamic
51+
routing (/shows/:id).
52+
<br/>
53+
<br/>
54+
Or check out one of these other pages:
55+
</p>
56+
57+
<ul>
58+
<li>
59+
<Link href="/static">
60+
<a>Static NextJS page: /static</a>
61+
</Link>
62+
</li>
63+
<li>
64+
<Link href="/static/[id]" as="/static/123456789">
65+
<a>Static NextJS page with dynamic routing: /static/:id</a>
66+
</Link>
67+
</li>
68+
</ul>
69+
70+
<p>
71+
Or check out the
72+
{' '}
73+
<a href="https://github.com/FinnWoelm/next-on-netlify-demo">
74+
source code on GitHub
75+
</a>.
76+
</p>
77+
</div>
78+
)
79+
80+
Index.getInitialProps = async function() {
81+
// Set a random page between 1 and 100
82+
const randomPage = Math.floor(Math.random()*100) + 1
83+
84+
// Get the data
85+
const res = await fetch(`https://api.tvmaze.com/shows?page=${randomPage}`);
86+
const data = await res.json();
87+
88+
return { shows: data.slice(0, 5) }
389
}
490

5-
export default HomePage
91+
export default Index

‎pages/shows/[id].js

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import fetch from 'isomorphic-unfetch'
2+
import Error from 'next/error'
3+
import Link from 'next/link'
4+
5+
const Show = ({ errorCode, show }) => {
6+
7+
// If show item was not found, render 404 page
8+
if (errorCode) {
9+
return <Error statusCode={errorCode} />
10+
}
11+
12+
// Otherwise, render show
13+
return (
14+
<div>
15+
<p>
16+
This page uses getInitialProps() to fetch the show with the ID
17+
provided in the URL: /shows/:id
18+
<br/>
19+
Refresh the page to see server-side rendering in action.
20+
<br/>
21+
You can also try changing the ID to any other number between 1-10000.
22+
</p>
23+
24+
<hr/>
25+
26+
<h1>Show #{show.id}</h1>
27+
<p>
28+
{show.name}
29+
</p>
30+
31+
<hr/>
32+
33+
<Link href="/">
34+
<a>Go back home</a>
35+
</Link>
36+
</div>
37+
)
38+
}
39+
40+
Show.getInitialProps = async ({ res: req, query }) => {
41+
// Get the ID to render
42+
const { id } = query
43+
44+
// Get the data
45+
const res = await fetch(`https://api.tvmaze.com/shows/${id}`);
46+
const data = await res.json();
47+
48+
// Set error code if show item could not be found
49+
const errorCode = res.status > 200 ? res.status : false
50+
51+
return { errorCode, show: data }
52+
}
53+
54+
export default Show

‎pages/static.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import Link from 'next/link'
2+
3+
const Static = props => (
4+
<div>
5+
<p>
6+
This page does not use getInitialProps.
7+
<br/>
8+
It is a static page.
9+
<br/>
10+
It is never server-side rendered.
11+
<br/>
12+
It is served directly by Netlify's CDN.
13+
<br/>
14+
The <a href="https://www.npmjs.com/package/next-on-netlify">next-on-netlify</a> npm
15+
package takes care of deciding which pages to render server-side and which
16+
ones to serve directly via CDN.
17+
</p>
18+
19+
<hr/>
20+
21+
<Link href="/">
22+
<a>Go back home</a>
23+
</Link>
24+
</div>
25+
)
26+
27+
export default Static

‎pages/static/[id].js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import Link from 'next/link'
2+
3+
const StaticWithID = props => (
4+
<div>
5+
<p>
6+
This page does not use getInitialProps.
7+
<br/>
8+
It is a static page.
9+
<br/>
10+
It is never server-side rendered.
11+
<br/>
12+
It is served directly by Netlify's CDN.
13+
<br/>
14+
<br/>
15+
But it has a dynamic URL parameter: /static/:id.
16+
<br/>
17+
Try changing the ID. It will always render this page, no matter what you
18+
put.
19+
<br/>
20+
I am not sure what this is useful for.
21+
<br/>
22+
But it's a feature of NextJS, so... I'm supporting it.
23+
</p>
24+
25+
<hr/>
26+
27+
<Link href="/">
28+
<a>Go back home</a>
29+
</Link>
30+
</div>
31+
)
32+
33+
export default StaticWithID

‎public/next-on-netlify.png

16.3 KB
Loading

0 commit comments

Comments
 (0)