Theo's Typesafe Cult•3y ago

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

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
  });
 ...
}

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.

8 Replies

Unknown User•3y ago

Message Not Public

pogadevOP•3y ago

could you please show me an example code of that? I'm curios how you handle your context types in getStaticProps for example

Unknown User•3y ago

Message Not Public

pogadevOP•3y ago

@matee if I apply what is in the docs, I get some erros. For example

export const getStaticProps = async (context: GetStaticPropsContext) => {
  const ssg = createSSGHelpers({
    router: appRouter,
    ctx: {} // this is expecting some values, like req, res, etc,, I can't leave it an empty object.
  })

  const data = await ssg.fetchQuery('projects.projects');

  return {
    props: {
      projectsList: data
    }
  }
}

export const getStaticProps = async (context: GetStaticPropsContext) => {
  const ssg = createSSGHelpers({
    router: appRouter,
    ctx: {} // this is expecting some values, like req, res, etc,, I can't leave it an empty object.
  })

  const data = await ssg.fetchQuery('projects.projects');

  return {
    props: {
      projectsList: data
    }
  }
}

Unknown User•3y ago

Message Not Public

pogadevOP•3y ago

Oh yeah...this is what I'm missing..I actually created the project form scratch. Thanks, I'll take a look at it

cje•3y ago

there's also some examples in the kitchen sink repo https://github.com/trpc/examples-kitchen-sink

GitHub

GitHub - trpc/examples-kitchen-sink: 🎛️ tRPC Kitchen Sink

🎛️ tRPC Kitchen Sink. Contribute to trpc/examples-kitchen-sink development by creating an account on GitHub.

cje•3y ago

its currently on v10, but i think there should be a branch (or at least older commits) that show how to do it in v9

Gaming

Programming

tRPC app with SSR true, getStaticProps or getServerSideProps