10 replies

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

/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

getServerSideProps

getStaticProps

getStaticProps

. On top of this, I know that tRPC configuration accepts a

ssr: true | false

ssr: true | false

property.

I'm kind of confused right now because every time I'm using my app with

ssr: true

ssr: true

when I look at the network requests and I see my

projects

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

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

getStaticProps

getServerSideProps

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

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

getStaticProps

getServerSideProps

getServerSideProps

, should I configure my tRPC using the

ssr

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.

TTC

Theo's Typesafe Cult•4y ago•

10 replies

pogadev

tRPC app with SSR true, getStaticProps or getServerSideProps

/projects

/projects

getServerSideProps

getServerSideProps

getStaticProps

getStaticProps

. On top of this, I know that tRPC configuration accepts a

ssr: true | false

ssr: true | false

property.

I'm kind of confused right now because every time I'm using my app with

ssr: true

ssr: true

when I look at the network requests and I see my

projects

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

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

getStaticProps

getServerSideProps

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

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

getStaticProps

getServerSideProps

getServerSideProps

, should I configure my tRPC using the

ssr

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.

tRPC app with SSR true, getStaticProps or getServerSideProps

tRPC app with SSR true, getStaticProps or getServerSideProps

Similar Threads

Similar Threads

Similar Threads