Theo's Typesafe Cult•15mo ago

getStaticProps & SSG helper data still being fetched on client.

Hello ya'll, my first time working on a new project using the T3 stack. Like it a lot so far. I'm a bit stumped after trying to pre-fetch data for a static page though. After looking through guides for SSG helpers, my assumption would be that the following code should work

import React from "react"
import { createServerSideHelpers } from '@trpc/react-query/server'
import { api } from "~/utils/api"
import { jobRouter } from "~/server/api/routers/job"
import { createInnerTRPCContext } from "~/server/api/trpc"
import { GetStaticPropsContext, InferGetStaticPropsType } from "next"

import { Menu, Head, Footer, JobCard } from "~/components"
import SuperJSON from "superjson"

export default function Home(props: InferGetStaticPropsType<typeof getStaticProps>) {

  const { data: jobs } = api.job.getAll.useQuery()

  return (
    <div className="min-h-screen flex flex-col justify-between">
      <Head />
      <main>
        <Menu />
        <div className="mt-18 p-4 flex flex-col gap-4">
          {jobs?.map((job) => (<JobCard key={job.id} title={job.title} companyName={job.company.name} companyLogo={job.company.logoUrl} />))}
        </div>
      </main>
      <Footer />
    </div>
  )
}

export const getStaticProps = async (context: GetStaticPropsContext) => {
  const helpers = createServerSideHelpers({
    router: jobRouter,
    ctx: createInnerTRPCContext({ session: null }),
    transformer: SuperJSON
  })

  await helpers.getAll.prefetch()

  return {
    props: {
      trpcState: helpers.dehydrate(),
    },
  }
}

import React from "react"
import { createServerSideHelpers } from '@trpc/react-query/server'
import { api } from "~/utils/api"
import { jobRouter } from "~/server/api/routers/job"
import { createInnerTRPCContext } from "~/server/api/trpc"
import { GetStaticPropsContext, InferGetStaticPropsType } from "next"

import { Menu, Head, Footer, JobCard } from "~/components"
import SuperJSON from "superjson"

export default function Home(props: InferGetStaticPropsType<typeof getStaticProps>) {

  const { data: jobs } = api.job.getAll.useQuery()

  return (
    <div className="min-h-screen flex flex-col justify-between">
      <Head />
      <main>
        <Menu />
        <div className="mt-18 p-4 flex flex-col gap-4">
          {jobs?.map((job) => (<JobCard key={job.id} title={job.title} companyName={job.company.name} companyLogo={job.company.logoUrl} />))}
        </div>
      </main>
      <Footer />
    </div>
  )
}

export const getStaticProps = async (context: GetStaticPropsContext) => {
  const helpers = createServerSideHelpers({
    router: jobRouter,
    ctx: createInnerTRPCContext({ session: null }),
    transformer: SuperJSON
  })

  await helpers.getAll.prefetch()

  return {
    props: {
      trpcState: helpers.dehydrate(),
    },
  }
}

I'm only going to need to revalidate my frontpage once per day for new jobs. However, when deploying my app to Vercel, it's clearly not static. I can see a network request made, and any new data in the db will be shown. Appreciate any help or ideas 🙏

5 Replies

Grimbo•15mo ago

disabling the following did not do the trick either 🤔 const { data: jobs } = api.job.getAll.useQuery(undefined, { refetchOnMount: false, refetchOnWindowFocus: false }) Seems like adding Revalidate did the trick... I don't understand fully why though, as usually, if I did a good ol' normal fetch directly from the server it would be completely stale until I make a new deployment. Oh well, I was planning to add a revalidate either way ! :3

deforestor•15mo ago

I think you're mixing the things The requests always happen, what doesn't happen always is the update of the components, by default

deforestor•15mo ago

You could try something like this

deforestor•15mo ago

I'm doing something similar in this code^ It won't let RQ refetch until 1h has passed but you'd do it to 24h

Grimbo•15mo ago

Hmm...yeah it's a bit confusing. Still trying to wrap my head around the dehydation and pre-fetching flow. But, at least now when I added revalidate to GetStaticProps, I don't see any request being made to the DB in the network tab at all, and it doesn't refetch any any new data. So... seems to be working ?

Gaming

Programming

getStaticProps & SSG helper data still being fetched on client.