16 replies

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

TTC

Theo's Typesafe Cult•3y ago•

16 replies

Debaucus

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

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

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads