What is the appropriate way to manage timestamps for SSR?
Unanswered
Large garden bumble bee posted this in #help-forum
Large garden bumble beeOP
Okay so what I have is a list of times that are available for reservation. It looks as follows:
I'm getting an error that hydration failed, is it possibly due to the difference in the client's interpretation of time vs the servers? What's the appropriate way to handle this?
function Schedule({ startTime }) {
const availability = eachHourOfInterval({
start: startOfDay(startTime);
end: endOfDay(startTime);
});
return (
<ol>
{availability.map((start) => {
return (
<li key={start.toISOString()}>
<time>{format(start, "MM/DD eeee")}</time>
</li>
);
})}
</ol>
);
}I'm getting an error that hydration failed, is it possibly due to the difference in the client's interpretation of time vs the servers? What's the appropriate way to handle this?
3 Replies
@Large garden bumble bee Okay so what I have is a list of times that are available for reservation. It looks as follows:
typescript
function Schedule({ startTime }) {
const availability = eachHourOfInterval({
start: startOfDay(startTime);
end: endOfDay(startTime);
});
return (
<ol>
{availability.map((start) => {
return (
<li key={start.toISOString()}>
<time>{format(start, "MM/DD eeee")}</time>
</li>
);
})}
</ol>
);
}
I'm getting an error that hydration failed, is it possibly due to the difference in the client's interpretation of time vs the servers? What's the appropriate way to handle this?
Use a client component
Render an empty <time> component at first
Use useEffect to get the time format result on browser, then use it to add to the body of the <time> element
Render an empty <time> component at first
Use useEffect to get the time format result on browser, then use it to add to the body of the <time> element
Large garden bumble beeOP
oh sweet, that makes sense, so something like:
function Schedule() {
const availability = useRef<null | Interval>(null);
useEffect(() => {
const startTime = new Date();
availability.current = eachHourOfInterval({
start: startOfDay(startTime);
end: endOfDay(startTime);
});
}, []);
return (
<ol>
{availability.current?.map((start) => {
return (
<li key={start.toISOString()}>
<time>{format(start, "MM/DD eeee")}</time>
</li>
);
})}
</ol>
);
}There was a related article recently in Next.js weekly https://francoisbest.com/posts/2023/displaying-local-times-in-nextjs