Skip to content

Commit 41ee3ae

Browse files
guydumaisguydumais
committed
Version 1.0.0
1 parent 9dc4bfd commit 41ee3ae

23 files changed

+2318
-5480
lines changed

‎README.md‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
# Next.js v10 Data Fetching Boilerplate
1+
# Next.js v11 Data Fetching Boilerplate
22

33
In this repo you will find all the data fetching methods like:
4-
Server sider rendering, static site generation, incremental static regeneration on basic react client-side rendering.
4+
1) Static-Site Generation (SSG)
5+
2) Server-Sider Rendering (SSR)
6+
3) Incremental Static Regeneration
7+
4) Client-Side Rendering
58

6-
The fetching methods are getServerSideProps, getStaticProps. The old method was getInitialProps.
7-
8-
In another video, we will talk about what getStaticPaths does.
9+
The fetching methods are getServerSideProps, getStaticProps.

‎components/BackToHome.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default function BackToHome() {
2+
return (
3+
<span>&#8592; <a href="/">Next.js Page Rendering</a></span>
4+
)
5+
}

‎next-env.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/types/global" />
3+
/// <reference types="next/image-types/global" />

‎next.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
experimental: { optimizeCss: true }
3+
}

‎package-lock.json‎

Lines changed: 0 additions & 5359 deletions
This file was deleted.

‎package.json‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
11
{
2-
"name": "next-fetch",
3-
"version": "0.1.0",
2+
"name": "next-page-rendering",
3+
"version": "1.0.0",
44
"private": true,
55
"scripts": {
66
"dev": "next dev",
77
"build": "next build",
88
"start": "next start"
99
},
1010
"dependencies": {
11-
"next": "10.0.5",
12-
"react": "17.0.1",
13-
"react-dom": "17.0.1"
11+
"critters": "^0.0.10",
12+
"next": "^11.0.1",
13+
"react": "^17.0.2",
14+
"react-dom": "^17.0.2"
15+
},
16+
"devDependencies": {
17+
"@types/react": "^17.0.14",
18+
"typescript": "^4.3.5"
1419
}
1520
}

‎pages/_app.js‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎pages/_app.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import type { AppProps /*, AppContext */ } from 'next/app'
2+
import 'styles.css'
3+
4+
function MainApp({ Component, pageProps }: AppProps) {
5+
return <Component {...pageProps} />
6+
}
7+
8+
export default MainApp

‎pages/_document.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import Document, { Head, Html, Main, NextScript } from 'next/document'
2+
3+
class MainDocument extends Document {
4+
render() {
5+
return (
6+
<Html lang="en">
7+
<Head>
8+
<link rel="icon" href="/favicon.ico" />
9+
</Head>
10+
<body>
11+
<Main />
12+
<NextScript />
13+
</body>
14+
</Html>
15+
)
16+
}
17+
}
18+
19+
export default MainDocument

‎pages/client-side-rendering.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// React
2+
import { useEffect, useState } from 'react'
3+
4+
// Next.js
5+
import Head from 'next/head'
6+
import Link from 'next/link'
7+
8+
// Custom Components
9+
import BackToHome from 'components/BackToHome'
10+
11+
// Page component
12+
export default function ClientSideRendered() {
13+
14+
const [state, setState] = useState([] as any)
15+
16+
const getData = async () => {
17+
const res = await fetch('https://reqres.in/api/users?page=2')
18+
const jsonData = await res.json()
19+
setState(jsonData)
20+
}
21+
22+
useEffect(() => {
23+
getData()
24+
}, [])
25+
26+
return (
27+
<>
28+
<Head>
29+
<title>Client-Side Rendering (CSR) • Guy Dumais</title>
30+
<meta name="description" content="Example page using Client-Side Rendering (CSR) with Next.js 11 and React 17"/>
31+
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
32+
</Head>
33+
<BackToHome/>
34+
<h1>Client-Side Rendering (CSR)</h1>
35+
<p>Data fetched on the client-side only.</p>
36+
<ul>
37+
{
38+
state.data?.map((e) => (
39+
<li key={e.id}>{e.email}</li>
40+
))
41+
}
42+
</ul>
43+
</>
44+
)
45+
46+
}

0 commit comments

Comments
 (0)