TTC
Theo's Typesafe Cult•2y ago
Grimbo

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
GrimboOP•2y 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
deforestor•2y 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
deforestor•2y ago
You could try something like this
deforestor
deforestor•2y 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
GrimboOP•2y 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 ?

Did you find this page helpful?