Theo's Typesafe Cult•2y ago

T3 app/Vercel/Planetscale Slow fetches

Hey guys, trying to troubleshoot some very slow load times on my current deployment, using full T3 stack (Planetscale too) I am just using TRPC queries in my components for fetches, (no SSR anywhere at the moment) but even then fetching is really slow, considering the quite small payload we end up returning. Im quite new to this stack so wondering what are the areas I should be looking at first. Here is an example page (ignore the page layout its broken af atm) https://parted-euro.vercel.app/listings/listing?id=clecuhyxm0000mq08m19m4cmk But the content takes so long to load in, and looking at the network tab, theres not much there. The query is quite simple too (I can share this if it might help) Here is how Im fetching the listing on the page

  const router = useRouter();
  const listing = trpc.listings.getListing.useQuery(
    {
      id: router.query.id as string,
    },
    {
      enabled: !!router.query.id,
      onSuccess: (data) => {
        setMainImage(data?.images[0]?.url || "");
      },
    }
  );

  const router = useRouter();
  const listing = trpc.listings.getListing.useQuery(
    {
      id: router.query.id as string,
    },
    {
      enabled: !!router.query.id,
      onSuccess: (data) => {
        setMainImage(data?.images[0]?.url || "");
      },
    }
  );

5 Replies

Unknown User•2y ago

Message Not Public

Yiannis•2y ago

I used ssr and made sure my deployment branch on planetscale and the edge functions on my vercel were on the same region. https://vercel.com/docs/concepts/functions/serverless-functions/regions

Vercel Documentation

Setting Serverless Function Regions

Learn how to reduce Serverless Function latency by configuring which region they're deployed in, which can be set in your project's Dashboard settings.

Yiannis•2y ago

I followed this to do ssr: https://youtu.be/G2ZzmgShHgQ

Christopher Ehrlich

YouTube

Advanced tRPC - Callers, functions, and gSSP

Repo for this video: https://github.com/c-ehrlich/you-dont-need-callers If you want to use schema in the frontend, they cannot be imported from the same file as things that run specifically in the backend. One solution would be to put them into a procedureName.schema.ts or similar file. tRPC: https://trpc.io/docs Create T3 App: https://crea...

Yiannis•2y ago

Something else to consider is cold start. Like if your db hasn’t been used in a while it’s gonna take longer.

Cody•2y ago

Hey all, appreciate all the responses. Biggest culprit was the Vercel functions region, made a huge difference. Working on making some of my stuff SSR now too. So much helpful information, thankyou!

Gaming

Programming

T3 app/Vercel/Planetscale Slow fetches