48 lines
1.2 KiB
JavaScript
48 lines
1.2 KiB
JavaScript
import dynamic from 'next/dynamic'
|
|
import { useState, useEffect } from 'react'
|
|
import FourDirect from '../components/four'
|
|
|
|
const One = dynamic(() => import('../components/one'))
|
|
const Two = dynamic(() => import('../components/two'))
|
|
const Three = dynamic(() => import('../components/three'))
|
|
const Four = dynamic(() => import('../components/four'))
|
|
|
|
if (typeof window !== 'undefined') {
|
|
window.caughtErrors = ''
|
|
const origError = console.error
|
|
|
|
console.error = function (...args) {
|
|
window.caughtErrors += args.join(' ')
|
|
origError(...args)
|
|
}
|
|
}
|
|
|
|
const BEFORE_HYDRATION =
|
|
typeof document !== 'undefined' && document.getElementById('foo').innerHTML
|
|
|
|
const Index = () => {
|
|
const [firstRender, setFirstRender] = useState('the-server-value')
|
|
const [beforeHydration, setBeforeHydration] = useState(
|
|
'the-second-server-value'
|
|
)
|
|
useEffect(() => {
|
|
setFirstRender(document.getElementById('foo').innerHTML)
|
|
setBeforeHydration(BEFORE_HYDRATION)
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<div id="foo">
|
|
Index
|
|
<One />
|
|
<Two />
|
|
<Three />
|
|
<Four />
|
|
<FourDirect />
|
|
</div>
|
|
<div id="first-render">{firstRender}</div>
|
|
<div id="before-hydration">{beforeHydration}</div>
|
|
</>
|
|
)
|
|
}
|
|
export default Index
|