Hydration failed on page refresh only, with url params
Answered
! AlexNotTheLion posted this in #help-forum
I have a dialog which is opened based on url params, when i refresh the page i get a hydration error
I'm not sure what's causing this at all, I've tried converting this to a parallel route, however there is no page to default to when refreshing or on initial load (and I don't want one), the dialog loads data and I want to fetch data on the server side so changing the dialog component to a client component cant be done, how do i fix this ?
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Expected server HTML to contain a matching <div> in <body>.I'm not sure what's causing this at all, I've tried converting this to a parallel route, however there is no page to default to when refreshing or on initial load (and I don't want one), the dialog loads data and I want to fetch data on the server side so changing the dialog component to a client component cant be done, how do i fix this ?
Answered by joulev
is this shadcn (radix) dialog? radix ui currently has a bug where a dialog cannot be open during server-side rendering, so instead of
you have to
<Dialog open={someCondition}>you have to
const [isOpen, setIsOpen] = useState(false);
useEffect(() => {
if (someCondition) setIsOpen(true);
}, [...]);
<Dialog open={isOpen}>5 Replies
@! AlexNotTheLion I have a dialog which is opened based on url params, when i refresh the page i get a hydration error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Expected server HTML to contain a matching <div> in <body>.
I'm not sure what's causing this at all, I've tried converting this to a parallel route, however there is no page to default to when refreshing or on initial load (and I don't want one), the dialog loads data and I want to fetch data on the server side so changing the dialog component to a client component cant be done, how do i fix this ?
is this shadcn (radix) dialog? radix ui currently has a bug where a dialog cannot be open during server-side rendering, so instead of
you have to
<Dialog open={someCondition}>you have to
const [isOpen, setIsOpen] = useState(false);
useEffect(() => {
if (someCondition) setIsOpen(true);
}, [...]);
<Dialog open={isOpen}>Answer
note that this also means the content of the dialog is not accessible to crawlers
Ah right, okay I'll give that a shot and no worries about crawlers this is just a learning project 🙂
oh and yes it was a shadcn / radix dialog