Theo's Typesafe CultTTC
Theo's Typesafe Cult•4y ago•
10 replies
pogadev

tRPC app with SSR true, getStaticProps or getServerSideProps

Hi all, I've been trying to figure out what is the best way to fetch queries on my website that I'm building with T3 stack.

Long story short: I'm creating a website that will be like a portfolio and an online resume. I have a page called /projects and I'm trying to fetch all the projects on the server, so all the projects can be available when the users arrives on the page.

I've been reading a lot of stuff lately about SSR and which methods to use to fetch data, either getServerSideProps or getStaticProps. On top of this, I know that tRPC configuration accepts a ssr: true | false property.

I'm kind of confused right now because every time I'm using my app with ssr: true when I look at the network requests and I see my projects page request, it comes back as an HTML page, fully rendered, meaning. that it was fetched on the server, which is great.

Also, with ssr: true I'm fetching my projects like this:

function ProjectsPage() {
  const {data: projects} = trpc.useQuery(['projects.all-projects'])

  return (
    <>
      {projects && <ProjectsList projects={projects}/>}
    </>
  )
}

export default ProjectsPage


The confusion now is why should I fetch data in getStaticProps or getServerSideProps, something like this (taken from tRPC documentation):

export async function getStaticProps(
  context: GetStaticPropsContext<{ id: string }>,
) {
  const ssg = await createSSGHelpers({
    router: appRouter,
    ctx: {},
    transformer: superjson, // optional - adds superjson serialization
  });
 ...
}

and just pass the data as props to my ProjectsPage route.

As you can see, I can also fetch using this approach, or even prefetch data which is even more confusing...And if I fetch data in getStaticProps or getServerSideProps, should I configure my tRPC using the ssr boolean as well?

I think I'm missing a good explanation about all these tools and I'm pretty sure it can be useful for others.

I'd like to discuss this with you all.
Was this page helpful?