Theo's Typesafe Cult•2y ago

tRPC prefetching URL slower? - What am I doing wrong here.

I've been toying with ISR attempts, failing, so moved back and am going step by step. During testing, I tried (and by the loading page details of the JSON) succeeded! The pre-fetched data is there! However, the page is 30% slower in lighthouse! Am I doing this wrong? The goal is to eventually have it cached for SEO purposes, so pre-fetch of just the query isn't quiet there yet.

import Head from "next/head";
import { trpc } from "../utils/trpc";
import ListPageSingle from "./components/listPageSingle";

import { createProxySSGHelpers } from "@trpc/react-query/ssg";
import { appRouter } from "../server/trpc/router/_app";
import superjson from "superjson";
import { PrismaClient } from "@prisma/client";
import { InferGetServerSidePropsType } from "next";

const prisma = new PrismaClient();

export async function getStaticProps() {
  const ssg = createProxySSGHelpers({
    router: appRouter,
    ctx: { session: null, prisma },
    transformer: superjson,
  });

  await ssg.post.getpostTypes.prefetch("discord");

  return {
    props: {
      trpcState: ssg.dehydrate(),
    },
  };
}

export default function DiscordPage(
  props: InferGetServerSidePropsType<typeof getStaticProps>
) {
  const { data: postQuery = [] } =
    trpc.post.getpostTypes.useQuery("discord");

  return (
    <>
      <Head>
        <title>title</title>
      </Head>
      <h1 className="text-5xl">header</h1>
      <p>
paragraph
      </p>
      <p>{JSON.stringify(postQuery)}</p>
      <div className="my-10 h-0 w-auto border border-gray-200"></div>
      <ListPageSingle queryData={postQuery} />
    </>
  );
}

import Head from "next/head";
import { trpc } from "../utils/trpc";
import ListPageSingle from "./components/listPageSingle";

import { createProxySSGHelpers } from "@trpc/react-query/ssg";
import { appRouter } from "../server/trpc/router/_app";
import superjson from "superjson";
import { PrismaClient } from "@prisma/client";
import { InferGetServerSidePropsType } from "next";

const prisma = new PrismaClient();

export async function getStaticProps() {
  const ssg = createProxySSGHelpers({
    router: appRouter,
    ctx: { session: null, prisma },
    transformer: superjson,
  });

  await ssg.post.getpostTypes.prefetch("discord");

  return {
    props: {
      trpcState: ssg.dehydrate(),
    },
  };
}

export default function DiscordPage(
  props: InferGetServerSidePropsType<typeof getStaticProps>
) {
  const { data: postQuery = [] } =
    trpc.post.getpostTypes.useQuery("discord");

  return (
    <>
      <Head>
        <title>title</title>
      </Head>
      <h1 className="text-5xl">header</h1>
      <p>
paragraph
      </p>
      <p>{JSON.stringify(postQuery)}</p>
      <div className="my-10 h-0 w-auto border border-gray-200"></div>
      <ListPageSingle queryData={postQuery} />
    </>
  );
}

12 Replies

Rhys•2y ago

@Debaucus You might be using tRPC wrong - do you have any need to use tRPC in this instance or can you just call your DB directly? https://www.youtube.com/watch?v=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...

Rhys•2y ago

During testing, I tried (and by the loading page details of the JSON) succeeded! The pre-fetched data is there! However, the page is 30% slower in lighthouse!

When testing it, were you running a production build or a dev build also?

DebaucusOP•2y ago

Production, I'll checkout the video!

Rhys•2y ago

To give an example of when to use prefetch VS not, check out these two snippets from one of my projects: Reading from DB directly: https://github.com/AnswerOverflow/AnswerOverflow/blob/main/apps/main-site/src/pages/c/%5BcommunityId%5D/index.tsx In this example, the content of the page isn't going to change at all for the user viewing it, so I just read right from my DB Using tRPC prefetch: https://github.com/AnswerOverflow/AnswerOverflow/blob/main/apps/main-site/src/pages/m/%5BmessageId%5D.tsx In this example, the content of the page needs to be refetched depending on the auth state of the user as they might have access to additional private information

GitHub

AnswerOverflow/[messageId].tsx at main · AnswerOverflow/AnswerOverf...

Indexing Discord Help Channel Questions into Google - AnswerOverflow/[messageId].tsx at main · AnswerOverflow/AnswerOverflow

DebaucusOP•2y ago

I feel like I have a miss understating, I thought (generally) you are supposed to pre-fetch/isr in order to get any kind of SEO on a page (other then meta data)? My data (specifically for this page) doesn't need any user data to be returned, the navbar etc does use it, around the wrapper, but this is a sub page and specifically only here is pre-fetch used.

Rhys•2y ago

You're wanting the contents of the page to be statically generated (whether that be thru ISR, SSR, or SSG) for SEO and caching right?

DebaucusOP•2y ago

Ye, that's the plan! The content changes periodically like a news page, so ISR sounds the best, this is my step by step learning phase. ISR is the end goal

Rhys•2y ago

Yep ISR is the best choice for that, this should be covered in the video I linked but for your use case, you don't need to fetch that data through tRPC, you can just read from your database directly in getStaticProps() https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration

Data Fetching: Incremental Static Regeneration | Next.js

Learn how to create or update static pages at runtime with Incremental Static Regeneration.

Rhys•2y ago

I believe pre-fetch is just a react query method, it's not actually important for doing ISR in this use case since you're just passing the data you want to render through getStaticProps() and accessing that in the props of the component

jdsl•2y ago

@Debaucus Are you testing lighthouse in production? Testing in development might be the reason you are seeing the slower performance. Everything you did looks correct at quick glance.

jdsl•2y ago

https://trpc.io/docs/nextjs/ssg

Static Site Generation | tRPC

Reference project//github.com/trpc/examples-next-prisma-todomvc

DebaucusOP•2y ago

Yes I was testing lighthouse on vercel production site. With my code the data was there, but paints took 1s more From my test the html is pre-hydrated, so good for SEO, but the slower load time by paint is.. not so ideal @Rhys @joerambo My lack of understanding is showing, but could the slow paint be because my component is missing some changes? All the props are passed to the component from the query. But does the component need any edits to be faster? @joerambo @Rhys Last tag! I found the issue! So it turned out that extra second of load time was hydration issues, inside the component I was doing a <Link> inside another <Link> and it was console logging the error, adding to paint time! Since I wasn't in dev mode it was not popping up! Will definitely check the console more often now! Thank you for the help and providing resources ❤️

Gaming

Programming

tRPC prefetching URL slower? - What am I doing wrong here.