9 replies

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

TTC

Theo's Typesafe Cult•3y ago•

9 replies

Grimbo

getStaticProps & SSG helper data still being fetched on client.

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(),
    },
  }
}

getStaticProps & SSG helper data still being fetched on client.

getStaticProps & SSG helper data still being fetched on client.

Similar Threads

Similar Threads

Similar Threads