Hydration issue implementing getStaticProps

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