Theo's Typesafe Cult•16mo ago

T3-stack SSG

Hey guys, im creating a site with the pages router. Im wondering if its possible to create most of it with SSG? Since most of the pages only needs to be populated with data at build time. What do I do ? I use getStaticProps()and getStaticPaths() etc? And it will automatically SSG them at build time?

4 Replies

sommeeeROP•16mo ago

Also the site is gonna use around 25k images. how should i host them? just have them in /public/static/ folder or are there any better solutions for this ?

Paco•16mo ago

IIRC SSG was covered in that 3hr tutorial Theo did, timestamp: https://youtu.be/YkOSUVzOAA4?si=uiG4CNEGzAoYaBVh&t=7560 Not sure if this is outdated info but hope it helps

Theo - t3․gg

YouTube

T3 Stack Tutorial - FROM 0 TO PROD FOR $0 (Next.js, tRPC, TypeScrip...

I've never worked this hard on a video before. I really hope y'all can benefit from this 🙏 GITHUB REPO https://github.com/t3dotgg/chirp DEPLOYED APP https://xn--uo8h.t3.gg/ GET A JACKET IF YOU'RE COOL LIKE THAT https://shop.t3.gg/ ALL MY VIDEOS ARE POSTED EARLY ON PATREON https://www.patreon.com/t3dotgg Everything else (Twitch, Twitter, Discor...

sommeeeROP•16mo ago

thanks i check it out!

Grimbo•16mo ago

I ended up using the createServerSideHelper for generating static pages with the pages folder. Trying to get static and tRPC to work with 13 and the appDir right now and it's messy, not recommended. : <

import { createServerSideHelpers } from '@trpc/react-query/server'

export default function Home(props: InferGetStaticPropsType<typeof getStaticProps>) {
  const { data: jobs } = api.job.getAll.useQuery(undefined, { refetchOnMount: false, refetchOnWindowFocus: false })

    return (<></>)
}

import { createServerSideHelpers } from '@trpc/react-query/server'

export default function Home(props: InferGetStaticPropsType<typeof getStaticProps>) {
  const { data: jobs } = api.job.getAll.useQuery(undefined, { refetchOnMount: false, refetchOnWindowFocus: false })

    return (<></>)
}

My getStaticProps: Might wanna make the helper resuable ofc

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

  await helpers.job.getAll.prefetch()

  return {
    props: {
      trpcState: helpers.dehydrate(),
    },
    revalidate: 60 * 60 * 24 // 24 hours
  }
}

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

  await helpers.job.getAll.prefetch()

  return {
    props: {
      trpcState: helpers.dehydrate(),
    },
    revalidate: 60 * 60 * 24 // 24 hours
  }
}

Gaming

Programming

T3-stack SSG