Skip to content

Instantly share code, notes, and snippets.

@z4vmk
Created May 30, 2023 15:13
Show Gist options
  • Save z4vmk/8d4b55d3f5b45b479fbeb92f20229c07 to your computer and use it in GitHub Desktop.
Save z4vmk/8d4b55d3f5b45b479fbeb92f20229c07 to your computer and use it in GitHub Desktop.
Mounting Method SSR
import { useEffect, useState } from "react"
export default function Index(){
const [mounted, setMounted] = useState(false)
useEffect(() => {
setMounted(true)
})
if (!mounted) {
return null
}
return (
<div>
<h1>TESTING</h1>
</div>
)
}
@kooba
Copy link

kooba commented May 31, 2023

Yep this fixed my Nextjs Hydration failed because the initial UI does not match what was rendered on the server. issue... ๐Ÿ‘

@z4vmk
Copy link
Author

z4vmk commented May 31, 2023

Yep this fixed my Nextjs Hydration failed because the initial UI does not match what was rendered on the server. issue... ๐Ÿ‘

That's great to hear! SSR can really be a pain sometimes, but it really does have it's benefits sometimes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment