7 replies

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 || "");
      },
    }
  );

  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 || "");
      },
    }
  );

T3 app/Vercel/Planetscale Slow fetches

Similar Threads

Similar Threads

Similar Threads