Theo's Typesafe Cult•13mo ago

Hydration issue implementing getStaticProps

I switched my site over to using static generation and now I'm getting a hydration error, but only on production. When I turn off javascript and test the site everything looks good, but I'm getting errors in the console that the text doesn't match the server. Here's an abbreviated version of the code:

// home route
// ... npm package imports ...
import { appRouter } from "@/server/api/root";
import { rmRenderers } from "@/utils/react-markdown-renderers";
import { api } from "@/utils/api";
import { prisma } from "@/server/db";

const Home = () => {
  const articles = api.article.getAll.useQuery({ skip: 0, take: 20 });

  return (
  // ... display logic ...
    <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
      {articles?.data?.map((article) => (
        // .. display ...
      ))}
    </div>
  );
};

export default Home;

export const getStaticProps = async () => {
  const helpers = createServerSideHelpers({
    router: appRouter,
    ctx: { session: null, prisma },
    transformer: SuperJSON, // optional - adds superjson serialization
  });

  await helpers.article.getAll.prefetch({ skip: 0, take: 20 });
  return {
    props: {
      trpcState: helpers.dehydrate(),
    },
    revalidate: 1,
  };
};

// home route
// ... npm package imports ...
import { appRouter } from "@/server/api/root";
import { rmRenderers } from "@/utils/react-markdown-renderers";
import { api } from "@/utils/api";
import { prisma } from "@/server/db";

const Home = () => {
  const articles = api.article.getAll.useQuery({ skip: 0, take: 20 });

  return (
  // ... display logic ...
    <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
      {articles?.data?.map((article) => (
        // .. display ...
      ))}
    </div>
  );
};

export default Home;

export const getStaticProps = async () => {
  const helpers = createServerSideHelpers({
    router: appRouter,
    ctx: { session: null, prisma },
    transformer: SuperJSON, // optional - adds superjson serialization
  });

  await helpers.article.getAll.prefetch({ skip: 0, take: 20 });
  return {
    props: {
      trpcState: helpers.dehydrate(),
    },
    revalidate: 1,
  };
};

My pages/article/[slug].tsx file is very similar, but taking a static list as well, and works without hydration error, so I've ruled out things like layout components.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Hydration issue implementing getStaticProps