8357f46413
* no ssr component which uses useEffect hook This library used wasn't updated for 4 years. I tried to contact the owner, which failed, and decided to create my own. So if you see this PR as a shameless plugin for my own component you can delete it. Just wanted to make this example more up to date. * Update index.js * fix linting * Update index.js * Update example
38 lines
802 B
JavaScript
38 lines
802 B
JavaScript
import React, { useEffect, useState } from 'react'
|
|
import Loading from '../components/Loading'
|
|
|
|
function useMounted() {
|
|
const [mounted, setMounted] = useState(false)
|
|
useEffect(() => setMounted(true), [])
|
|
return mounted
|
|
}
|
|
|
|
export default function HomePage() {
|
|
const isMounted = useMounted()
|
|
return (
|
|
<main>
|
|
<section>
|
|
<h1>This section is server-side rendered.</h1>
|
|
</section>
|
|
|
|
{isMounted ? (
|
|
<section>
|
|
<h2>
|
|
This section is <em>only</em> client-side rendered.
|
|
</h2>
|
|
</section>
|
|
) : (
|
|
<Loading />
|
|
)}
|
|
|
|
<style jsx>{`
|
|
section {
|
|
align-items: center;
|
|
display: flex;
|
|
height: 50vh;
|
|
justify-content: center;
|
|
}
|
|
`}</style>
|
|
</main>
|
|
)
|
|
}
|