toadmilk•12mo ago

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,
    }
  }
}

3 Replies

toadmilk•12mo 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

Alex / KATT 🐱•12mo 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

toadmilk•12mo ago

how do I achieve that