Trying to Integrate Calenderly with SSG using NextJS 13
Answered
West African Lion posted this in #help-forum
West African LionOP
I'm running into issues trying to get react-calendly (https://www.npmjs.com/package/react-calendly#react-calendly) to work with my NextJS website. I managed to get it kida working with the following code:
but if I refresh the page, it crashes with an error about the hydration not being the same as the server render. In addition to that, I get all of these errors when I actually click on the button - picture attached!
const CalendarButton = () => {
return typeof window !== 'undefined' && <PopupButton
url="https://calendly.com/ekarni/apartment-showing"
rootElement={document.getElementById("root")!}
text="Schedule Viewing"
className='__btn'
/>
}but if I refresh the page, it crashes with an error about the hydration not being the same as the server render. In addition to that, I get all of these errors when I actually click on the button - picture attached!
43 Replies
Funny, I am writing a course on this
short answer, you can't do that
you have to wait for the component to mount
so using the "useClient" hook, you can do something like:
const isClient = useClient()
if (!isClient) return null
return <PopupButton>...
you can also render a skeleton that is roughly the size of your component when "isClient" is false, Lighthouse will appreciate
The issues you have when clicking are a different problem, more specific to your setup or this component, there I can't help much
seems a misconfigured iframe
West African LionOP
Where is the comparission failing? I think I'm struggling with this since I'm not sure what's going on. Why am I getting that error if the refresh happens when the modal isn't open?
Got it, I'll try figuring that out myself
Getting the website to not crash would be a priority anyhow
the modal could be rendered but not visible
West African LionOP
Oh!
I see
So it is technically in the DOM?
when you have a server render, React needs to "understand" (= hydrate) the erendered HTML
so it does a client render and compares
West African LionOP
which is what it is using to compare
it doesn't accept a mismatch between the server render and the first client render (in strict mode this is actually 2 client renders)
otherwise it can't get what happens
West African LionOP
hmmm
yes I think
if you have this issue it means smth has been server-rendered
which matches your window check, you are sure to have bugs with that
you need to check mounting and not just being client-side basically
West African LionOP
So your recommendation would be to do the following?
const isClient = useClient()
if (!isClient) return null
return <PopupButton>Next calls that "useCLient" but a better name is "useMounted" or "useHydrated"
yes it's Next recommendation
West African LionOP
Let me give that a shot
Hmm it isn't happy about the
useClient(), let me see if forcing the import helpsOkay, I think I'm missing something
Where did you get the
useClient from?Are you talking about this solution?
import { useState, useEffect } from 'react'
export default function App() {
const [isClient, setIsClient] = useState(false)
useEffect(() => {
setIsClient(true)
}, [])
return <h1>{isClient ? 'This is never prerendered' : 'Prerendered'}</h1>
}I got something working!!! Thank you so much â¤ï¸ This is what I ended up with:
import { useState, useEffect } from 'react'
export default function App() {
const [isClient, setIsClient] = useState(false)
useEffect(() => {
setIsClient(true)
}, [])
return <div>
{
isClient && <PopupButton
url="https://calendly.com/ekarni/apartment-showing"
rootElement={document.getElementById("root")!}
text="Schedule Viewing"
className='__btn'
/>
}
</div>
}Perfect that's exactly how it's supposed to be done
Client Components should tolerate a server-render, even if they just render an empty div that's ok, and have a matching first client-render, which will be the case here
then the effect kicks in
West African LionOP
and I figured out most of the other issues so we are good!
If you wouldn't mind, please let me know when you are done writing that article, I still have a lot to learn about the inner-workings of NextJS it seems â¤ï¸
@West African Lion no problem I can invite you to the course if you DM me your email