TTC
Theo's Typesafe Cult•2mo ago
Night765

Questions on prefetching in NextJS

I have this productPage in my products/[id]/page.tsx file 
import { getProduct } from "../../../utils";

export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const product = await getProduct(id);
  return (
    <main style={{ padding: 24 }}>
      <h1>{product.name}</h1>
      <p>Price: ${product.price}</p>
      <p>{product.description}</p>
    </main>
  );
}
import { getProduct } from "../../../utils";

export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const product = await getProduct(id);
  return (
    <main style={{ padding: 24 }}>
      <h1>{product.name}</h1>
      <p>Price: ${product.price}</p>
      <p>{product.description}</p>
    </main>
  );
}
and this util function 
export async function getProduct(id: string) {
  // Simulate real server work: DB query, pricing engine, etc.
  await new Promise((r) => setTimeout(r, 2000));
  return {
    id,
    name: `Product ${id}`,
    price: (Number(id) * 7.99).toFixed(2),
    description: `Details of Product ${id}`,
  };
}
export async function getProduct(id: string) {
  // Simulate real server work: DB query, pricing engine, etc.
  await new Promise((r) => setTimeout(r, 2000));
  return {
    id,
    name: `Product ${id}`,
    price: (Number(id) * 7.99).toFixed(2),
    description: `Details of Product ${id}`,
  };
}
I have a Next Link which redirects to this product detail page. I'm doing my tests on the production build. When the link appears in my viewport, I can see in the network tab of my browser that it has prefetched the product page. However, when I click on it, there is still a delay of 2 seconds before the page gets displayed. Why is that ? I fail to understand what prefetching actually does & what are the real uses-cases of prefetching which can be clearly visible ?
6 Replies
__Fallenreaper
__Fallenreaper•2mo ago
You have setTimeout set to 2 seconds, so that sounds like the answer. When you go to the page, it is calling get product, which is doing a 2 second delay prior to returning some data.
Nate
Nate•2mo ago
i think what op is asking is how can prefetching fit in with this component? i’m not a nextjs person so idk
Thereallo
Thereallo•2mo ago
njs only prefetches the JavaScript/React components needed to render that page when you prefetch a route it doesnt run your data fetching logic (getProduct() in your case) The 2s delay happens because getProduct() runs when you actually navigate to the page, not during prefetch njs downloads the JavaScript bundle for /products/[id] to your browser on prefetch Your Server Component executes only on navigation to that path getProduct() gets called, waits 2 seconds, renders
Thereallo
Thereallo•2mo ago
You can use generateStaticParams to prerender pages on build time if you prefer that
Functions: generateStaticParams | Next.js
API reference for the generateStaticParams function.
Nate
Nate•2mo ago
so a better test would be to conditionally render the component after the page loads?
Thereallo
Thereallo•2mo ago
Yes, that's basically what makes prefetching good imo

Did you find this page helpful?