Hydration failed because the initial UI does not match what was rendered on the server

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Text content did not match. Server: "3/07/23" Client: "03/07/2023"

See more info here: https://nextjs.org/docs/messages/react-hydration-error
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Text content did not match. Server: "3/07/23" Client: "03/07/2023"

See more info here: https://nextjs.org/docs/messages/react-hydration-error
const PostPage: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = (
{ id }
) => {
...
const postCreatedAt = post ? dateTimeFormatter.format(post.createdAt) : "";
... }

const dateTimeFormatter = new Intl.DateTimeFormat(undefined, {
dateStyle: "short",
});

export const getStaticPaths: GetStaticPaths = () => {
return {
paths: [],
fallback: "blocking",
}
}

export async function getStaticProps(context: GetStaticPropsContext<{id: string}>) {
const id = context.params?.id;

if (id == null) {
return {
redirect: {
destination: "/"
}
}
}

const ssg = ssgHelper();
await ssg.post.getById.prefetch({id});

return {
props: {
trpcState: ssg.dehydrate(),
id,
}
}
}
const PostPage: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = (
{ id }
) => {
...
const postCreatedAt = post ? dateTimeFormatter.format(post.createdAt) : "";
... }

const dateTimeFormatter = new Intl.DateTimeFormat(undefined, {
dateStyle: "short",
});

export const getStaticPaths: GetStaticPaths = () => {
return {
paths: [],
fallback: "blocking",
}
}

export async function getStaticProps(context: GetStaticPropsContext<{id: string}>) {
const id = context.params?.id;

if (id == null) {
return {
redirect: {
destination: "/"
}
}
}

const ssg = ssgHelper();
await ssg.post.getById.prefetch({id});

return {
props: {
trpcState: ssg.dehydrate(),
id,
}
}
}
T
toadmilk283d ago
could someone explain whats happening and how to fix this please? ok I fixed it by adding
suppressHydrationWarning={true}
suppressHydrationWarning={true}
to the div but I still dont know why that fixed it
AK
Alex / KATT 🐱282d ago
The date on the server is rendered differently than the client, likely b/c they have different timezones You might notice a flicker on the page with the date when you reload Like the date flashes from one thing or another You have to format dates consistently according to the user's timezone
T
toadmilk282d ago
how do I achieve that
More Posts
React tsc starts checking server typesMy tsconfig files are different on the server and client. When I run "tsc" on react client, It is trNextJS 13 Build failingIssue also seen in this PR  https://github.com/trpc/trpc/pull/4574 I found. None of the webpack workGoogle OAuth callbackany one help how to handle google oauth callbackurl using tRPCInfering query/mutation callback opts parameterHey 🙂 Thanks for your hard work on this awesome library. I want to create tRPC router, but i want Type helpers to match available pathsGiven a router like this: ```typescript const appRouter = t.router({ post: t.router({ list: t.Best way of handling recurring events through NextJs and tRPCHi, I'm working on a project that handles users' "bonuses" and I need to refill these bonuses every Are GET and POST the only HTTP verbs supported?I’d like to add a procedure to handle HTTP PUT.Query param in every client requestHi ! Im wondering if there is a way to add query params in every request without creating a custom Not able to implement websockets with trpc```ts import { applyWSSHandler } from "@trpc/server/adapters/ws"; import ws from "ws"; import { creatype error```TS2322: Type '{ name: string; bio: string; location: string; website: string; }' is not assignablIs there a way to use a more updated version of React Query in tRPC?I'm trying to make sure that my tRPC is using the most up to date version of v4 but I don't know howExpress + tRPC: handle express errors from clientI currently have Express as backend and react on frontend. I want to migrate gradually to tRPC + requeries running on server even though ssr is set to falseQueries are running on server side only despite the fact of setting ssr:false. Besides that, the queTypeError: client[procedureType] is not a functionHas anyone encountered this error before? I'm trying to implement an adapter for Auth.js that can coTRPC -useInfiniteQuery() refreshes all data when an input is varied, how to use?So I have a TRPC infiniteQuery: ``` const { data, fetchNextPage, hasNextPage } = trpc.server.Cannot get server response headers in browserHi, I am working on retrieving a specific server-sent header using a custom link with tRPC. This met