Having issues with dates in Next.js development. Encountering three errors that need to be addressed:
Warning: Text content did not match. Server: "Tuesday, January 24, 2023 at 11:01 AM" Client: "Tuesday, January 24, 2023 at 11:01 AM"Error: Hydration failed because the initial UI does not match what was rendered on the server.Error: There was an error while hydrating. Due to the issue occurring outside of a Suspense boundary, client rendering takes over for the entire root page.The subsequent errors seem connected to the first one.
Noteworthy is that the discrepancy between the server and client texts only involve spacing around time notation – why no-break space (U+202F) on the server but regular space (U+0020) on the client?
Currently employing getServerSideProps as shown below:
export async function getServerSideProps() {
const eventsResult = (await prisma.event.findMany()).slice(0, 3);
const newsResult = (await prisma.news.findMany()).slice(0, 3);
return {
props: {
events: JSON.parse(JSON.stringify(eventsResult)),
news: JSON.parse(JSON.stringify(newsResult)),
backgroundColor: "red",
},
};
}
Initially considered that JSON parsing might influence this issue, yet altering the code yielded no success:
export async function getServerSideProps() {
const eventsResult = (await prisma.event.findMany()).slice(0, 3);
const newsResult = (await prisma.news.findMany()).slice(0, 3);
const formattedEventsResults = eventsResult.map((e) => ({
...e,
start: e.start.toString(),
end: e.start.toString(),
}));
const formattedNewsResult = newsResult.map((n) => ({
...n,
datetime: n.datetime.toString(),
}));
return {
props: {
events: formattedEventsResults,
news: formattedNewsResult,
backgroundColor: "red",
},
};
}
The specific line within the component displaying the date reads as follows:
(Without involving timezone conversions since working with fabricated data for simplicity's sake. Just seeking consistency between stored and displayed values.)
{new Date(props.start).toLocaleString(undefined, {
timeZone: "UTC",
year: "numeric",
month: "long",
day: "2-digit",
weekday: "long",
hour: "2-digit",
minute: "2-digit",
})}
Any suggestions on enforcing synchronization between server and client rendering without encountering hydration challenges?