tRPCttRPC
Powered by
toadmilkT
tRPC•3y ago•
7 replies
toadmilk

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,
    }
  }
}
tRPCJoin
Move Fast & Break Nothing. End-to-end typesafe APIs made easy.
5,015Members
Resources

Similar Threads

Was this page helpful?
Recent Announcements

Similar Threads

Page couldn't be rendered statically because it used `cookies`
K1|llerKK1|ller / ❓-help
3y ago
What does the WebSocketHandler do?
Satou kuzumaSSatou kuzuma / ❓-help
4y ago
The string did not match the expected pattern
KrulknulKKrulknul / ❓-help
2y ago