/
index.js
52 lines (39 loc) · 1.31 KB
/
index.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
52
import React, { useState } from 'react'
import Header from '../components/Header'
import dynamic from 'next/dynamic'
const DynamicComponent1 = dynamic(() => import('../components/hello1'))
const DynamicComponent2WithCustomLoading = dynamic(
() => import('../components/hello2'),
{
loading: () => <p>Loading caused by client page transition ...</p>,
}
)
const DynamicComponent3WithNoSSR = dynamic(
() => import('../components/hello3'),
{
loading: () => <p>Loading ...</p>,
ssr: false,
}
)
const DynamicComponent4 = dynamic(() => import('../components/hello4'))
const DynamicComponent5 = dynamic(() => import('../components/hello5'))
const IndexPage = () => {
const [showMore, setShowMore] = useState(false)
return (
<div>
<Header />
{/* Load immediately, but in a separate bundle */}
<DynamicComponent1 />
{/* Show a progress indicator while loading */}
<DynamicComponent2WithCustomLoading />
{/* Load only on the client side */}
<DynamicComponent3WithNoSSR />
{/* This component will never be loaded */}
{React.noSuchField && <DynamicComponent4 />}
{/* Load on demand */}
{showMore && <DynamicComponent5 />}
<button onClick={() => setShowMore(!showMore)}>Toggle Show More</button>
</div>
)
}
export default IndexPage