-
Notifications
You must be signed in to change notification settings - Fork 0
/
csr.js
51 lines (47 loc) · 1.42 KB
/
csr.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import React from "react";
import Car from "../components/Car";
import { fetchCars } from "../actions/api";
const CSRPage = () => {
const [data, setData] = React.useState(null);
React.useEffect(() => {
fetchCars().then((newData) => setData(newData));
}, []);
return (
<>
<div className="type">
<h3 className="title">Client-Side Rendering</h3>
<h4 className="description">
All data fetching occurs directly on the client
</h4>
<h4 className="description">(Notice the visible flash of data)</h4>
<h5 className="hint">
(Technically this page is SSG and fetching data once loaded on the
client, meaning the flash of data is identical to CSR, but the initial
page render is faster than true CSR)
</h5>
<a
className="link"
href="https://github.com/Josh-McFarlin/nextjs-rendering/blob/main/src/pages/csr.js"
>
View the source here
</a>
</div>
<br />
<div className="type">
{data == null ? (
<p className="loading">Loading...</p>
) : (
<>
<p className="title">
Data Generated: {new Date(data.date).toLocaleString()}
</p>
{data.cars.map((car) => (
<Car key={car.vin} {...car} />
))}
</>
)}
</div>
</>
);
};
export default CSRPage;